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 下页 尾页 

序号 文章标题 作者 文章来源
26 吴起被列为全国首批、全省唯一的农村改革试验区 杨涛 吴起热线
27 陕西省延安市吴起县 Webdiyer 吴起热线
28 吴起打造“绿色革命”圣地 杨涛 吴起热线
29 四国篮球争霸赛将在吴起举行 Webdiyer 吴起政府网
30 土地广阔、资源丰富、景区众多的延安吴起县 杨涛 吴起热线
首页 上页 1 2 3 4 5 6 7 8 9 10 ... 下页 尾页 

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