杨涛主页
Fork me on GitHub

 在线演示

 帮助文档

 源 代 码

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

该示例演示如何为MvcPager添加页索引输入或选择功能。

与2.0版不同，MvcPager 3.0版将页索引输入或选择框及跳转按钮完全与MvcPager分离，即页索引输入或选择框及跳转按钮不再是MvcPager自身的一部分，而由用户单独指定和设置，您可以将页面上任何文本框或下拉框指定为MvcPager的页索引输入或选择框，也可以将任何按钮指定为MvcPager的页索引跳转按钮。 要为MvcPager指定页索引输入或选择框，请将PagerOptions.PageIndexBoxId设置为该文本框或下拉框的客户端id，将PagerOptions.GoToButtonId设置为跳转按钮的客户端id，若未设置PagerOptions.GoToButtonId，则页索引文本或下拉框中的值改变时即自动实现分页跳转，否则需要点击跳转按钮进行跳转。

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

View：

        
@model PagedList<article>
<style type="text/css">
    .pibarea {float: left;margin-left: 2em;}
    .pagerdiv {width: 100%;overflow: auto;}
</style>
@Html.Partial("_ArticleTable", Model)
<h6><strong>页索引文本框（修改后失去焦点自动提交）：</strong></h6>
<div class="pagerdiv">
    @Html.Pager(Model).Options(o => o.SetId("pager1").SetPageIndexParameterName("id").SetPageIndexBoxId("pib1").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
        <div class="pibarea"><input type="text" id="pib1" style="width:28px" /></div>
</div>
<div class="pagerdiv">
        <h6><strong>页索引下拉框（选项改变后自动提交）：</strong></h6>
    @Html.Pager(Model).Options(o => o.SetId("pager2").SetPageIndexParameterName("id").SetPageIndexBoxId("pib2").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
        <div class="pibarea">
        <select id="pib2"></select>
    </div>
</div>
<div class="pagerdiv">
        <h6><strong>页索引文本框（手动提交）：</strong></h6>
    @Html.Pager(Model).Options(o => o.SetId("pager3").SetPageIndexParameterName("id").SetPageIndexBoxId("pib3").SetGoToButtonId("gtb1").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
        <div class="pibarea">
        <input type="text" id="pib3" style="width:28px" /><button id="gtb1">跳转</button>
    </div>
</div>
<div class="pagerdiv">
        <h6><strong>页索引下拉框（手动提交）：</strong></h6>
    @Html.Pager(Model).Options(o => o.SetId("pager4").SetPageIndexParameterName("id").SetPageIndexBoxId("pib4").SetGoToButtonId("gtb2").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
        <div class="pibarea">
        <select id="pib4"></select><button id="gtb2">跳转</button>
    </div>
</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 PageIndexBox(int id = 1)
        {
            using (var db = new DataContext())
            {
                return View(db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5));
            }
        }