Fork me on GitHub

MvcPager demo - Multiple AjaxPagers

This sample demonstrates how to use multiple MvcPagers to page for different data in Ajax paging mode.

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.

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
Go to page

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
Go to page

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
Go to page

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);
            }
        }