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