MVC3.0 Razor实现Ajax数据分页

发布时间：2020-12-16 00:22:21 所属栏目：百科来源：网络整理

导读：数据分页一只是一个老生常谈的问题，只要是做系统开发，一般都会牵扯到。最新学习了Razor，用到分页功能，分享下如何实现Ajax分页。 1.准备工作网上有现成的分页工具 MVC Pager，最新的是1.5版本，综合比较后感觉这个控件还是蛮好的，决定采用 MVCPager源码

数据分页一只是一个老生常谈的问题，只要是做系统开发，一般都会牵扯到。最新学习了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;

   
    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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!