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 吴起热线
转到第

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

序号 文章标题 作者 文章来源
1 吴起热线微信公众号上线 Webdiyer 吴起热线
2 再到吴起观“绿海” Webdiyer 吴起热线
3 吴起:从贫困县到全国百强 Webdiyer 吴起热线
4 吴起县铁边城入围全省31个文化旅游名镇 Webdiyer 吴起热线
5 吴起特色养殖成农民致富首选 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);
            }
        }