PartialViewをMVCのレイアウトページにレンダリングする最良の方法は何ですか？

Question

私のMVC5プロジェクトにレイアウトページがあり、以下に示すように左側のメニューリンク（ハイパーリンク）をクリックして、すべてのページコンテンツ（部分的なビュー）をレンダリングしたいとします。 Ajaxなどを使用していくつかの方法がありますが、私のニーズを最もよく満たす方法はわかりません。 LayoutページとControllerメソッドを含むこの問題に関する例はありますか？

Answer 1

あなたが最初のdivであなたの体の内容をラップし、それに任意のIDを割り当てる必要があり：

<div id="divContentArea"> 
@RenderBody() 
</div> 

今スクリプトメニューをクリックしてイベントに：

$(".menuLinkItem").click(function (e) { 
    e.preventDefault();   
    var controllerName = $(this).attr('data-controllername'); 
    var actionName = $(this).attr('data-actionname'); 

    if (String(actionName).trim() == '') { 
     return false; 
    } 
    if (typeof (controllerName) == "undefined") { 
     return false; 
    } 

    var url = "/" + controllerName + "/" + actionName; 

    //Open url in new tab with ctrl key press 
    if (e.ctrlKey) { 
     window.open(url, '_blank'); 
     event.stopPropagation(); 
     return false; 
    }    

    $.ajax({ 
     url: url, 
     type: 'POST', 
     success: function (data) { 
      var requestedUrl = String(this.url).replace(/[&?]X-Requested-With=XMLHttpRequest/i, ""); 
      if (typeof (requestedUrl) == "undefined" || requestedUrl == 'undefined') { 
       requestedUrl = window.location.href; 
      } 

      // if the url is the same, replace the state 
      if (typeof (history.pushState) != "undefined") { 
       if (window.location.href == requestedUrl) { 
        history.replaceState({ html: '' }, document.title, requestedUrl); 
       } 
       else { 
        history.pushState({ html: '' }, document.title, requestedUrl); 
       } 
      } 

      $("#divContentArea").html(data);     

     }, 
     error: function (xhr) { 
     } 
    }); 

}); 

はコントローラー：

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)] 
public PartialViewResult Index() 
{ 
     if (HttpContext.Request.HttpMethod == "GET") 
     { 
      return View(); 
     } 
     else 
     { 
      return PartialView(); 
     } 
}