部分的な表示が正しく表示されないajaxタブ区画のIpagedList

Question

部分ビューをロードするajaxタブ区画にページリストがあります。私はIPagedlistに組み込みのajaxを使用しましたが、部分ビューは正しく置き換えられていません。何が間違っているのですか？

My Ajaxは/ Viewを見つけ、Customer Controllerに適切なビューとredirectsActionを呼び出し、表示し、タブdivに挿入します。

次のページをクリックすると、/ customer/Invoice？page = 2が呼び出され、divの代わりにURLに返されます 'replaceDiv' .....残りの部分は表示されません。サイトのここで

はタブ付きペインでメインページで、あなたはAJAXで見れば、ここ

<div class="row"> 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
     <h3>Account Information</h3> 

     <div class="tab-container left clearfix"> 
      <ul id="tabStrip" class="nav-tabs clearfix"> 
       <li class="active"><a href="#0" data-toggle="tab">Business Information</a></li> 
       <li class=""><a href="#1" data-toggle="tab">Addresses</a></li> 
       <li class=""><a href="#2" data-toggle="tab">Pro forma Invoice</a></li> 
       <li class=""><a href="#3" data-toggle="tab">Invoices</a></li> 
       <li class=""><a href="#4" data-toggle="tab">Order History</a></li> 
      </ul> 

      <div class="tab-content clearfix"> 
       <div class="tab-pane active" id="0">@Html.Action("Information", "Customer")</div> 
       <div class="tab-pane" id="1"></div> 
       <div class="tab-pane" id="2"></div> 
       <div class="tab-pane" id="3"></div> 
       <div class="tab-pane" id="4"></div> 
      </div><!-- End .tab-content --> 
     </div><!-- End .tab-container --> 
    </div><!-- End .col-md-12 --> 
</div><!-- End .row --> 



@section scripts{ 
    <script type="text/javascript"> 
     $('#tabStrip a').click(function (e) { 
      e.preventDefault() 
      var tabID = $(this).attr("href").substr(1); 

      $(".tab-pane").each(function() { 
       $(this).empty(); 
      }); 

      $("#" + tabID).empty().append("<div class='loader'><img src='/Content/img/Loader/ajax-loader.gif' alt='Loading' /></div>"); 

      $.ajax({ 
       url: "/Account/CustomerTab", 
       data: { Id: tabID }, 
       cache: false, 
       type: "get", 
       dataType: "html", 
       success: function (result) { 
        $("#" + tabID).empty().append("<div id='replaceDiv'>" + result + "</div>"); 
       } 
      }); 
      $(this).tab('show') 
     }); 
    </script> 
} 

「replaceDiv」あなたは私がクラスでDIV nは挿入表示されます呼び出しは、ページリストとの私の部分図でありますどこでhtmlを置き換えようとしているのですが、私が得るのは新しいHTMLページだけです。

<h2 class="sub-title">Invoices</h2> 

@using (Html.BeginForm("Invoices", "Customer", FormMethod.Get)) 
{ 
    <p> 
     Find by Invoice Number: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string) 
     <input type="submit" value="Search" /> 
    </p> 
} 
<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th>Invoice Number</th> 
      <th>Date</th> 
      <th>Total</th> 
      <th>Edit</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var inv in Model) 
      { 
      <tr> 
       <td>@inv.InvoiceNumber</td> 
       <td>@inv.DateCompleted</td> 
       <td>@inv.TotalAmount</td> 
      </tr> 
     } 
    </tbody> 
</table> 
@Html.PagedListPager(Model, page => Url.Action("Invoices", "Customer", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "replaceDiv" })) 

EDIT

私は私のコントローラであれば（Request.IsAjaxRequest（））を追加した場合、それが打撃を受けるいないことが判明。そのため、Ajaxリクエストは送信されません。これはレンダリングされたHTMLの外観です

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#replaceDiv" href="/Customer/Invoices?page=3">3</a> 

Answer 1

この問題が見つかりました。私のjavascriptの知識は少し限られていることを除いて、すべてのコードは正しいです。私はjquery.unobtrusive-ajax.min.jsパッケージをインクルードする必要がありました。