杨涛主页
Fork me on GitHub

 在线演示

 帮助文档

 源 代 码

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

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

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

序号 文章标题 作者 文章来源
11 吴起县统筹引领县域经济向纵深发展迈进 Webdiyer 吴起政府网
12 吴起县巩固全国文明县城成果纪实 Webdiyer 吴起政府网
13 吴起县举办200余场陕北说书 Webdiyer 吴起政府网
14 电影《山丹丹花儿开》在陕西省吴起县开拍 Webdiyer 吴起政府网
15 吴起热线—吴起人自己的地方门户网站 Webdiyer 吴起热线
首页 上页 1 2 3 4 5 6 7 8 9 10 ... 下页 尾页 
序号 文章标题 作者 文章来源
36 延安市吴起县 杨涛 吴起热线
37 吴起县大力推进生态文明建设 杨涛 吴起政府网
38 我县文艺表演节目在《我要上春晚》栏目播出通知 杨涛 吴起政府网
39 吴起镇关于开展辖区内45岁以上居民免费体检的通知 Webdiyer 吴起政府网
40 关于在全镇范围内开展麻疹疫苗强化免疫活动的通知 Webdiyer 吴起热线
首页 上页 ... 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);
            }
        }