ASP.NET MVC分页、ASP.NET MVC Ajax分页组件1.0发布!

1/6/2010来源:ASP技巧人气:11144

 在实际项目的开发过程中!发现很多人对asp.net MVC框架下的分页实现感到吃力或者感到繁琐!故在元旦假期为大家写了个ASP.NET MVC分页组件!该分页组件现中包含ASP.NET MVC Ajax分页以及ASP.NET MVC 普通分页!现正式发布供大家使用!

     因本人水平有限!使用之中发现不足之处还望大家指点一二!

    请需要的朋友在此处下载:DaiChaoMvcPager.dll

    该分页组件相关说明:



1    namespace:DaiChaoMvcPager2 3    class:DCMvcPager4  




   属性:



代码
  1 #region 分页所需要的实体参数类成员属性  2         /// <summary>  3         /// Ajax加载Url数据后填充所需要的容器Dom ID  Default:requestAjaxText  4         /// </summary>  5          public string LoadDomId  6         {  7             set { _loaddomid = value; }  8             get { return _loaddomid; }  9         } 10         /// <summary> 11         /// 当为Ajax分页时:Ajax请求所要加载的Url格式(使用Jquery.Load)  Eg:/News/Category-1-{0} 12         /// 当为普通分页时:普通分页所要加载的Url格式(使用GET方式) Eg:/News/Category-1-{0} 13         /// /News/Category-1-{0}中的{0}为页码占位符,替换成页码即可 14         /// Default:"" 15         /// </summary> 16          public string FormatLinkUrl 17         { 18             set { _formatlinkurl = value; } 19             get { return _formatlinkurl; } 20         } 21         /// <summary> 22         /// 当前页面  Default:1 23         /// </summary> 24          public int CurrentPage 25         { 26             set { _currentpage = value; } 27             get { return _currentpage; } 28         } 29         /// <summary> 30         /// 页大小  Default:15 31         /// </summary> 32          public int PageSize 33         { 34             set { _pagesize = value; } 35             get { return _pagesize; } 36         } 37         /// <summary> 38         /// 总记录数  Default:0 39         /// </summary> 40          public int RecordCount 41         { 42             set { _recordcount = value; } 43             get { return _recordcount; } 44         } 45         /// <summary> 46         /// 每页显示数字按钮的个数  Default:10 47         /// </summary> 48          public int NumericButtonCount 49         { 50             set { _numericbuttoncount = value; } 51             get { return _numericbuttoncount; } 52         } 53         /// <summary> 54         /// 页码导航中第一页的文本  Default:首页 55         /// </summary> 56          public string FirstPageText 57         { 58             set { _firstpagetext = value; } 59             get { return _firstpagetext; } 60         } 61         /// <summary> 62         /// 页码导航中上一页的文本  Default:上一页 63         /// </summary> 64          public string PRevPageText 65         { 66             set { _prevpagetext = value; } 67             get { return _prevpagetext; } 68         } 69         /// <summary> 70         /// 页码导航中下一页的文本  Default:下一页 71         /// </summary> 72          public string NextPageText 73         { 74             set { _nextpagetext = value; } 75             get { return _nextpagetext; } 76         } 77         /// <summary> 78         /// 页码导航中末页的文本  Default:末页 79         /// </summary> 80          public string LastPageText 81         { 82             set { _lastpagetext = value; } 83             get { return _lastpagetext; } 84         } 85         /// <summary> 86         /// 页码导航中上一组(更多页)的文本  Default:&lt;img src="http://www.cnblogs.com/Content/images/pager/MoreNumericButton.gif" border="0" align="absmiddle"/&gt; 87         /// </summary> 88          public string MorePrevPageText 89         { 90             set { _moreprevpagetext = value; } 91             get { return _moreprevpagetext; } 92         } 93         /// <summary> 94         /// 页码导航中下一组(更多页)的文本  Default:&lt;img src="http://www.cnblogs.com/Content/images/pager/MoreNumericButton.gif" border="0" align="absmiddle"/&gt; 95         /// </summary> 96          public string MoreNextPageText 97         { 98             set { _morenextpagetext = value; } 99             get { return _morenextpagetext; }100         }101         /// <summary>102         /// 转到第几页中的按钮的值  Default:GO103         /// </summary>104          public string SubmitButtonText105         {106             set { _submitbuttontext = value; }107             get { return _submitbuttontext; }108         }109         /// <summary>110         /// 转到第几页中的按钮的样式名称  Default:button_go111         /// </summary>112          public string SubmitButton_CSSName113         {114             set { _submitbutton_cssname = value; }115             get { return _submitbutton_cssname; }116         }117         /// <summary>118         /// 转到第几页中文本框的样式名称  Default:textbox_pageIndex119         /// </summary>120          public string TextBox_CssName121         {122             set { _textbox_cssname = value; }123             get { return _textbox_cssname; }124         }125         /// <summary>126         /// 导航按钮(普通)的样式名称  Default:page_a_NumericButton127         /// </summary>128          public string NumericButton_Cssname_One129         {130             set { _numericbutton_cssname_one = value; }131             get { return _numericbutton_cssname_one; }132         }133         /// <summary>134         /// 导航按钮(当前页按钮)的样式名称  Default:page_a_current135         /// </summary>136         public string NumericButton_Cssname_Two137         {138             set { _numericbutton_cssname_two = value; }139             get { return _numericbutton_cssname_two; }140         }141         /// <summary>142         /// 导航按钮(不能访问的,如:如果已经是第一页那么上一页和首页将不能被访问)的样式名称  Default:page_a_disabled143         /// </summary>144         public string NumericButton_Cssname_Three145         {146             set { _numericbutton_cssname_three = value; }147             get { return _numericbutton_cssname_three; }148         }149         /// <summary>150         /// 跳转文本框前后的文本样式名称(如转到{0}页中的“转到第”和“页”的样式名称!)  Default:page_span_text151         /// </summary>152         public string NumericButton_Cssname_Four153         {154             set { _numericbutton_cssname_four = value; }155             get { return _numericbutton_cssname_four; }156         }157         /// <summary>158         /// 分页统计信息区域外框DIV的样式表名称  Default:Statistics159         /// </summary>160         public string Statistics_Div_Cssname161         {162             set { _statistics_div_cssname = value; }163             get { return _statistics_div_cssname; }164         }165         /// <summary>166         /// 分页统计信息区域中的数字样式表名称  Default:StatisticsNumeric167         /// </summary>168         public string Statistics_Div_Numeric_Cssname169         {170             set { _statistics_div_numeric_cssname = value; }171             get { return _statistics_div_numeric_cssname; }172         }173         /// <summary>174         /// 分页页码外框DIV的样式表名称  Default:NavigationArea175         /// </summary>176         public string NavigationArea_Div_Cssname177         {178             set { _navigationarea_div_cssname = value; }179             get { return _navigationarea_div_cssname; }180         }181         #endregion 分页所需要的实体参数类成员属性
   提供的方法:

   方法一:

