Partial View AJAX Paging List

Question

I cannot figure out how to get a partial view for displaying a paged list using ajax.

The closest I worked with is an example from Using paging in a partial view, asp.net mvc

I'm basically trying to create a page with a list of comments for the user, where the page can be changed in the same way as the response tab on the stackoverflow users page.

Paging works great on the first click of a pager, but then a partial view is all that comes back when I click on the pager again.

Controller:

public class ProductController : Controller { public IQueryable<Product> products = new List<Product> { new Product{ProductId = 1, Name = "p1"}, new Product{ProductId = 2, Name = "p2"}, new Product{ProductId = 3, Name = "p3"}, new Product{ProductId = 4, Name = "p4"}, new Product{ProductId = 5, Name = "p5"} }.AsQueryable(); public object Index() { return View(); } public object Products(int? page) { var pageNumber = page ?? 1; // if no page was specified in the querystring, default to the first page (1) var onePageOfProducts = products.ToPagedList(pageNumber, 3); // will only contain 25 products max because of the pageSize ViewBag.OnePageOfProducts = onePageOfProducts; return PartialView("_Products"); } } 

Views:

Index.cshtml:

 <link href="/Content/PagedList.css" rel="stylesheet" type="text/css" /> <h2>List of Products</h2> <div id="products"> @Html.Action("Products", "Product") </div> @section scripts{ <script type="text/javascript"> $(function() { $('#myPager').on('click', 'a', function() { $.ajax({ url: this.href, type: 'GET', cache: false, success: function(result) { $('#products').html(result); } }); return false; }); }); </script> } 

_Products.cshtml:

 @using PagedList.Mvc; @using PagedList; <ul> @foreach(var product in ViewBag.OnePageOfProducts){ <li>@product.Name</li> } </ul> <!-- output a paging control that lets the user navigation to the previous page, next page, etc --> <div id="myPager"> @Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Products", new { page })) </div> 

Model

 public class Product { public int ProductId { get; set; } public string Name { get; set; } } 

Can someone show me what I'm doing wrong?

Answer 1

In the end, I used an unobtrusive ajax example from the pagedlist source [ https://github.com/troygoode/PagedList.BIZ►1]

partial view:

 @using PagedList; @using PagedList.Mvc; <ul id="names" start="@ViewBag.Names.FirstItemOnPage"> @foreach(var i in ViewBag.Names){ <li>@i</li> } </ul> @Html.PagedListPager((IPagedList)ViewBag.Names, page => Url.Action("Index", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new AjaxOptions(){ HttpMethod = "GET", UpdateTargetId = "unobtrusive"})) 

Pointer:

 @{ ViewBag.Title = "Unobtrusive Ajax"; } @using PagedList; @using PagedList.Mvc; @Styles.Render("~/Content/PagedList.css") <h2>Unobtrusive Ajax</h2> <p>Example of paging a list:</p> <div id="unobtrusive"> @Html.Partial("UnobtrusiveAjax_Partial") </div> 

Controller:

  public class UnobtrusiveAjaxController : BaseController { // Unobtrusive Ajax public ActionResult Index(int? page) { var listPaged = GetPagedNames(page); // GetPagedNames is found in BaseController if (listPaged == null) return HttpNotFound(); ViewBag.Names = listPaged; return Request.IsAjaxRequest() ? (ActionResult)PartialView("UnobtrusiveAjax_Partial") : View(); } } 

Answer 2

Just in case, since the original question was not given. I think the problem was that the click handlers were not tied to the new pager elements generated by the AJAX request. In this case, I also do not like the unobtrusive AJAX solution, since the pager identifier is hardcoded in a nested form, and transmitting it in some other way can be too cumbersome.

 <script type="text/javascript"> // better not to clutter global scope of course, just for brevity sake var attachHandlers = function() { $('#myPager a').click(function() { $('#myPager').load(this.href, function() { attachHandlers(); }); return false; }); }; $(document).ready(function () { attachHandlers(); }); </script>