ajax分页,MVC3.0 Razor实现Ajax数据分页

数据分页一只是一个老生常谈的问题，只要是做系统开发，一般都会牵扯到。最新学习了Razor，用到分页功能，分享下如何实现Ajax分页。
1.准备工作
网上有现成的分页工具MVCPager，最新的是1.5版本，综合比较后感觉这个控件还是蛮好的，决定采用
MVCPager源码和Demo：http://mvcpager.codeplex.com/releases/view/64098
源码中采用了Linq，由于自己项目没用Linq，所以对MVCpager稍作了修改，修改后的dll：MVCWeb.rar
其实就改了一个地方，数据类型由IQuery改成IList，加入一个TotalCount（总记录数量）参数
2.实现
首先来个图，吊吊胃口

①Model，没什么好说
using System; using System.Collections; /** * 作者：陈杰 * QQ : 710782046 * Email:[email protected] * Web :http://www.qidian10.com */ namespace Model { public class comnotices { #region 构造函数 public comnotices() {} #endregion #region 属性 ///

自动增长

public int nid { get; set; } ///

信息类别

public string category { get; set; } ///

信息标题

public string title { get; set; } ///

信息内容

public string infodetails { get; set; } ///

发布时间

public string publishdate { get; set; } ///

发布人

public string publishman { get; set; } ///

访问量

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 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 @{ ViewBag.Title = "xxxxxx"; Layout = "~/Views/Shared/_Layout.cshtml"; }

.............

............. @{Html.RenderPartial("NewsAjaxList", Model); }@*这里注意，用于AJAX局部刷新*@

④局部视图（NewsAjaxList.cshtml)
@using Webdiyer.WebControls.Mvc @model PagedList

@foreach (var news in Model) {
• [@news.category]@news.title HITS:@news.hits @news.publishdate
}

@*分页控件显示的地方一定要放在刷新的div里面，不然会出现双重控件*@

@Html.AjaxPager(Model, new PagerOptions() { PageIndexParameterName = "page", ShowDisabledPagerItems = true, AlwaysShowFirstLastPageNumber = true, CssClass = "pages" }, new AjaxOptions { UpdateTargetId = "CJ_NEWSLIST" })

@*需用样式的分页，去掉css即可*@

@Html.AjaxPager(Model, new PagerOptions() { PageIndexParameterName = "page", ShowDisabledPagerItems = true, AlwaysShowFirstLastPageNumber = true }, new AjaxOptions { UpdateTargetId = "CJ_NEWSLIST" })

⑤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库


OK至此对于MVC3.0一个按条件分页功能即可实现了，而且是局部刷新的。更多模式你可参考MVCPager的Demo
转载请注明出处：http://www.cnblogs.com/qidian10

Tags: 

延伸阅读