title: AJAX pagedlist with partial view
body: <p>I can't quite figure out how to get a partial view to render a paged list using ajax. </p>
  
  <p>The closest I've got it to working is the example from <a href="https://stackoverflow.com/questions/18822352/using-paging-in-partial-view-asp-net-mvc">Using paging in partial view, asp.net mvc</a></p>
  
  <p>I'm basically trying to create a page with a list of comments per user where the page can be changed in the same way as the answers tab on the stackoverflow users page.</p>
  
  <p>The paging works fine the on the first pager click, but then the the partial view is all that is returned once I click on the pager again.</p>
  
  <p>Controller:</p>
  
  <pre><code>public class ProductController : Controller
  {
      public IQueryable&lt;Product&gt; products = new List&lt;Product&gt; { 
      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");
      }
  }
  </code></pre>
  
  <p>Views:</p>
  
  <p>Index.cshtml:</p>
  
  <pre><code>&lt;link href="/Content/PagedList.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;h2&gt;List of Products&lt;/h2&gt;
  
  &lt;div id="products"&gt;    
      @Html.Action("Products", "Product")
  &lt;/div&gt;
  
  
  @section scripts{
  
      &lt;script type="text/javascript"&gt;
      $(function() {
      $('#myPager').on('click', 'a', function() {
          $.ajax({
              url: this.href,
              type: 'GET',
              cache: false,
              success: function(result) {
                  $('#products').html(result);
              }
          });
          return false;
      });
      });
      &lt;/script&gt;
      }
  </code></pre>
  
  <p>_Products.cshtml:</p>
  
  <pre><code>@using PagedList.Mvc;
  @using PagedList;
  
  
  &lt;ul&gt;
      @foreach(var product in ViewBag.OnePageOfProducts){
          &lt;li&gt;@product.Name&lt;/li&gt;
      }
  &lt;/ul&gt;
  
  &lt;!-- output a paging control that lets the user navigation to the previous page, next page, etc --&gt;
  &lt;div id="myPager"&gt;
      @Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page =&gt; Url.Action("Products", new { page }))
  &lt;/div&gt;
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>public class Product
  {
      public int ProductId { get; set; }
      public string Name { get; set; }
  }
  </code></pre>
  
  <p>Can anyone show me what I'm doing wrong?</p>