c#asp.net-mvc asp.net-mvc-4 pagination asp.net-ajax

MVC Paging not working in AJAX Form

I am trying to implement ASP.NET MVC Paging using MVC4.Paging nuget package.

Problem: It is working in online demo and also in the download source code. However I am not able to find why it is not working in my particular project by AJAX. In my project it is working by full post back method but not Ajax.

I have even tried to copy over the Index action method and Index and _AjaxEmployeeList Views (.cshtml) files (except .js).

Note: In my solution its not bootstrap as shown in samples. Also my controller name is AdminController whereas in Samples its HomeController

In my solution I need it to work in AJAX method as in samples.

Kindly help regarding:
1. How to find the root cause for why it is not working?
2. How to make this working?

.
My Solution Code (which I tried to reproduce in my solution from the sample):

Index.cshtml

@using MvcPaging
@model IPagedList<MvcPagingDemo.Models.Employee>
@{
    ViewBag.Title = "MVC 4 Paging With Ajax Bootstrap";
}
<div class="row-fluid">
    <div class="span6">
        <h2>
            Ajax Paging With Bootstrap In MVC 4
        </h2>
    </div>
    <div class="span6">
        <div class="alert alert-info">
            The pager also supports area's. @Html.ActionLink("Ajax paging in an area", "Index", "Admin", new { Area = "AreaOne" }, new { @class = "btn btn-success" })</div>
    </div>
