杨涛主页
Fork me on GitHub

 在线演示

 帮助文档

 源 代 码

MvcPager 分页示例 — 多个AjaxPager(局部加载)

本示例演示同一个页面上使用多个MvcPager为不同的数据实现Ajax分页（使用局部加载（Partial Loading）功能）。

使用局部加载（Partial Loading）功能的Ajax分页模式开发简单但效率较低，页面内容较多时不建议使用。

序号 文章标题 作者 文章来源
36 延安市吴起县 杨涛 吴起热线
37 吴起县大力推进生态文明建设 杨涛 吴起政府网
38 我县文艺表演节目在《我要上春晚》栏目播出通知 杨涛 吴起政府网
39 吴起镇关于开展辖区内45岁以上居民免费体检的通知 Webdiyer 吴起政府网
40 关于在全镇范围内开展麻疹疫苗强化免疫活动的通知 Webdiyer 吴起热线
首页 上页 ... 2 3 4 5 6 7 8 9 10 11 下页 尾页 
序号 文章标题 作者 文章来源
41 吴起婚嫁习俗 Webdiyer 吴起热线
42 陕西省吴起县地税局税费收入突破17亿元大关 杨涛 吴起政府网
43 2012年吴起县人民政府工作报告 Webdiyer 吴起政府网
44 吴起:昔日红军长征落脚地 如今退耕还林第一县 杨涛 吴起热线
45 吴起县2013年春节文化系列活动安排 杨涛 吴起政府网
首页 上页 ... 2 3 4 5 6 7 8 9 10 11 下页 尾页 

View：

@model CompositeArticles
<div id="articles1">
    @{Html.RenderPartial("_ArticleTable", Model.ArticleList1);}
    @Ajax.Pager(Model.ArticleList1).Options(o=>o.SetPagerItemTemplate("{0}&nbsp;")).AjaxOptions(a => a.SetUpdateTargetId("articles1").EnablePartialLoading())
</div>
<hr />
<div id="articles2">
@{Html.RenderPartial("_ArticleTable",Model.ArticleList2);}
@Ajax.Pager(Model.ArticleList2, new PagerOptions { PageIndexParameterName = "id" ,PagerItemTemplate = "{0}&nbsp;"}, new MvcAjaxOptions { UpdateTargetId = "articles2", EnablePartialLoading = true })
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

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

Controller:

        
        public ActionResult MultipleAjaxPagers(int id = 1,int pageIndex=1)
        {
            using (var db = new DataContext())
            {
                var pageSize = 5;
                var model = new CompositeArticles();
                model.ArticleList1 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(pageIndex, pageSize);
                model.ArticleList2 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, pageSize);
                return View(model);
            }
        }