代码
        /// <summary>        /// MVC框架AJAX分页函数 返回分页导航的HTML代码(需要Jquery支持)        /// </summary>        /// <returns>MVC框架AJAX分页函数 返回分页导航的HTML代码(需要Jquery支持)</returns>        public string MvcAjaxPager()
   方法二:





代码
        #region MVC框架普通分页函数 返回分页导航的Html代码        /// <summary>        /// MVC框架普通分页函数 返回分页导航的Html代码        /// </summary>        /// <returns>MVC框架普通分页函数 返回分页导航的Html代码</returns>        public string MvcPager()




    现在提供使用方法:

   一:先引用该DLL到您自己的项目!



引用命名空间:

using DaiChaoMvcPager;




  二:实例化该类:



DCMvcPager pager = new DCMvcPager();
三:给该组件需要的属性给赋值:

必需属性:pager.RecordCount(总记录数)和pager.FormatLinkUrl(Url格式!在上面的属性注释里面有详细的注释说明)





最后一步:执行ASP.NET MVC Ajax分页函数:pager.MvcAjaxPager()或者普通分页函数(请求方式:get)pager.MvcPager()即可!该函数有一个string类型的返回值!返回值为生成的分页页码和分页统计信息html代码!得到该返回值后怎么传递给view显示我就不多说了不在本文的范围之内!