</div>
<div class="clearfix">
</div>
@using (Ajax.BeginForm("Index", "Admin",
                            new AjaxOptions { UpdateTargetId = "grid-list", HttpMethod = "get", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging" },
                            new { id = "frm-search" }))
{
    <div class="input-append">
        <input class="span2" id="appendedInputButton" type="text" name="employee_name" placeholder="Name" />
        <button class="btn" type="submit">
            <i class="icon-search"></i>&nbsp;Search</button>
    </div>
    <div id="grid-list">
        @{ Html.RenderPartial("_AjaxEmployeeList", Model); }
    </div>
}
<script type="text/javascript">

    function beginPaging(args) {
        // Animate
        $('#grid-list').fadeOut('normal');
    }

    function successPaging() {
        // Animate
        $('#grid-list').fadeIn('normal');
        $('a').tooltip();
    }

    function failurePaging() {
        alert("Could not retrieve list.");
    }

</script>

_AjaxEmployeeList.cshtml

@using MvcPaging
@model IPagedList<MvcPagingDemo.Models.Employee>
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>
                ID
            </th>
            <th>
                Name
            </th>
            <th>
                Email
            </th>
            <th>
                Phone
            </th>
            <th>
                City
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        { 
            <tr>
                <td>
                    @item.ID
                </td>
                <td>
                    @item.Name
                </td>
                <td>
                    @item.Email
                </td>
                <td>
                    @item.Phone
                </td>
                <td>
                    @item.City
                </td>
            </tr>
        }
    </tbody>
</table>
<div class="pager1">
    @Html.Raw(Ajax.Pager(
            new Options
            {
                PageSize = Model.PageSize,
                TotalItemCount = Model.TotalItemCount,
                CurrentPage = Model.PageNumber,
                ItemTexts = new ItemTexts() { Next = "Next", Previous = "Previous", Page = "P" },
                ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" },
                TooltipTitles = new TooltipTitles() { Next = "Next page", Previous = "Previous page", Page = "Page {0}." },
                Size = Size.normal,
                Alignment = Alignment.centered,
                IsShowControls = true,
                IsShowFirstLast = true,
                CssClass = ""
            },
            new AjaxOptions
            {
                UpdateTargetId = "grid-list",
                OnBegin = "beginPaging",
                OnSuccess = "successPaging",
                OnFailure = "failurePaging"
            }, new { controller = "Admin", action = "Index", employee_name = ViewData["employee_name"] }))
    <div class="well">
        Showing <span class="badge badge-success">@Model.ItemStart</span> to <span class="badge badge-success">@Model.ItemEnd</span>
        of <span class="badge badge-info">@Model.TotalItemCount</span> entries</div>
</div>

AdminController.cs

public class AdminController : Controller
{
    private const int defaultPageSize = 3;
    private IList<Employee> allEmployee = new List<Employee>();
    private string[] name = new string[4] { "Will", "Johnny", "Zia", "Bhaumik" };
    private string[] phone = new string[4] { "1-274-748-2630", "1-762-805-1019", "1-920-437-3485", "1-562-653-8258" };
    private string[] email = new string[4] { "[email protected]", "[email protected]", "[email protected]", "[email protected]" };
    private string[] city = new string[4] { "Wigtown", "Malderen", "Las Vegas", "Talence" };


    public AdminController()
    {
        InitializeEmployee();
    }

    private void InitializeEmployee()
    {
        // Create a list of 200 employee.
        int index = 0;

        for (int i = 0; i < 200; i++)
        {
            var employee = new Employee();
            //int categoryIndex = i % new Random().Next(1, 5);
            //if (categoryIndex > 3)
            //    categoryIndex = 3;
            index = index > 3 ? 0 : index;
            employee.ID = i + 1;
            employee.Name = name[index];
            employee.Phone = phone[index];
            employee.Email = email[index];
            employee.City = city[index];
            allEmployee.Add(employee);
            index++;
        }
    }

    public ActionResult Index(string employee_name, int? page)
    {
        ViewData["employee_name"] = employee_name;
        int currentPageIndex = page.HasValue ? page.Value : 1;
        IList<Employee> employees = this.allEmployee;

        if (string.IsNullOrWhiteSpace(employee_name))
        {
            employees = employees.ToPagedList(currentPageIndex, defaultPageSize);
        }
        else
        {
            employees = employees.Where(p => p.Name.ToLower() == employee_name.ToLower()).ToPagedList(currentPageIndex, defaultPageSize);
        }



        //var list = 
        if (Request.IsAjaxRequest())
            return PartialView("_AjaxEmployeeList", employees);
        else
            return View(employees);
    }

    public ActionResult Paging(string employee_name, int? page)
    {
        ViewData["employee_name"] = employee_name;
        int currentPageIndex = page.HasValue ? page.Value : 1;
        IList<Employee> employees = this.allEmployee;

        if (string.IsNullOrWhiteSpace(employee_name))
        {
            employees = employees.ToPagedList(currentPageIndex, defaultPageSize);
        }
        else
        {
            employees = employees.Where(p => p.Name.ToLower() == employee_name.ToLower()).ToPagedList(currentPageIndex, defaultPageSize);
        }

        return View(employees);
    }
}

JS references in the _Layout.cshtml

enter image description here

Solution

Finally I found the solution.

Since I was using jquery-1.11.1.js, in script file jquery.unobtrusive-ajax.js I had to replace calls to .live() with .on().

But simple find and replace was not right way which I found later. I found from other sources that I have to change completely those lines of code as the .on() works.

I replaced the code as below:

Non-working code with .live() function:

$("a[data-ajax=true]").live("click", function (evt) {
    debugger;
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

$("form[data-ajax=true] input[type=image]").live("click", function (evt) {
    debugger;
    var name = evt.target.name,
        $target = $(evt.target),
        form = $target.parents("form")[0],
        offset = $target.offset();

    $(form).data(data_click, [
        { name: name + ".x", value: Math.round(evt.pageX - offset.left) },
        { name: name + ".y", value: Math.round(evt.pageY - offset.top) }
    ]);

    setTimeout(function () {
        $(form).removeData(data_click);
    }, 0);
});

$("form[data-ajax=true] :submit").live("click", function (evt) {
    debugger;
    var name = evt.target.name,
        form = $(evt.target).parents("form")[0];

    $(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);

    setTimeout(function () {
        $(form).removeData(data_click);
    }, 0);
});

$("form[data-ajax=true]").live("submit", function (evt) {
    debugger;
    var clickInfo = $(this).data(data_click) || [];
    evt.preventDefault();
    if (!validate(this)) {
        return;
    }
    asyncRequest(this, {
        url: this.action,
        type: this.method || "GET",
        data: clickInfo.concat($(this).serializeArray())
    });
});

Working code with .on() function:

$(document).on("click", "a[data-ajax=true]", function (evt) {
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

$(document).on("click", "form[data-ajax=true] input[type=image]", function (evt) {
    var name = evt.target.name,
        $target = $(evt.target),
        form = $target.parents("form")[0],
        offset = $target.offset();

    $(form).data(data_click, [
        { name: name + ".x", value: Math.round(evt.pageX - offset.left) },
        { name: name + ".y", value: Math.round(evt.pageY - offset.top) }
    ]);

    setTimeout(function () {
        $(form).removeData(data_click);
    }, 0);
});

$(document).on("click", "form[data-ajax=true] :submit", function (evt) {
    var name = evt.target.name,
        form = $(evt.target).parents("form")[0];

    $(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);

    setTimeout(function () {
        $(form).removeData(data_click);
    }, 0);
});

$(document).on("submit", "form[data-ajax=true]", function (evt) {
    var clickInfo = $(this).data(data_click) || [];
    evt.preventDefault();
    if (!validate(this)) {
        return;
    }
    asyncRequest(this, {
        url: this.action,
        type: this.method || "GET",
        data: clickInfo.concat($(this).serializeArray())
    });
});

Thanks.