MVC 4 Using Paged List in a partial View

Question

I am trying to implement PagedList in a partial view.

Describing the view setup. I have Controller A with ViewA. This is the parent view and has its own model. Then I have Controller B with PartialViewB and has its own model as well. Then I have a Div in ViewA that will be used to display the PartialViewB. I can load in PartialViewB after hitting a button and then hide the view after hitting the button again. Within the PartialViewB is the PagedList. Hitting the next page button loads the next page, but loads it in its own page, not in the ViewA as it was before.

I can load up more code as needed, but for now here is the Pager

<br />
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("ViewComments",
    new { courseID = @ViewBag.courseID, page }), 
    new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5, DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded, 
        DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded })

::EDIT::

Parent View

<div class="Comments">
    <input type="button" id="View" class="CommentsButton" value="View Comments"/>
    <input type="hidden" id="Hidden" value="false" />
</div>
<div id="Comments">
</div>

PartialView

@model PagedList.IPagedList<QIEducationWebApp.Models.CourseComment>
@using PagedList.Mvc;

@{
    ViewBag.Title = "Comments";
}

<h2>Comments!</h2>

<table>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CommentDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.UserName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CommentText)
        </td>
    </tr>
}

</table>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

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

<br />
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("ViewComments",
    new { courseID = @ViewBag.courseID, page }),
            PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
                new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5, DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded, 
                DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded },
                new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "Comments" }))

BundleConfig.cs

public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/PagedList.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }

Solution

Check this out: Related SO question

This will use unobtrusive ajax to do the replace for you. You just need to handle the fetch and skip on your end and send back the new partial view along with the model.

@Html.PagedListPager(Model, page => Url.Action("ViewComments", page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new AjaxOptions(){  HttpMethod = "GET", UpdateTargetId = "partialContainerYouNeedToReplace"}))

Make sure that you have unobtrusive js referenced on your page when doing this. It comes with MVC out of the box and you should just need to reference the bundle.

Hope this helps.

Comments

[JDupont]

How much data will generally be sent to this partial view? Will you actually need server side paging?

[C-Pfef]

So its going to be a list of comments that are stored in a database. Course they are attached to, the user, date, and comment. So not sure which be best.

[JDupont]

I don't see a reference to jquery.unobtrusive-ajax.js. Go to App_Start > BundleConfig.cs and see if there is a bundle containing this reference. Also make sure that the unobtrusive-ajax file is even in your solution at all.

[C-Pfef]

The jquery.unobtrusive-ajax.js is in the scripts directory, but it is not in the BundleConfig.cs.

[C-Pfef]

I lied, maybe it is.

[C-Pfef]

Its working! Thank you!

[C-Pfef]

Still currently doing the same thing. Ill add the updated Pager. And dont know if it will matter or not, but the div that will be referenced is in the parent view, so am I able to reference it in the pager thats in the partial view?

[JDupont]

The UpdateTargetId should be a div that already exists on your page. That should be no problem if you just wrap your @Html.Partial(...) in a div with the appropriate id.

[C-Pfef]

Dont know if you would like to help me with something else within a similar topic. I have a way to post comments. After someone post a comment I would like just that partial to refresh back to the first page, displaying the new comment. Could you point me in the right direction?

[JDupont]

Similar to solution of your first question, you could use Ajax.BeginForm(...){ //html markup with inputs }. You would need to make sure you have unobtrusive ajax js referenced on the page you want this functionality on. This provides various overloads including an updateElement ID for the results list partial that is returned. Check out these docs: msdn.microsoft.com/en-us/library/…

[C-Pfef]

Had it wrong. The parent view holds a partial view for view comments, and then that partial view has another that brings up a form to post comments. So when you post a comment the parent view needs to reload the div containing the comments view

[C-Pfef]

Link to the other question to give more details.