Partial view rendering in new page while paging using Pagedlist

Question

Continuation of PartialView rendering on new page So after fixing the above issue I added paging.

My controller method that handles partial view and paging is

public ActionResult CreateAdmin(string sortOrder, int? page)
    {
        int pageSize = 10;
        int pageNumber = 1;
        if (page != null)
            pageNumber = Convert.ToInt32(page);

        var result = SortResult(sortOrder);

        return PartialView("AdminSearchResult", result.ToPagedList(pageNumber, pageSize));
    }

In my partial view I am passing

@model PagedList.IPagedList<MyApplication.Models.Administration>

The jquery for dynamically rendering partial view is

<script type="text/javascript">
$(document).ready(function (e) {
    $("#SearchResultbtn").click(function (e) {
        e.preventDefault();
        $("#searchResult").load('@Url.Action("AdminSearchResult", "Administration")');
    });
});    

My view is just a table as shown below

<table class="searchResult" border="1" width="100%">
    <thead>
        <tr>
            <th>
            </th>
            <th>
                @Html.ActionLink("Last Name", "AdminSearchResult", new { sortOrder = ViewBag.LastNameSortParm, currentFilter = ViewBag.CurrentFilter, @class = "linkClicked" })
            </th>
            <th>
                Middle Name
            </th>
            <th>
                @Html.ActionLink("First Name", "AdminSearchResult", new { sortOrder = ViewBag.FirstNameSortParm, currentFilter = ViewBag.CurrentFilter })
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr class="parent">                    
                <td>
                    @item.LastName
                </td>
                <td>
                    @item.MiddleName
                </td>
                <td>
                    @item.FirstName
                </td>
            </tr>
        }
    </tbody>        
</table>

My paging and sorting is working fine. The issue is that when I click the ActionLink of "First Name" or any hearder for sorting the whole partial view is rendered in new page.

My guess is that the jquery needs to be updated but how.

Answer 1

From the behaviour you mentioned, I'm thinking you simply need something like this:

@Ajax.ActionLink("First Name", "AdminSearchResult", new { sortOrder = ViewBag.FirstNameSortParm, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions { UpdateTargetId = "searchResult" }, null)

Basically to do a partial update of the page, not a full page refresh?

To use the ajax methods successfully in MVC, you will need to do the following. Add this key to appsettings in web.config:

  <appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

As well as include the unobtrusive ajax script:

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>