同一页面上使用多个MvcPager为不同数据实现Ajax分页时,必须确保每个MvcPager的PagerOptions.PageIndexParameterName值不同,同时给每个MvcPager的路由中添加了一个用于区分不同请求的url参数,在后台通过Request.QueryString["参数名"]获取该参数值后返回对应的包含分页数据的PartialView。
- Url路由分页
- Ajax分页
- Ajax搜索分页
- 外观样式
- 分页数据相关
- Javascrip API
- AjaxPager 类
- AjaxHelper.Pager 扩展方法
- HtmlPager 类
- HtmlHelper.Pager 扩展方法
- IPagedList 接口
- IPagedList<T> 接口
- MvcAjaxOptions 类
- MvcAjaxOptionsBuilder 类
- PagedList<T> 类
- PageLinqExtensions 类
-
PagerOptions 类
- ActionName属性
- AlwaysShowFirstLastPageNumber属性
- AutoHide属性
- ContainerTagName属性
- ControllerName属性
- CssClass属性
- CurrentPageNumberFormatString属性
- CurrentPagerItemTemplate属性
- DisabledPagerItemTemplate属性
- FirstPageRouteName属性
- FirstPageText属性
- GoToButtonId属性
- HidePagerItems属性
- HorizontalAlign属性
- HtmlAttributes属性
- Id属性
- InvalidPageIndexErrorMessage属性
- LastPageText属性
- MaximumPageIndexItems属性
- MaximumPageNumber属性
- MorePagerItemTemplate属性
- MorePageText属性
- NavigationPagerItemsPosition属性
- NavigationPagerItemTemplate属性
- NextPageText属性
- NumericPagerItemCount属性
- NumericPagerItemTemplate属性
- OnPageIndexError属性
- PageIndexBoxId属性
- PageIndexOutOfRangeErrorMessage属性
- PageIndexParameterName属性
- PageNumberFormatString属性
- PagerItemTemplate属性
- PrevPageText属性
- RouteName属性
- RouteValues属性
- ShowDisabledPagerItems属性
- ShowFirstLast属性
- ShowMorePagerItems属性
- ShowNumericPagerItems属性
- ShowPrevNext属性
- PagerItemsPosition 枚举
- PagerOptionsBuilder 类
- ScriptResourceExtensions 类
- Javascript API
- AjaxPager.cs
- AjaxPagerTest.cs
- DataLoaderBuilder.cs
- DisplayNameExtensions.cs
- HtmlPager.cs
- HtmlPagerTest.cs
- IPagedList.cs
- MvcAjaxOptions.cs
- MvcAjaxOptionsBuilder.cs
- MvcPager.js
- PagedList.cs
- PagedListTest.cs
- PageLinqExtensions.cs
- PagerBuilder.cs
- PagerExtensions.cs
- PagerItem.cs
- PagerItemsPosition.cs
- PagerOptions.cs
- PagerOptionsBuilder.cs
- ScriptResourceExtensions.cs
- TestHelper.cs
MvcPager 分页示例 — 多个AjaxPager
本示例演示同一个页面上使用多个MvcPager为不同的数据实现Ajax分页(使用Partial View)
序号 | 文章标题 | 作者 | 文章来源 |
---|---|---|---|
16 | 延安市吴起县境内古城投资三亿欲变陕北名镇 | 杨涛 | 吴起政府网 |
17 | 延安市居住证首发仪式在吴起举行 | Webdiyer | 吴起热线 |
18 | 黄土高原上的绿色丰碑——吴起县生态环境建设巡礼 | 杨涛 | 吴起热线 |
19 | 吴起的追梦之旅——吴起县争创“全国百强县”纪实 | 杨涛 | 吴起热线 |
20 | 延安铁边城入选第七批全国重点文保单位 | 杨涛 | 吴起热线 |
序号 | 文章标题 | 作者 | 文章来源 |
---|---|---|---|
31 | 吴起再次荣获中国中小城市双“百强县”称号 | 杨涛 | 吴起热线 |
32 | 吴起率先在全市建成省级生态县 | Webdiyer | 吴起政府网 |
33 | 吴起农民的现代化信息生活 | 杨涛 | 吴起热线 |
34 | 延安吴起实施新一轮退耕还林 | Webdiyer | 吴起热线 |
35 | 陕西吴起:中国“退耕还林第一县” | Webdiyer | 吴起热线 |
View:
@model CompositeArticles <div id="articles"> @Html.Partial("_AjaxArticles1",Model.ArticleList1) </div> <hr /> <div id="articles2"> @Html.Partial("_AjaxArticles2", Model.ArticleList2) </div> <hr /> <div id="articles3"> @Html.Partial("_AjaxArticles3", Model.ArticleList3) </div>@section scripts{@{Html.RegisterMvcPagerScriptResource();}}
_AjaxArticles1.cshtml:
@model PagedList<article> @{ Html.RenderPartial("_ArticleTable"); } <div class="row"> <div class="col-xs-8"> @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", PageIndexParameterName = "id", NumericPagerItemCount = 5, 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" }).Options(o => o.AddRouteValue("target", "articles")).AjaxOptions(a => a.SetUpdateTargetId("articles")) </div> <div class="col-xs-4"> <div class="input-group" style="margin:20px 0"> <span class="input-group-addon">转到第</span> <select id="pageIndexBox" class="form-control input-sm"></select> <span class="input-group-addon">页</span> </div> </div> </div>
_AjaxArticles2.cshtml:
@model PagedList<article> @{ Html.RenderPartial("_ArticleTable"); } <div class="row"> <div class="col-xs-8"> @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", ContainerTagName = "ul", NumericPagerItemCount = 5, CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox2", GoToButtonId = "goToBtn2" }).Options(o => o.AddRouteValue("target", "articles2")).AjaxOptions(a => a.SetUpdateTargetId("articles2")) </div> <div class="col-xs-4"> <div class="input-group" style="margin:20px 0"> <span class="input-group-addon">转到第</span> <input type="text" id="pageIndexBox2" class="form-control input-sm" /> <span class="input-group-addon">页</span> <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">跳转</button></span> </div> </div> </div>
_AjaxArticles3.cshtml:
@model PagedList<article> @{ Html.RenderPartial("_ArticleTable"); } <div class="row"> <div class="col-xs-8"> @Ajax.Pager(Model, new PagerOptions {FirstPageText="<<",LastPageText = ">>",NextPageText = ">",PrevPageText = "<",PageIndexParameterName = "page", NumericPagerItemCount = 5, 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 = "pageIndexBox3" }).Options(o => o.AddRouteValue("target", "articles3")).AjaxOptions(a => a.SetUpdateTargetId("articles3")) </div> <div class="col-xs-4"> <div class="input-group" style="margin:20px 0"> <span class="input-group-addon">转到第</span> <select id="pageIndexBox3" class="form-control input-sm"></select> <span class="input-group-addon">页</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; } }
ViewModel:
public class CompositeArticles { public PagedList<article> ArticleList1 { get; set; } public PagedList<article> ArticleList2 { get; set; } public PagedList<article> ArticleList3 { get; set; } }
Controller:
public ActionResult AjaxPagers(int id = 1, int pageIndex = 1, int page = 1) { using (var db = new DataContext()) { const int pageSize = 5; if (Request.IsAjaxRequest()) { var target = Request.QueryString["target"]; if (target == "articles") { return PartialView("_AjaxArticles1", db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, pageSize)); } if (target == "articles2") { return PartialView("_AjaxArticles2", db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(pageIndex, pageSize)); } return PartialView("_AjaxArticles3", db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(page, pageSize)); } var model = new CompositeArticles { ArticleList1 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, pageSize), ArticleList2 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(pageIndex, pageSize), ArticleList3 = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(page, pageSize) }; return View(model); } }