Fork me on GitHub

MvcPager 分页示例 — 多个AjaxPager

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

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

序号 文章标题 作者 文章来源
36 延安市吴起县 杨涛 吴起热线
37 吴起县大力推进生态文明建设 杨涛 吴起政府网
38 我县文艺表演节目在《我要上春晚》栏目播出通知 杨涛 吴起政府网
39 吴起镇关于开展辖区内45岁以上居民免费体检的通知 Webdiyer 吴起政府网
40 关于在全镇范围内开展麻疹疫苗强化免疫活动的通知 Webdiyer 吴起热线
转到第

序号 文章标题 作者 文章来源
6 吴起:从一个“贫困县”到全国“百强县” Webdiyer 吴起热线
7 延安至吴起高速公路12月中旬通车 Webdiyer 吴起热线
8 吴起县入选2013中国中小城市百强县市 Webdiyer 吴起热线
9 吴起县退耕村民生产生活方式改变 Webdiyer 吴起热线
10 吴起:退耕还林让黄土山峁再披绿装 Webdiyer 吴起政府网
转到第

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

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);
            }
        }