X.PagedListがAJAX呼び出し後に書式設定を失う

Question

UnobtrusiveAjaxの例hereを使用して、少しのブートストラップCSSを使用しようとしています。書式が設定され、正常に動作しますが、ページャを使用すると、更新されたページには書式が設定されず、ページャさえも消えてしまいます。

VIEW - INDEX

@{ 
ViewBag.Title = "Unobtrusive Ajax"; 
} 
@using PagedList; 
@using PagedList.Mvc; 
@Styles.Render("~/Content/PagedList.css") 

<div id="unobtrusive"> 
    <div class="blog_masonry_3col"> 
     <div class="container content grid-boxes"> 
      @Html.Partial("UnobtrusiveAjax_Partial") 
     </div> 
     <div class="col-md-offset-5"> 
      @Html.PagedListPager((IPagedList)ViewBag.Names, page => Url.Action("Index", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "unobtrusive", OnComplete = "PagedOnComplete" })) 
     </div> 
    </div> 
</div> 

<div id="oncomplete"></div> 

@section Scripts{ 
    <script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
    <script> 
     function PagedOnComplete(obj) { 
      console.log(obj); 
      var $oncomplete = $('#oncomplete'); 
      $oncomplete 
       .text('Paging operation completed.') 
       .css('backgroundColor', 'yellow') 
       .fadeOut({complete: function() { 
        $oncomplete.css('backgroundColor', 'transparent').text('').show(); 
       }}); 
     } 
    </script> 
} 

VIEW - UnobtrusiveAjax_Partial

@using PagedList; 
@using PagedList.Mvc; 

<div id="names" start="@ViewBag.Names.FirstItemOnPage"> 
    @foreach (var i in ViewBag.Names) 
    { 
     @*<li>@i.Title</li>*@ 
     <div class="grid-boxes-in"> 
      <div class="grid-boxes-caption">    
       <p>@i</p> 
      </div> 
     </div> 
    } 
</div> 

コントローラ

public class Test2Controller : BaseController 
    { 
     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 1

あなたの "控えめな" divがAJAX呼び出しを行っているページャが含まれています。

返されたHTMLを「邪魔にならない」divに配置するためにajax呼び出しを行うときに指定します。ただし、返されるHTMLにはポケットベルがないため、ポケットベルを削除しています。

そうではなく、そのdiv要素をターゲットコンテンツが配置され、ポケベルを持っていないのdivターゲット：

<div id="unobtrusive"> 
    <div class="blog_masonry_3col"> 
     <div class="container content grid-boxes" id="divToReplace"> 
      @Html.Partial("UnobtrusiveAjax_Partial") 
     </div> 
     <div class="col-md-offset-5"> 
      @Html.PagedListPager((IPagedList)ViewBag.Names, page => Url.Action("Index", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "divToReplace", OnComplete = "PagedOnComplete" })) 
     </div> 
    </div> 
</div> 

これはdiv要素の消失の世話をするが、それはまた、フォーマットを修正するかもしれませんが同じように。