Fork me on GitHub

MvcPager demo - Ajax partial loading

This sample demonstrates the partial loading feature of MvcPager in Ajax paging mode.

Before version 2.0, the MvcPager and data must be inside a separate partial view in order to load them asynchronously in Ajax paging mode. MvcPager 2.0 added a new feature called Ajax partial loading which does not need to use partial view and can load a whole page and update the only part that UpdateTargetId property refers to.

MvcPager's Ajax partial loading feature is very simple to use, it can be easyly switched to standard url paging by chnaging a few settings, but enable this feature will need to load the whole page every time page is changed, if the page contains a large amount of data, use partial view instead of partial loading to load only required data is recommended.

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
First Prev 1 2 3 4 5 6 7 8 9 10 ... Next Last 

View:

        
@model PagedList<Order>
<div id="orders">
@Html.Partial("_DataTable", Model)
    <div style="width:100%;overflow:auto;">
        <div style="float:right">Go to page<select id="pib"></select></div>
        @Ajax.Pager(Model).Options(o => o.SetId("mypager").SetPageIndexParameterName("id").SetPageIndexBoxId("pib").SetPagerItemTemplate("{0}&nbsp;")).AjaxOptions(a => a.SetUpdateTargetId("orders").EnablePartialLoading())
    </div>
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

_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 AjaxPartialLoading(int id = 1)
        {
            using (var db = new DataContext())
            {
                return View(db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, 5));
            }
        }