数据分页一只是一个老生常谈的问题，只要是做系统开发，一般都会牵扯到。最新学习了Razor，用到分页功能，分享下如何实现Ajax分页。
1.准备工作
网上有现成的分页工具MVCPager，最新的是1.5版本，综合比较后感觉这个控件还是蛮好的，决定采用
MVCPager源码和Demo：
http://mvcpager.codeplex.com/releases/view/64098
源码中采用了Linq，由于自己项目没用Linq，所以对MVCpager稍作了修改，修改后的dll：
MVCWeb.rar
其实就改了一个地方，数据类型由IQuery改成IList，加入一个TotalCount（总记录数量）参数
using System; using System.Collections; /* * * 作者：jackchain* QQ : 710782046 * Email:ovenjackchain@gmail.com */ namespace Model { public class comnotices { #region 构造函数 public comnotices() {} #endregion #region 属性 /// <summary> 自动增长 </summary> public int nid { get ; set ; } /// <summary> 信息类别 </summary> public string category { get ; set ; } /// <summary> 信息标题 </summary> public string title { get ; set ; } /// <summary> 信息内容 </summary> public string infodetails { get ; set ; } /// <summary> 发布时间 </summary> public string publishdate { get ; set ; } /// <summary> 发布人 </summary> public string publishman { get ; set ; } /// <summary> 访问量 </summary> public int hits { get ; set ; } #endregion #region 获得自增键 private string ReturnAutoID() { return " nid " ; } #endregion } }
②Controller
[OutputCache(Duration = 300 )] // condition是条件，page是当前页面 public ActionResult Index( string condition = "" , int page = 1 ) { if (condition.ToLower() != " all " ) condition = " category=' " + Server.HtmlDecode(condition.Replace( " ' " , "" )) + " ' " ; else condition = "" ; // ToPagedList就是修改的MVCpager方法，参数：当前页号，分页大小，总记录数量 // FindAllByPage是自己实现的分页方法，根据条件只取当前页面的数据 PagedList < comnotices > notices = mgr.FindAllByPage(((page - 1 ) * 20 ).ToString(), " 20 " , "" , condition, 11 ).ToPagedList(page, 20 , int .Parse(mgr.GetTotalCount( "" , condition))); if (Request.IsAjaxRequest()) return PartialView( " NewsAjaxList " , notices); return View(notices); }
③View页面
@ * 这里注意 * @ @model Webdiyer.WebControls.Mvc.PagedList < Model.comnotices > @{ ViewBag.Title = " xxxxxx " ; Layout = " ~/Views/Shared/_Layout.cshtml " ; } < div class = " submain " > < div class = " subleft " > ............. </ div > < div class = " subright " > ............. @{Html.RenderPartial( " NewsAjaxList " , Model); }@ * 这里注意，用于AJAX局部刷新 * @ </ div > </ div >
④局部视图（NewsAjaxList.cshtml)
@using Webdiyer.WebControls.Mvc @model PagedList < Model.comnotices > < div id = " CJ_NEWSLIST " > < ul > @foreach (var news in Model) { < li >< a href = " /News/d@{@news.nid} " title = " @news.title " > [@news.category]@news.title </ a > < span class = " newsdate " > HITS:@news.hits @news.publishdate </ span ></ li > } </ ul >< br /> @ * 分页控件显示的地方一定要放在刷新的div里面，不然会出现双重控件 * @ < div style = " text-align:right; " > @Html.AjaxPager(Model, new PagerOptions() { PageIndexParameterName = " page " , ShowDisabledPagerItems = true , AlwaysShowFirstLastPageNumber = true , CssClass = " pages " }, new AjaxOptions { UpdateTargetId = " CJ_NEWSLIST " }) </ div > @ * 需用样式的分页，去掉css即可 * @ < div style = " text-align:right; " > @Html.AjaxPager(Model, new PagerOptions() { PageIndexParameterName = " page " , ShowDisabledPagerItems = true , AlwaysShowFirstLastPageNumber = true }, new AjaxOptions { UpdateTargetId = " CJ_NEWSLIST " }) </ div > </ div >
⑤css样式
/* 分页控件样式 */ .pages { color : #000 ; font-weight : bold ; font-size : 13px ; } .pages .item { padding : 3px 6px ; font-size : 13px ; } /* 数字页索引样式 */ .pages .cpb { color : red ; padding : 1px 6px ; font-size : 13px ; } /* 当前页样式 */ .pages a { text-decoration : none ; padding : 0 5px ; border : 1px solid #ddd ; margin : 0 2px ; color : #000 ; font-weight : normal ; } .pages a:hover { background-color : #3666d4 ; color : #fff ; border : 1px solid #3666d4 ; text-decoration : none ; font-weight : normal ; }
⑥不要忘记应用必要的js库，这里采用的是jquery库
<
script
src
="@Url.Content("
~/Scripts/jquery-1.4.4.min.js")" type
="text/javascript"
></
script
>
<
script
type
="text/javascript"
src
=@Url.Content("/Scripts/jquery.unobtrusive-ajax.min.js")
></
script
>
OK至此对于MVC3.0一个按条件分页功能即可实现了，而且是局部刷新的。更多模式你可参考MVCPager的Demo
转载请注明出处：
http://www.cnblogs.com/qidian10
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
