Fork me on GitHub

MvcPager demo - Using page index box(Ajax)

This sample demonstrates how to allow users to input or select page index from the page index box 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

View:

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

_AjaxPageIndexBox.cshtml:

@model PagedList<Order>
@Html.Partial("_DataTable", Model)
<div class="row">
    <div class="col-md-9">
        @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id",NumericPagerItemCount = 6,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("orders"))
    </div>
    <div class="col-md-3">
        <div class="input-group" style="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">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 AjaxPageIndexBox(int id = 1)
        {
            using (var db = new DataContext())
            {
            var model = db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, 5);
            if (Request.IsAjaxRequest())
                return PartialView("_AjaxPageIndexBox", model);
            return View(model);
            }
        }