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
   
    属性
   
   
 
 
   
   ///
   
    
   
   <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
    
    [email protected]("/Scripts/jquery.unobtrusive-ajax.min.js")
    
    ></
    
    script
    
    >
   
   

复制代码

OK至此对于MVC3.0一个按条件分页功能即可实现了，而且是局部刷新的。更多模式你可参考MVCPager的Demo

转载请注明出处： http://www.cnblogs.com/qidian10