ajax mvc3 razor 分页

转载

CTO流星雨 2012-01-31 09:33:53

文章标签 职场 ajax 休闲 ajax mvc3 razor 分页 c 文章分类 前端开发

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: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>