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.实现
首先来个图，吊吊胃口
①Model，没什么好说
using
System;
using
System.Collections;
/*
*
* 作者：jackchain
* QQ : 710782046
* Email:[email protected]
*/
namespace
Model
{
public
class
comnotices
{
#region
构造函数
public
comnotices()
{}
#endregion
#region
属性
///
public
int
nid
{
get
;
set
;
}
///
public
string
category
{
get
;
set
;
}
///
public
string
title
{
get
;
set
;
}
///
public
string
infodetails
{
get
;
set
;
}
///
public
string
publishdate
{
get
;
set
;
}
///
public
string
publishman
{
get
;
set
;
}
///
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