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.实现
首先来个图，吊吊胃口
![[转]MVC3.0 Razor实现Ajax数据分页_第1张图片](http://img.e-com-net.com/image/product/f2dd1d2b0b47474ab9c79e8699f0f0d5.png)
①Model，没什么好说
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