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张图片
 ①Model,没什么好说
   
   
using System;
using System.Collections;


/* *
* 作者:jackchain
* QQ : 710782046
* Email:[email protected]
*/
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 [email protected]("/Scripts/jquery.unobtrusive-ajax.min.js") ></ script >
OK至此对于MVC3.0一个按条件分页功能即可实现了,而且是局部刷新的。更多模式你可参考MVCPager的Demo
转载请注明出处: http://www.cnblogs.com/qidian10

你可能感兴趣的:(Ajax)