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帮助别人试图实现一个主/详细信息页面。