jquery - Ajax 刷新局部 View

Question

我正在尝试根据用户通过 Ajax 所做的选择来刷新部分菜单。

我有一个经过身份验证的布局，其中包含...

    <div class="container-fluid body-content">
<div class="row">
    <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-10 col-md-10 col-sm-10 col-xs-10">
        <div id="bodyContent" class="pad-top">
            @RenderBody()
        </div>
    </div>
    <div id="menu" style="display: inline; visibility: hidden">
        @{ Html.RenderAction("GetMenuPartial", "Menu", noArea); }
    </div>
</div>

然后在 RenderAction 里面是我的 Controller ，它可以根据用户 Angular 色呈现一些不同的菜单。

    public PartialViewResult GetMenuPartial()
    {
        if (User.IsInRole(Roles.ApplicationCenter.Administrator))
        {
            return !string.IsNullOrEmpty(SessionHelper.GetImpersonationName()) ? GetApplyPartial() : PartialView("_MenuAdminPartial", GetUrl());
        }

        if (User.IsInRole(Roles.ApplicationCenter.Customer))
        {
            return PartialView("_MenuCustomerPartial", GetMenuCustomerViewModel());
        }

        return SessionHelper.GetApplicationId() == 0 ? PartialView("_MenuCandidatePartial", GetMenuCandidateViewModel()) : GetApplyPartial();
    }

我的刷新部分的 GET 请求看起来像这样......

    $.get('@Url.Action("GetMenuPartial", "Menu", new {area = ""})', {})
                        .done(function(menuCustomerViewModel) {
                        $("#menu").html(menuCustomerViewModel);
                    }); 

我可以刷新局部，但是这样做会弄乱局部的布局。我假设它不再在部分 View 所在的那个 div elemenet 上加载 CSS。有人可以指出我正确的方向以了解如何更好地处理这个问题吗？

Answer 1

您可以像这样在菜单周围创建一个包装器:

<div id="menuContainer"><div id="menu"....

并使用#menuContainer 设置html

或者你也可以尝试用 replaceWith 代替 html:

$("#menu").replaceWith(menuCustomerViewModel);

希望对您有所帮助。