數據分頁一只是一個老生常談的問題，只要是做系統開發，一般都會牽扯到。最新學習了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;


/**
* 作者：jackchain * QQ : 710782046
* Email:ovenjackchain@gmail.com
*/
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 轉載請注明出處：http://www.cnblogs.com/qidian10

轉載于:https://www.cnblogs.com/qidian10/archive/2011/06/20/2085295.html

總結

以上是生活随笔為你收集整理的MVC3.0 Razor实现Ajax数据分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。