無限スクロールページがスクロール後の書式設定を失う

Question

私は、無限スクロールページが石造ブロックと併用されるMVCプロジェクトを持っています。

最初の読み込みはうまく動作しますが、新しいデータを読み込むと、フォーマットが全くないようです。

どのようなアイデアでも大歓迎です。ここで

」コード

VIEW

@model List<Business.Vent> 

<div id="VentListDiv"> 
<div class="blog_masonry_3col"> 
    <div class="container content grid-boxes"> 
      @{Html.RenderAction("VentList", "Test", new { Model = Model });} 
    </div> 
</div> 
</div> 

@section scripts { 
<script type="text/javascript"> 

    var BlockNumber = 2; //Infinate Scroll starts from second block 
    var NoMoreData = false; 
    var inProgress = false; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) { 

      inProgress = true; 
      $("#loadingDiv").show(); 

      $.post("@Url.Action("InfinateScroll", "Test")", { "BlockNumber": BlockNumber }, 
        function (data) { 

         BlockNumber = BlockNumber + 1; 
         NoMoreData = data.NoMoreData; 
         $("#VentListDiv").append(data.HTMLString); 
         $("#loadingDiv").hide(); 
         inProgress = false; 
        }); 
     } 
    }); 
</script> 
} 

PARTIAL VIEW

@model List<Business.Vent> 

@foreach (var item in Model) 
{ 
<div class="grid-boxes-in"> 
    <div class="grid-boxes-caption"> 
     <ul class="list-inline grid-boxes-news"> 
      <li><i class="fa fa-clock-o"></i> July 06, 2014</li> 
      <li>|</li> 
      <li><a href="#"><i class="fa fa-comments-o"></i> 06</a></li> 
     </ul> 
     <p>@item.MyText</p> 
    </div> 
</div> 
} 

CONTROLLER

 public ActionResult Index() 
    { 
     int BlockSize = 5; 
     var Vent = Business.Vent.GetListCount(1, BlockSize); 
     return View(Vent); 
    } 

    public ActionResult VentList(List<Business.Vent> Model) 
    { 
     return PartialView(Model); 
    } 

    [HttpPost] 
    public ActionResult InfinateScroll(int BlockNumber) 
    { 
     //////////////// THis line of code only for demo. Needs to be removed /////////////// 
     System.Threading.Thread.Sleep(3000); 
     //////////////////////////////////////////////////////////////////////////////////////// 

     int BlockSize = 5; 
     var Vent = Business.Vent.GetListCount(BlockNumber, BlockSize); 

     Business.Vent.JsonModel jsonModel = new Business.Vent.JsonModel(); 
     jsonModel.NoMoreData = Vent.Count < BlockSize; 
     jsonModel.HTMLString = RenderPartialViewToString("VentList", Vent); 

     return Json(jsonModel); 
    } 

    protected string RenderPartialViewToString(string viewName, object model) 
    { 
     if (string.IsNullOrEmpty(viewName)) 
      viewName = ControllerContext.RouteData.GetRequiredString("action"); 

     ViewData.Model = model; 

     using (StringWriter sw = new StringWriter()) 
     { 
      ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); 
      ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); 
      viewResult.View.Render(viewContext, sw); 

      return sw.GetStringBuilder().ToString(); 
     } 
    } 

Answer 1

あなたはVentListDivにそれを追加している場合、HTMLは、JSON文字列に返されたので、それは文字列としてではなくHTMLとして扱われている、してみてくださいHTMLに最初に変換する：

$("#VentListDiv").append($.parseHTML(data.HTMLString));