Infinite Scroll Masonry Seite verliert Formatierung nach Scroll

Question

Ich habe ein MVC-Projekt, in dem eine Infinite Scroll-Seite in Verbindung mit Mauerwerk Blöcke verwendet wird.

Die Erstladung funktioniert einwandfrei, aber wenn ich die neuen Daten einlege, scheint es überhaupt keine Formatierung zu geben.

Alle Ideen würden am meisten geschätzt werden.

Hier der Code

Die 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

Da der HTML-Code in einer JSON-String zurückgegeben wurde, wenn man es auf die VentListDiv anhängen, wird als String behandelt und nicht als HTML, versuchen Umwandlung in HTML zuerst:

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