示例(Jquery Ajax分页)代码如下:(这里使用了一个用户控件来展示数据!你可以根据自己需要换成其他的!)



代码
1 public ActionResult NewsCategory(int Article_ClassID, int? PageIndex) 2 { 3     if (Request.IsAjaxRequest()) 4     { 5         if (!PageIndex.HasValue) 6         { 7             PageIndex = 1; 8         } 9         Model_Article ModelTool = new Model_Article();10         DCMvcPager pager = new DCMvcPager();11         pager.RecordCount = ModelTool.CMS_Article_GetRecordCount(Article_ClassID);12         pager.PageSize = 20;13         pager.FormatLinkUrl = "/News/Category-"+Article_ClassID+"-{0}";14         //此处这个占位符:{0}即为当前页码索引需要占用的位置!你也可以根据需要自定义路由规则以此得到不同格式的Url地址!15         pager.CurrentPage = PageIndex.Value;16         List<Model_Web_Article> Lists = ModelTool.CMS_Article_GetList(pager.PageSize, pager.CurrentPage, Article_ClassID, pager.RecordCount);17         ViewData["PagerHtml"]=pager.MvcAjaxPager();18         return PartialView(Lists);19     }20     else21     {22         //错误处理23     }24 }






当然上面你也可以通过强型返回数据列表和html分页代码!这里就不作描述了!

用户控件的html代码如下:



代码
1 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Model_Web_Article>" %> 2 <div id="requestAjaxText"> 3     <div id="list_containers"> 4         <ul> 5             <% 6             int _i = 0; 7             foreach (Model_Web_Article item in Model) 8             { 9                 <li>10                     <h2><%=Html.Encode(item.Article_Title.Trim())%></h2>11                     <span><%=item.Article_Time.ToShortDateString()%></span>12                 </li>13             }%>14         </ul>15     </div>16     <%=ViewData["PagerHtml"]%>17 </div>






该分页组件使用了一套默认的样式!现把样式提供出来:



代码
@charset "utf-8";.Statistics{height:22px;line-height:22px;text-align:left;padding-left:11px;font-family:Tahoma;}.StatisticsNumeric{margin-left:4px;margin-right:4px;font-weight:Bold;color:#690;font-size:14px;}.NavigationArea{border-bottom:#ddd 1px solid;text-align:left;padding-bottom:10px;margin:5px 3px 5px 0px;padding-left:3px;padding-right:3px;font-family:Tahoma;display:block;clear:left;font-size:14px;padding-top:10px;}.NavigationArea a{text-decoration:none;padding-bottom:5px;padding-left:8px;padding-right:8px;padding-top:5px;}.NavigationArea a:hover{border-bottom:#690 2px solid;color:#690;text-decoration:none;}.page_a_NumericButton{color:#000000;}.page_a_disabled{color:#999999;}.page_a_current{border-bottom:#690 2px solid;color:#690;font-weight:700;}.button_go{border:none;background:#FFFFFF;font-family:Tahoma;border:solid 1px #CCCCCC;}.textbox_pageIndex{font-family:Tahoma;width:45px;border:solid 1px #CCCCCC;margin-left:5px;margin-right:5px;}.page_span_text{font-family:Tahoma;font-size:13px;}
该样式表使用了一张图片作为上一组和下一组的按钮!图片为:一张小图片就不提供下载了!麻烦朋友们直接图片另存为