Question

使用UnobtrusiveAjax示例here，我试图使用一些Bootstrap CSS。一切都被格式化并且工作正常，除了当我使用寻呼机时，更新的页面没有格式化甚至寻呼机都消失了。

查看 - 索引

@{
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调用的寻呼机。

指定在进行ajax调用时将返回的HTML放在“不显眼的”div中。但是，返回的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消失，但也可能会修复格式。

在AJAX调用后，X.PagedList丢失格式

1 个答案: