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