ASP.NET MVC分页、ASP.NET MVC Ajax分页组件

日期：09-03 来源：中国设计秀作者：cnwebshow.com

{ 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;}
该样式表使用了一张图片作为上一组和下一组的按钮！图片为：一张小图片就不提供下载了！麻烦朋友们直接图片另存为