title: IpagedList in ajax tabbed pane with partial view not rendering correctly
body: <p>I have a paged list in a ajax tabbed pane where I load partial views. I have made use of the built in ajax in IPagedlist but partial view is not being replaced properly, what am I doing wrong</p>
  
  <p>My Ajax calls /Account/CustomerTab this finds the correct view and redirectsAction to Customer Controller and calls the partial view and inserts it in the tab div.</p>
  
  <p>When clicking next it calls /Customer/Invoice?page=2 and returns that in the url instead of replacing the div 'replaceDiv'.....Now I sit with just the partial view in the window without the rest of the site.</p>
  
  <p>Here is the main page with the tabbed pane, if you look in the ajax call you will see I insert n div with a class "replaceDiv"</p>
  
  <pre><code>    &lt;div class="row"&gt;
      &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
          &lt;h3&gt;Account Information&lt;/h3&gt;
  
          &lt;div class="tab-container left clearfix"&gt;
              &lt;ul id="tabStrip" class="nav-tabs clearfix"&gt;
                  &lt;li class="active"&gt;&lt;a href="#0" data-toggle="tab"&gt;Business Information&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=""&gt;&lt;a href="#1" data-toggle="tab"&gt;Addresses&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=""&gt;&lt;a href="#2" data-toggle="tab"&gt;Pro forma Invoice&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=""&gt;&lt;a href="#3" data-toggle="tab"&gt;Invoices&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=""&gt;&lt;a href="#4" data-toggle="tab"&gt;Order History&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div class="tab-content clearfix"&gt;
                  &lt;div class="tab-pane active" id="0"&gt;@Html.Action("Information", "Customer")&lt;/div&gt;
                  &lt;div class="tab-pane" id="1"&gt;&lt;/div&gt;
                  &lt;div class="tab-pane" id="2"&gt;&lt;/div&gt;
                  &lt;div class="tab-pane" id="3"&gt;&lt;/div&gt;
                  &lt;div class="tab-pane" id="4"&gt;&lt;/div&gt;
              &lt;/div&gt;&lt;!-- End .tab-content --&gt;
          &lt;/div&gt;&lt;!-- End .tab-container --&gt;
      &lt;/div&gt;&lt;!-- End .col-md-12 --&gt;
  &lt;/div&gt;&lt;!-- End .row --&gt;
  
  
  
  @section scripts{
      &lt;script type="text/javascript"&gt;
          $('#tabStrip a').click(function (e) {
              e.preventDefault()
              var tabID = $(this).attr("href").substr(1);
  
              $(".tab-pane").each(function () {
                  $(this).empty();
              });
  
              $("#" + tabID).empty().append("&lt;div class='loader'&gt;&lt;img src='/Content/img/Loader/ajax-loader.gif' alt='Loading' /&gt;&lt;/div&gt;");
  
              $.ajax({
                  url: "/Account/CustomerTab",
                  data: { Id: tabID },
                  cache: false,
                  type: "get",
                  dataType: "html",
                  success: function (result) {
                      $("#" + tabID).empty().append("&lt;div id='replaceDiv'&gt;" + result + "&lt;/div&gt;");
                  }
              });
              $(this).tab('show')
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>here is my partial view with the page list where I try to replace the html but all i get is a new html page with just my list in and not replacing the div.</p>
  
  <pre><code>    &lt;h2 class="sub-title"&gt;Invoices&lt;/h2&gt;
  
  @using (Html.BeginForm("Invoices", "Customer", FormMethod.Get))
  {
      &lt;p&gt;
          Find by Invoice Number: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
          &lt;input type="submit" value="Search" /&gt;
      &lt;/p&gt;
  }
  &lt;table class="table table-hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Invoice Number&lt;/th&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Total&lt;/th&gt;
              &lt;th&gt;Edit&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @foreach (var inv in Model)
              {
              &lt;tr&gt;
                  &lt;td&gt;@inv.InvoiceNumber&lt;/td&gt;
                  &lt;td&gt;@inv.DateCompleted&lt;/td&gt;
                  &lt;td&gt;@inv.TotalAmount&lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  @Html.PagedListPager(Model, page =&gt; Url.Action("Invoices", "Customer", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "replaceDiv" }))
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I find that if I add if (Request.IsAjaxRequest()) in my controller then it doesn't get hit. so its not an ajax request being sent through. This is what the rendered HTML looks like</p>
  
  <pre><code>&lt;a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#replaceDiv" href="/Customer/Invoices?page=3"&gt;3&lt;/a&gt;
  </code></pre>