MVC3.0 Razor实现Ajax数据分页

时间:2011-06-20 17:23

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


/**
* 作者:jackchain
* QQ : 710782046
* Email:[email protected]
*/
namespace Model
{
publicclass comnotices
{
#region 构造函数
public comnotices()
{}
#endregion

#region 属性

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

///<summary>信息类别</summary>
publicstring category
{
get;
set;
}

///<summary>信息标题</summary>
publicstring title
{
get;
set;
}

///<summary>信息内容</summary>
publicstring infodetails
{
get;
set;
}

///<summary>发布时间</summary>
publicstring publishdate
{
get;
set;
}

///<summary>发布人</summary>
publicstring publishman
{
get;
set;
}

///<summary>访问量</summary>
publicint hits
{
get;
set;
}


#endregion

#region 获得自增键
privatestring 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

MVC3.0 Razor实现Ajax数据分页,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。