Fork me on GitHub

MvcPager 分页示例 — 多个AjaxPager

本示例演示同一个页面上使用多个MvcPager为不同的数据实现Ajax分页(使用Partial View)

同一页面上使用多个MvcPager为不同数据实现Ajax分页时,必须确保每个MvcPager的PagerOptions.PageIndexParameterName值不同,同时给每个MvcPager的路由中添加了一个用于区分不同请求的url参数,在后台通过Request.QueryString["参数名"]获取该参数值后返回对应的包含分页数据的PartialView。

序号 文章标题 作者 文章来源
16 延安市吴起县境内古城投资三亿欲变陕北名镇 杨涛 吴起政府网
17 延安市居住证首发仪式在吴起举行 Webdiyer 吴起热线
18 黄土高原上的绿色丰碑——吴起县生态环境建设巡礼 杨涛 吴起热线
19 吴起的追梦之旅——吴起县争创“全国百强县”纪实 杨涛 吴起热线
20 延安铁边城入选第七批全国重点文保单位 杨涛 吴起热线
转到第

序号 文章标题 作者 文章来源
31 吴起再次荣获中国中小城市双“百强县”称号 杨涛 吴起热线
32 吴起率先在全市建成省级生态县 Webdiyer 吴起政府网
33 吴起农民的现代化信息生活 杨涛 吴起热线
34 延安吴起实施新一轮退耕还林 Webdiyer 吴起热线
35 陕西吴起:中国“退耕还林第一县” Webdiyer 吴起热线
转到第

序号 文章标题 作者 文章来源
41 吴起婚嫁习俗 Webdiyer 吴起热线
42 陕西省吴起县地税局税费收入突破17亿元大关 杨涛 吴起政府网
43 2012年吴起县人民政府工作报告 Webdiyer 吴起政府网
44 吴起:昔日红军长征落脚地 如今退耕还林第一县 杨涛 吴起热线
45 吴起县2013年春节文化系列活动安排 杨涛 吴起政府网
转到第

View:

@model CompositeArticles
<div id="articles">
    @Html.Partial("_AjaxArticles1",Model.ArticleList1)
</div>
<hr />
<div id="articles2">
    @Html.Partial("_AjaxArticles2", Model.ArticleList2)
</div>
<hr />
<div id="articles3">
    @Html.Partial("_AjaxArticles3", Model.ArticleList3)
</div>@section scripts{@{Html.RegisterMvcPagerScriptResource();}}  

_AjaxArticles1.cshtml:

    @model PagedList<article>
    @{ Html.RenderPartial("_ArticleTable"); }
<div class="row">
        <div class="col-xs-8">
        @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", PageIndexParameterName = "id", NumericPagerItemCount = 5, ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox" }).Options(o => o.AddRouteValue("target", "articles")).AjaxOptions(a => a.SetUpdateTargetId("articles"))
    </div>
        <div class="col-xs-4">
        <div class="input-group" style="margin:20px 0">
        <span class="input-group-addon">转到第</span>
        <select id="pageIndexBox" class="form-control input-sm"></select>
        <span class="input-group-addon">页</span>
        </div>
    </div>
</div>      

_AjaxArticles2.cshtml:

   @model PagedList<article>
   @{ Html.RenderPartial("_ArticleTable"); }
<div class="row">
        <div class="col-xs-8">
        @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", ContainerTagName = "ul", NumericPagerItemCount = 5, CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox2", GoToButtonId = "goToBtn2" }).Options(o => o.AddRouteValue("target", "articles2")).AjaxOptions(a => a.SetUpdateTargetId("articles2"))
    </div>
        <div class="col-xs-4">
        <div class="input-group" style="margin:20px 0">
        <span class="input-group-addon">转到第</span>
        <input type="text" id="pageIndexBox2" class="form-control input-sm" />
        <span class="input-group-addon">页</span>
        <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">跳转</button></span>
        </div>
    </div>
</div>

_AjaxArticles3.cshtml:

   @model PagedList<article>
   @{ Html.RenderPartial("_ArticleTable"); }
<div class="row">
        <div class="col-xs-8">
        @Ajax.Pager(Model, new PagerOptions {FirstPageText="<<",LastPageText = ">>",NextPageText = ">",PrevPageText = "<",PageIndexParameterName = "page", NumericPagerItemCount = 5, ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox3" }).Options(o => o.AddRouteValue("target", "articles3")).AjaxOptions(a => a.SetUpdateTargetId("articles3"))
    </div>
        <div class="col-xs-4">
        <div class="input-group" style="margin:20px 0">
        <span class="input-group-addon">转到第</span>
        <select id="pageIndexBox3" class="form-control input-sm"></select>
        <span class="input-group-addon">页</span>
        </div>
    </div>
</div>

_ArticleTable.cshtml:

@model PagedList<Article>
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PubDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Source)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PubDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Source)
            </td>
        </tr>
    }
</table>

Model:

    public class Article
    {
        [Display(Name="文章编号")]
        public int ID { get; set; }
        [Display(Name="文章标题")]
        [MaxLength(200)]
        public string Title { get; set; }
        [Display(Name = "文章内容")]
        public string Content { get; set; }
        [Display(Name = "发布日期")]
        public DateTime PubDate { get; set; }
        [Display(Name = "作者")]
        [MaxLength(20)]
        public string Author { get; set; }
        [Display(Name = "文章来源")]
        [MaxLength(20)]
        public string Source { get; set; }
    }

ViewModel:

    public class CompositeArticles
    {
        public PagedList<article> ArticleList1 { get; set; }
        public PagedList<article> ArticleList2 { get; set; }
        public PagedList<article> ArticleList3 { get; set; } 
    }

Controller:

           
        public ActionResult AjaxPagers(int id = 1, int pageIndex = 1, int page = 1)
        {
            using (var db = new DataContext())
            {
                const int pageSize = 5;
                if (Request.IsAjaxRequest())
                {
                    var target = Request.QueryString["target"];
                    if (target == "articles")
                    {
                        return PartialView("_AjaxArticles1",
                            db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, pageSize));
                    }
                    if (target == "articles2")
                    {
                        return PartialView("_AjaxArticles2",
                            db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(pageIndex, pageSize));
                    }
                    return PartialView("_AjaxArticles3",
                        db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(page, pageSize));
                }
                var model = new CompositeArticles
                {
                    ArticleList1 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, pageSize),
                    ArticleList2 =
                        db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(pageIndex, pageSize),
                    ArticleList3 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(page, pageSize)
                };
                return View(model);
            }
        }