ビューを並べて表示する

Question

私はMVCに非常に新しいので、おそらくその基本的な問題です。

HomeControllerという名前のコントローラを作成しました。このコントローラは、メニューのように動作するナビゲーションパネルを表示しますが、Windowsエクスプローラのフォルダとして常に表示する必要があります。アイテムをクリックすると、右側に別のビューをロードしたい（マスターディテールに似ている）。各項目にはビューとモデルがあります。私は次のコード

 @foreach (var service in Model.Services) 
     { 
      @Html.ActionLink(service.Label, "Details", new { serviceName = service.ServiceName }) 

     } 

にこのコードを持っているナビゲーションパネルをロードするには正常に動作しますが、コードは別のビューを開き、私のナビゲーションリストが消えています。詳細ビューとホームビューを開く方法を教えてください

Answer 1

これを行うには、ajaxを使用する必要があります。

ページを2つに分割します。左のリンクのコンテナdivと右のプレビューdiv。リンクをクリックすると、ajaxを使用してそのリンクを呼び出し、同じページのDOM（プレビューdiv）を更新します。

<div> 
    <div class="pageLeftMenuContainer"> 
     @foreach (var service in Model.Services) 
     {   
     @Html.ActionLink(service.Label, "Details", 
       new { serviceName = service.ServiceName },new { @class="ajaxLink"}) 
     } 
    </div> 
    <div class="pageRight" id="preview"></div> 
</div> 

ここで、cssクラスのajaxリンクを持つリンクのclickイベントを聞き、プレビューdivを読み込みます。 jquery load（）メソッドを使用できます。

$(function(){ 
    $(".ajaxLink").click(function(e){ 
    e.preventDefault(); // prevent the normal link click behavior 
    $("#preview").load($(this).attr("href")); 
    }); 
});