Fork me on GitHub

MvcPager 分页示例 — 多个AjaxPager

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

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

序号 文章标题 作者 文章来源
11 吴起县统筹引领县域经济向纵深发展迈进 Webdiyer 吴起政府网
12 吴起县巩固全国文明县城成果纪实 Webdiyer 吴起政府网
13 吴起县举办200余场陕北说书 Webdiyer 吴起政府网
14 电影《山丹丹花儿开》在陕西省吴起县开拍 Webdiyer 吴起政府网
15 吴起热线—吴起人自己的地方门户网站 Webdiyer 吴起热线
转到第

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

序号 文章标题 作者 文章来源
11 吴起县统筹引领县域经济向纵深发展迈进 Webdiyer 吴起政府网
12 吴起县巩固全国文明县城成果纪实 Webdiyer 吴起政府网
13 吴起县举办200余场陕北说书 Webdiyer 吴起政府网
14 电影《山丹丹花儿开》在陕西省吴起县开拍 Webdiyer 吴起政府网
15 吴起热线—吴起人自己的地方门户网站 Webdiyer 吴起热线
转到第

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