Using paging in partial view, asp.net mvc

Question

I'd greatly appreciate if someone could advise on following: In my view I display the list of items:

@model PagedList.IPagedList<Items>
@using PagedList.Mvc; 
 @foreach (var item in Model)
          {//displaying data}

my pager looks like this:

@Html.PagedListPager(Model, page => Url.Action("Index", new { humanID = ViewBag.HumanID, page = page }),
                                                             new PagedListRenderOptions
                                                             {
                                                                        LinkToFirstPageFormat = "<<",
                                                                        LinkToPreviousPageFormat = "prev",
                                                                        LinkToNextPageFormat = "next",
                                                                        LinkToLastPageFormat = ">>",

                                                              })

The problem is that when I click on the next page it is returned blank, without my _Layout. I wouldn't like to reload _Layout all the time. Is there a way to use Ajax.ActionLink for pager? So that I could UpdateTargedId inside my partial view?

Answer 1

You cannot use Ajax.ActionLink but you could AJAXify the links. Put the pager in a <div>:

<div id="myPager">
    @Html.PagedListPager(
        Model, 
        page => Url.Action(
            "Index", 
            new { 
                humanID = ViewBag.HumanID, 
                page = page 
            }
        ),
        new PagedListRenderOptions
        {
            LinkToFirstPageFormat = "<<",
            LinkToPreviousPageFormat = "prev",
            LinkToNextPageFormat = "next",
            LinkToLastPageFormat = ">>",
        }
    )
</div>

and then AJAXify the links:

$(function() {
    $('#myPager').on('click', 'a', function() {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#some_grid_container').html(result);
            }
        });
        return false;
    });
});

Notice that in the success callback I've used $('#some_grid_container') which should be some wrapping div around your entire table.

Answer 2

There is still a way to implement Ajax with PagedList.

@Html.PagedListPager((IPagedList)Model,
 page => Url.Action("Index", new { humanID= ViewBag.HumanID, page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.PageNumbersOnly,
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "Get",
            UpdateTargetId = "targetContainer"
        }))

This piece will make ajax request and replace the content with in "targetContainer". It gives you many more options in regards to Ajax call and the way you wish this to be displayed.

Answer 3

My project setup: MVC4, MvcPaging (PagedList), with Areas. This answer is geared towards that setup.

Short Answer:
While configuring your AjaxOptions for the pager, ensure you set your area (properly)

new AjaxOptions { UpdateTargetId = "grid-list" , OnBegin = "beginPaging", 
                  OnSuccess = "successPaging", OnFailure = "failurePaging"}
        , new { area = "Admin", controller = "MyController", action = "Index"}

Long Answer:
The PagedList sample shows how to pass to an area and do paging within an area, but they do not show a sample of how to use paging with a Partial View.

The sample project has the following code (taken from _AjaxEmployeeList.cshtml):

}, new AjaxOptions
            {
                UpdateTargetId = "grid-list",
                OnBegin = "beginPaging",
                OnSuccess = "successPaging",
                OnFailure = "failurePaging"
            }, 
    new { controller = "Home", action = "Index", 
        employee_name = ViewData["employee_name"] }))

The PagedList sample uses an inline table inside a foreach, so you do not have any problems/conflicts with this setup.

@using MvcPaging
@model IPagedList<MvcPagingDemo.Models.Employee>
<table class="table table-bordered table-hover">
        @foreach (var item in Model)
        { 
            <tr>
               <td>@item.ID</td>
            </tr>
        }    
</table>

While refactoring this table into a partial view (to encapsulate logic (and to deal with paging), I started to get a "The partial view '_MyPartialView' was not found or no view engine supports the searched locations"

@using MvcPaging
@using MyProject.Models
@model IPagedList<MyProject.Models.MyModel>
  foreach (var item in Model)
        {
        <div data-task-id="@item.MyModel_ID.ToString()">
            @Html.Partial("_Detail", item)
        </div>
        }

I went through a ration of changes attempting to force the area into the Html.Partial() call, including:
Modifying how routing is handled, which didn't work.
How to set a Default Route (To an Area) in MVC
Fully qualifying the path to the partial view, which did work but was ugly.
mvc3 - using partial views in a different area
The research into getting the partial views to load showed me how the MVC engine processes requests. This sent me back to modifying the Ajax Pager, to send the area with each request. I tried to use a similar syntax as the Html.ActionLink. (This didn't/doesn't work)

@Html.ActionLink("Admin", "Index", "Admin", new { area = "Admin" }, null)

That didn't work,so failing all else, I mirrored the pattern for setting the controller, which leads us to:

new AjaxOptions { UpdateTargetId = "grid-list" ,  OnBegin = "beginPaging", 
                  OnSuccess = "successPaging", OnFailure = "failurePaging"}
           , new { area = "Admin", controller = "MyController", action = "Index"}

My personal lesson from this: C# != Razor != Javascript. Each does things slightly differently and you have to be sure you know which language the line your writing is for.