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