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?