asp.net MVC - 如何做一個主/細節頁面

Question

我想創建一個主/細節頁面。我看到它有兩種工作方式：

• 單擊網格中的一行再次調用相同的頁面，並添加詳細信息面板。
• 單擊一行可以執行javascript/JSON調用，該控制器操作返回詳細信息並填充面板。

我想選中的行被突出顯示。選定的行可能會分頁到多個網格中。

聽起來很容易。不幸的是，我是新來的asp.net MVC，我不是一個有經驗的程序員。但是，我可以遵循和適應例子。我希望能夠幫助我學習MVC的上述方法的例子。

在此先感謝。

Answer 1

要回答我的問題：

我結束了使用PartialViews和jQuery。

單擊一行中的選擇鏈接會導致在選定的行之下添加一個新行（使用jQuery）。進入這一行，我使用jQuery GET/PurchaseOrder/Detail（PartialView）。

這裏是我的javascript：

function GetDetails(id, enableEdit) { 

     var detailsRowExists = $().find("#detailsRow").size(); 

     if (detailsRowExists) { 
      // Delete details row 
      // Note: need to rename id for row to be deleted 
      // because jQuery does not wait for the row to be 
      // deleted before adding the new row. 
      $("#detailsRow").attr("id", "detailsRowOld"); 
      $("#detail").slideUp("normal", function() { 
       $("#detailsRowOld").remove(); 
      }); 
     }; 


     // Put new row below selected one 
     $("tr[id=" + id + "]").after("<tr id='detailsRow'><td colspan='4'><div id='detail'><img src='../../Content/wait20trans.gif' />Loading...</div></td></tr>"); 

     // Pull details into new row 
     $.get("/PurchaseOrder/Detail/" + id, { enableEdit: enableEdit }, 
      function(data) { 
       $("#detail").hide(); 
       $("#detail").html(data); 
       $("#detail").slideDown("normal"); 
      } 
     ); 

    } 

希望這5幫助別人試圖實現一個主/詳細信息頁面。