Ajax Refresishing Partial 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 мой контроллер, который может сделать несколько различных меню в зависимости от роли пользователя.

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

Я могу обновить частичное, однако, делать это ухудшит макет парциальное. Я предполагаю, что он больше не загружает CSS на этом элементе div, где находится частичный вид. Может ли кто-нибудь указать мне в правильном направлении, как лучше справиться с этим?

Answer 1

Вы можете создать оболочку вокруг меню, как это:

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

И использовать #menuContainer установить HTML

Или вы также можете попробовать ReplaceWith вместо HTML:

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

Надеюсь, что это поможет.

Answer 2

Вы не можете испортить CSS с помощью ajax, если вы не измените структуру всего меню, если это означает, что вы, вероятно, возвращаете обратно html, который не отформатирован для вас оригинальным html, Скорее всего, что происходит что вам нужно будет напомнить о любых функциях JS и т. д., которые необходимы для сохранения вашего стиля.