For multiple MvcPagers to work correctly on a single page, you need to make sure that property value of PagerOptions.PageIndexParameterName for each MvcPager is unique, at the same time, in order to know which MvcPager triggered the current http request at the server side, a unique parameter is added to the route value collection for each MvcPager, we get this parameter value from the server side by using Request.QueryString["{parameterName}"] and then return corresponding data to the client.
- Url route paging
- Ajax paging
- Ajax search paging
- Appearance
- Paging data
- Javascrip API
- AjaxPager class
- AjaxHelper.Pager method
- HtmlPager class
- HtmlHelper.Pager method
- IPagedList interface
- IPagedList<T> interface
- MvcAjaxOptions class
- MvcAjaxOptionsBuilder class
- PagedList<T> class
- PageLinqExtensions class
- PagerItemsPosition enum
-
PagerOptions class
- ActionName property
- AlwaysShowFirstLastPageNumber property
- AutoHide property
- ContainerTagName property
- ControllerName property
- CssClass property
- CurrentPageNumberFormatString property
- CurrentPagerItemTemplate property
- DisabledPagerItemTemplate property
- FirstPageRouteName property
- FirstPageText property
- GoToButtonId property
- HidePagerItems property
- HorizontalAlign property
- HtmlAttributes property
- Id property
- InvalidPageIndexErrorMessage property
- LastPageText property
- MaximumPageIndexItems property
- MaximumPageNumber property
- MorePagerItemTemplate property
- MorePageText property
- NavigationPagerItemsPosition property
- NavigationPagerItemTemplate property
- NextPageText property
- NumericPagerItemCount property
- NumericPagerItemTemplate property
- OnPageIndexError property
- PageIndexBoxId property
- PageIndexOutOfRangeErrorMessage property
- PageIndexParameterName property
- PageNumberFormatString property
- PagerItemsSeparator property
- PagerItemTemplate property
- PrevPageText property
- RouteName property
- RouteValues property
- ShowDisabledPagerItems property
- ShowFirstLast property
- ShowMorePagerItems property
- ShowNumericPagerItems property
- ShowPrevNext property
- PagerOptionsBuilder class
- ScriptResourceExtensions class
- 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 demo - Multiple AjaxPagers
This sample demonstrates how to use multiple MvcPagers to page for different data in Ajax paging mode.
Order ID | Customer ID | Company Name | Employee Name |
---|---|---|---|
10760 | MAISD | Maison Dewey | Margaret Peacock |
10761 | RATTC | Rattlesnake Canyon Grocery | Steven Buchanan |
10762 | FOLKO | Folk och fä HB | Janet Leverling |
10763 | FOLIG | Folies gourmandes | Janet Leverling |
10764 | ERNSH | Ernst Handel | Michael Suyama |
Order ID | Customer ID | Company Name | Employee Name |
---|---|---|---|
10760 | MAISD | Maison Dewey | Margaret Peacock |
10761 | RATTC | Rattlesnake Canyon Grocery | Steven Buchanan |
10762 | FOLKO | Folk och fä HB | Janet Leverling |
10763 | FOLIG | Folies gourmandes | Janet Leverling |
10764 | ERNSH | Ernst Handel | Michael Suyama |
View:
@model Tuple<PagedList<Order>,PagedList<Order>,PagedList<Order>> <div id="orders"> @Html.Partial("_AjaxData1", Model.Item1) </div> <hr /> <div id="orders2"> @Html.Partial("_AjaxData2", Model.Item2) </div> <hr /> <div id="orders3"> @Html.Partial("_AjaxData3", Model.Item3) </div> @section scripts{@{Html.RegisterMvcPagerScriptResource();}}
_AjaxData1.cshtml:
@model PagedList<Order> @{ Html.RenderPartial("_DataTable"); } <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", "orders")).AjaxOptions(a => a.SetUpdateTargetId("orders")) </div> <div class="col-xs-4"> <div class="input-group" style="margin:20px 0"> <span class="input-group-addon">Go to page</span> <select id="pageIndexBox" class="form-control input-sm"></select> </div> </div> </div>
_AjaxData2.cshtml:
@model PagedList<Order> @{ Html.RenderPartial("_DataTable"); } <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", "orders2")).AjaxOptions(a => a.SetUpdateTargetId("orders2")) </div> <div class="col-xs-4"> <div class="input-group" style="margin:20px 0"> <span class="input-group-addon">Go to page</span> <input type="text" id="pageIndexBox2" class="form-control input-sm"/> <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">Go</button></span> </div> </div> </div>
_AjaxData3.cshtml:
@model PagedList<Order> @{ Html.RenderPartial("_DataTable"); } <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", GoToButtonId = "goToBtn3" }).Options(o => o.AddRouteValue("target", "orders3")).AjaxOptions(a => a.SetUpdateTargetId("orders3")) </div> <div class="col-xs-4"> <div class="input-group" style="margin:20px 0"> <span class="input-group-addon">Go to page</span> <select id="pageIndexBox3" class="form-control input-sm"></select> <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn3">Go</button></span> </div> </div> </div>
_DataTable.cshtml:
@model PagedList<order> <table class="table table-striped table-bordered"> <tr> <th class="nowrap"> @Html.DisplayNameFor(model => model.OrderId) </th> <th class="nowrap"> @Html.DisplayNameFor(model => model.CustomerId) </th> <th class="nowrap"> @Html.DisplayNameFor(model => model.CompanyName) </th> <th class="nowrap"> @Html.DisplayNameFor(model => model.EmployeeName) </th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.OrderId) </td> <td> @Html.DisplayFor(modelItem => item.CustomerId) </td> <td> @Html.DisplayFor(modelItem => item.CompanyName) </td> <td> @Html.DisplayFor(modelItem => item.EmployeeName) </td> </tr> } </table>
Model:
public class Order { [Display(Name = "Order ID")] public int OrderId { get; set; } [Display(Name = "Customer ID"),StringLength(20)] public string CustomerId { get; set; } [Display(Name = "Order Date")] public DateTime OrderDate { get; set; } [Display(Name = "Company Name"), StringLength(20)] public string CompanyName { get; set; } [Display(Name = "Employee Name"), StringLength(20)] public string EmployeeName { 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 == "orders") { return PartialView("_AjaxData1", db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, pageSize)); } if (target == "orders2") { return PartialView("_AjaxData2", db.Orders.OrderBy(o=>o.OrderId).ToPagedList(pageIndex, pageSize)); } return PartialView("_AjaxData3", db.Orders.OrderBy(o=>o.OrderId).ToPagedList(page, pageSize)); } var model = new Tuple<PagedList<Order>,PagedList<Order>,PagedList<Order>>( db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, pageSize),db.Orders.OrderBy(o=>o.OrderId).ToPagedList(pageIndex, pageSize),db.Orders.OrderBy(o=>o.OrderId).ToPagedList(page, pageSize)); return View(model); } }