MvcPager 分页示例 — 混合分页模式

Fork me on GitHub

在线演示

帮助文档

本示例演示同时使用Html Pager和Ajax Pager对同一数据进行分页。

MvcPager 2.0版中新增的Ajax局部加载功能使得在标准Url分页模式与Ajax分页模式之间切换更简单容易，并可实现两种分页模式共存。本示例中第一个MvcPager为标准Url分页模式，第二个MvcPager使用Ajax分页模式，两种分页模式都可以实现为指定的内容进行分页且保持两个MvcPager同步。

示例
源码

序号	文章标题	作者	文章来源
21	吴起：现代农业蓬勃发展	Webdiyer	吴起热线
22	吴起打造“绿色革命”圣地	Webdiyer	吴起热线
23	吴华路二级公路施工期间实行交通管制的通告	Webdiyer	吴起热线
24	吴起县：加快发展旅游业打造经济发展新引擎	杨涛	吴起政府网
25	吴起将举办四国男篮赛国奥男篮“牵手”残疾儿童	Webdiyer	吴起热线

标准Url分页：

Ajax局部加载分页：

View：

@model PagedList<article>
<div id="articles">
 @Html.Partial("_ArticleTable", Model)
<h5>标准Url分页：</h5>
@Html.Pager(Model,new PagerOptions { PageIndexParameterName = "id", 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>"})
        <h5>Ajax局部加载分页：</h5>
@Ajax.Pager(Model,new PagerOptions{PageIndexParameterName = "id",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>"},new MvcAjaxOptions{EnablePartialLoading = true,UpdateTargetId="articles"})
</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 ViewResult CombinedMode(int id = 1)
        {
            using (var db = new DataContext())
            {
                return View(db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5));
            }
        }