MvcPager 分页示例 — 输入或选择页索引(Ajax)

Fork me on GitHub

在线演示

帮助文档

该示例演示MvcPager在Ajax分页模式下使用页索引输入或选择框，本示例中的页索引选择框与MvcPager都在PartialView中，分页后下拉框中的页索引会重新填充并绑定事件。

注意：Ajax分页模式下，一个PartialView中只能有一个MvcPager可以使用页索引输入或选择功能，若超过一个，则其它的页索引输入或选择框将无法正常运行！

示例
源码

序号	文章标题	作者	文章来源
51	2011年吴起县人民政府工作报告	Webdiyer	吴起政府网
52	吴起采油厂原油年产突破200万吨文艺晚会	Webdiyer	吴起热线
53	[新闻调查]吴起：免费教育实验	Webdiyer	吴起热线

View：

@model PagedList<article>
<div id="articles">
    @Html.Partial("_AjaxPageIndexBox", Model)
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

_AjaxPageIndexBox.cshtml:

@model PagedList<article>
@Html.Partial("_ArticleTable", Model)
<div class="row" style="height:80px">
        <div class="col-md-6">
        @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>", PageIndexBoxId = "pageIndexBox", GoToButtonId = "goToBtn" }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
    </div>
        <div class="col-md-6">
        <div class="input-group" style="width:120px;margin:20px 0">
        <select id="pageIndexBox" class="form-control input-sm"></select>
        <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn">跳转</button></span>
        </div>
    </div>
</div>

_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 AjaxPageIndexBox(int id = 1)
        {
            using (var db = new DataContext())
            {
            var model = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);
            if (Request.IsAjaxRequest())
                return PartialView("_AjaxPageIndexBox", model);
            return View(model);
            }
        }