並排顯示視圖

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鏈接的鏈接上的點擊事件並加載預覽div。你可以使用jquery load（）方法。

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