Fork me on GitHub

MvcPager demo - Ajax events

This sample demonstrates how to handle Ajax events of the MvcPager 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
First Prev 1 2 3 4 5 6 7 8 9 10 ... Next Last 

View:

@model PagedList<Order>
<div id="orders">
    @Html.Partial("_AjaxEvents",Model)
</div>
@section scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
    <script type="text/javascript">
        function handleFailure(xhr, status, error) {
            alert('onfailure event fired, error info:' + xhr.responseText + ', error code: ' + xhr.status + ', status code: ' + status + ', error type: ' + error);
        }
        function handleSuccess(data, xhr, status) {
            alert('onsuccess event fired, data returned: ' + data + '\r\n http response code: ' + xhr.status + ', status code: ' + status);
        }
    </script>
}

_AjaxEvents.cshtml:

@model PagedList<Order>
@Html.Partial("_DataTable", Model)
@Ajax.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemTemplate =  "{0}&nbsp;"},new MvcAjaxOptions{UpdateTargetId = "orders",OnBegin = "alert('onbegin event fired')",OnSuccess = "handleSuccess",OnComplete = "function(xhr,status){alert('oncomplete event fired, Http response code is: '+xhr.status+', response content: '+xhr.statusText+', status code is: '+status)}",OnFailure = "handleFailure"})
    

_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 AjaxEvents(int id = 1)
        {
            using (var db = new DataContext())
            {
                if (id == 2)
                {
                    Response.StatusCode = 500;
                    return Content("Test error text sent from server");
                }
                var model = db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                    return PartialView("_AjaxEvents", model);
                return View(model);
            }
        }