title: ASP.NET MVC PagedList using AJAX in partial view
body: <p>I'm building an ASP.NET MVC 5 app using Visual Studio 2015. The search works fine on the first try, but then if I click any of the page numbers in the MVC <a href="https://www.nuget.org/packages/PagedList.Mvc" rel="nofollow noreferrer">PagedList component</a>, it throws an <code>Internal Server Error</code>. Here's the AJAX form; note that it passes the data received from the search to a partial view:</p>
  
  <pre><code>@using (Ajax.BeginForm("SearchCustomers", "Permits",
  new AjaxOptions
  {
      UpdateTargetId = "targetElement",
      OnSuccess = "onAjaxSuccess",
      OnFailure = "onAjaxFailure"
  },
  new { @class = "form-horizontal form-small", role = "form", id="customerSearchForm" }))
  {
      @Html.AntiForgeryToken()
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4&gt;Customer Search&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          &lt;div class="form-group-sm clearfix"&gt;
              @Html.LabelFor(m =&gt; m.SearchVm.SearchCustomerNameNumber, new { @class = "control-label col-xs-5 col-md-5" })
              &lt;div class="col-xs-5 col-md-5"&gt;
                  &lt;div class="input-group"&gt;
                      @Html.EditorFor(m =&gt; m.SearchVm.SearchCustomerNameNumber, new {htmlAttributes = new {@class = "form-control"}})
                      &lt;span class="input-group-btn"&gt;
                          &lt;button type="submit" class="btn btn-custom-success btn-sm btn-custom-sm small-box-shadow btn-block"&gt;
                              Search
                              &lt;i class="fa fa-search fa-lg" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
                  @Html.ValidationMessageFor(m =&gt; m.SearchVm.SearchCustomerNameNumber, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-search" id="targetElement"&gt;
              @Html.Partial("_PermitsCustomerList", Model.SearchVm.Customers)
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>In the <code>_PermitsCustomerList</code> partial view, I have the following:</p>
  
  <pre><code>@using PagedList
  @using PagedList.Mvc
  @model IPagedList&lt;MyProject.ViewModels.CustomerViewModel&gt;
  @if (Model != null &amp;&amp; Model.Count &gt; 0)
  {
      &lt;div class="panel panel-default data-grid data-grid-wide"&gt;
          &lt;table class="table table-hover table-striped table-bordered table-responsive"&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      Customer #
                  &lt;/th&gt;
                  &lt;th&gt;
                      Customer Name
                  &lt;/th&gt;
              &lt;/tr&gt;
              @foreach (var item in Model)
              {
                  &lt;tr&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.Customer_NO)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.Customer_Name)
                      &lt;/td&gt;
                  &lt;/tr&gt;
              }
          &lt;/table&gt;
          &lt;div id="contentPager"&gt;
              @Html.PagedListPager(Model, page =&gt; Url.Action("SearchCustomers", "Permits", 
                 new { page }), 
                 PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new AjaxOptions()
         {
             HttpMethod = "POST",
             UpdateTargetId = "targetElement",
             OnSuccess = "onAjaxSuccess",
             OnFailure = "onAjaxFailure"
         }))
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>And here's the action on the controller:</p>
  
  <pre><code>[HttpPost]
  [ValidateAntiForgeryToken]
  public PartialViewResult SearchCustomers(PermitsViewModel permitsVm, int? page)
  {
      if (string.IsNullOrEmpty(permitsVm.SearchVm.SearchCustomerNameNumber)) return null;
      permitsVm.Page = page;
      int number;
      var list = int.TryParse(permitsVm.SearchVm.SearchCustomerNameNumber, out number) 
         ? CustomerDataService.SearchCustomerByNumber(number) 
         : CustomerDataService.SearchCustomerByName(permitsVm.SearchVm.SearchCustomerNameNumber);
  
      return PartialView("_PermitsCreateCustomerList", list.ToPagedList(permitsVm.Page ?? 1, 10));
  }
  </code></pre>
  
  <p>Here are the success and failure callback functions:</p>
  
  <pre><code>function onAjaxFailure(xhr, status, error) {
      $("#targetElement").html("&lt;strong&gt;An error occurred retrieving data:" + error + "&lt;br/&gt;.&lt;/strong&gt;");
  }
  function onAjaxSuccess(data, status, xhr) {
      if (!$.trim(data)) {
          $("#targetElement").html("&lt;div class='text-center'&gt;&lt;strong&gt;No results found for search.&lt;/strong&gt;&lt;/div&gt;");
      }
  }
  </code></pre>
  
  <p>I looked at this example: <a href="https://stackoverflow.com/questions/31343044/mvc-4-using-paged-list-in-a-partial-view">MVC 4 Using Paged List in a partial View</a> and added the <code>PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing</code> but something is still missing.</p>
  
  <p>When I view the console panel in Chrome, it has this error when I click on a page number:</p>
  
  <blockquote>
    <p><a href="http://localhost:9999/MyProject/Permits/SearchCustomers?page=2" rel="nofollow noreferrer">http://localhost:9999/MyProject/Permits/SearchCustomers?page=2</a> 500 (Internal Server Error)</p>
  </blockquote>
  
  <p>What am I doing wrong when trying to do an AJAX call with the <code>PagedList</code> component?</p>