Ajax刷新局部视图

I'm trying to refresh a partial menu depending on the user selection through Ajax.

I have an authenticated layout that has this...

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

Then inside that RenderAction is my controller, which can render a few different Menus depending on user role.

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

My GET request to refresh the partial looks like this...

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

I'm able to refresh the partial, however, doing this messes up the layout of the partial. I'm assuming it's no longer loading the CSS on that div elemenet the partial view is located in. Could someone point me to the right direction as to how to better handle this?

You can create a wrapper around your menu, like this:

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

And use #menuContainer to set the html

Or you can also try replaceWith instead of html:

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

Hope it helps.

You can't mess up the CSS with ajax unless you change the structure of the whole menu, if so that means that you are probably returning back html that is not formatted to you original html, Chances are what is happening is that you will need to recall any JS functions, etc that are required to keep your styling.