无限滚动砌体页面在滚动后丢失格式

Question

我有一个 MVC 项目，其中无限滚动页面与砌体块结合使用。

初始加载工作正常，但是当我加载新数据时，它似乎根本没有格式。

任何想法都将不胜感激。

这里是代码

风景

@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>
}

局部视图

@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>
}

控制器

        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

由于 HTML 以 JSON 字符串形式返回，当您将其附加到 VentListDiv 时，它被视为字符串而不是 HTML，请先尝试转换为 HTML：

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