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里面是我的控制器，它可以根据用户角色渲染一些不同的菜单。

    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);
                    });

我能够刷新部分，然而，这样做会弄乱局部的布局。我假设它不再在部分视图所在的div elemenet上加载CSS。有人能指出我正确的方向如何更好地处理这个问题？

Answer 1

您可以在菜单周围创建一个包装器，如下所示：

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

并使用#menuContainer设置html

或者您也可以尝试使用replaceWith代替html：

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

希望它有所帮助。

Answer 2

你不能用ajax搞乱CSS，除非你改变整个菜单的结构，如果是这样意味着你可能会返回没有格式化为原始html的html，有可能发生的事情是，您需要回忆起保持样式所需的任何JS功能等。

Ajax刷新部分视图

2 个答案: