MVC3.0 Razor实现Ajax数据分页

前端之家收集整理的这篇文章主要介绍了MVC3.0 Razor实现Ajax数据分页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
数据分页一只是一个老生常谈的问题,只要是做系统开发,一般都会牵扯到。最新学习了Razor,用到分页功能分享下如何实现Ajax分页
1.准备工作
网上有现成的分页工具 MVCPager,最新的是1.5版本,综合比较后感觉这个控件还是蛮好的,决定采用
源码中采用了Linq,由于自己项目没用Linq,所以对MVCpager稍作了修改修改后的dll: MVCWeb.rar
其实就改了一个地方,数据类型由IQuery改成IList,加入一个TotalCount(总记录数量)参数
2.实现
首先来个图,吊吊胃口
 ①Model,没什么好说
  
  
using System;
System.Collections;


/* *
* 作者:jackchain
* QQ : 710782046
* Email:ovenjackchain@gmail.com
*/
namespace Model
{
public class comnotices
{
#region 构造函数
comnotices()
{}
#endregion

属性

/// <summary> 自动增长 </summary>
int nid
{
get ;
set ;
}

信息类别 string category
{
信息标题 title
{
信息内容 infodetails
{
发布时间 publishdate
{
发布人 publishman
{
访问量 hits
{
;
}




获得自增键 private ReturnAutoID()
{
return " nid " ;
}

}
}


 ②Controller
[OutputCache(Duration = 300 )]
// condition是条件,page是当前页面
ActionResult Index( condition "" , page 1 )
{
if (condition.ToLower() != all )
condition
category=' + Server.HtmlDecode(condition.Replace( ' )) ' else ;
    
ToPagedList就是修改的MVCpager方法,参数:当前页号,分页大小,总记录数量
FindAllByPage是自己实现的分页方法,根据条件只取当前页面的数据 PagedList < comnotices > notices mgr.FindAllByPage(((page - ) * 20 ).ToString(),0)">20 11 ).ToPagedList(page,0)">.Parse(mgr.GetTotalCount( (Request.IsAjaxRequest())
PartialView( NewsAjaxList View(notices);
}
  ③View页面
@ 这里注意 @
@model Webdiyer.WebControls.Mvc.PagedList
Model.comnotices

@{
ViewBag.Title
xxxxxx ;
Layout
~/Views/Shared/_Layout.cshtml ;
}

div = submain subleft
.............
</ div subright
.............
@{Html.RenderPartial(
这里注意,用于AJAX局部刷新 @
>

  ④局部视图(NewsAjaxList.cshtml)

@using Webdiyer.WebControls.Mvc
@model PagedList 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 newsdate HITS:@news.hits @news.publishdate span ></
}
br />
@
分页控件显示的地方一定要放在刷新的div里面,不然会出现双重控件 @
div style text-align:right;
@Html.AjaxPager(Model,255)">new
PagerOptions() { PageIndexParameterName page true pages },0)"> AjaxOptions { UpdateTargetId })
需用样式的分页,去掉css即可   ⑤css样式
分页控件样式 */
.pages
{ color : #000 ; font-weight bold font-size 13px ; }
.pages .item
padding 3px 6px font-size 13px 数字页索引样式
.pages .cpb
color red 1px 6px 当前页样式
.pages a
text-decoration none 0 5px border 1px solid #ddd margin 0 2px normal
.pages a:hover
background-color #3666d4 #fff border 1px solid #3666d4 }
  ⑥不要忘记应用必要的js库,这里采用的是jquery库
   
   
< script src ="@Url.Content(" ~/Scripts/jquery-1.4.4.min.js")" type ="text/javascript" ></ script >

type ="text/javascript" src =@Url.Content("/Scripts/jquery.unobtrusive-ajax.min.js") >

OK至此对于MVC3.0一个按条件分页功能即可实现了,而且是局部刷新的。更多模式你可参考MVCPager的Demo

http://www.soaspx.com/dotnet/asp.net/DPattern/dpattern_20110620_7734.html

猜你在找的Ajax相关文章