ASP.NET MVC - 如何创建主/细节页面

Question

我想创建一个主/细节页。我可以看到它工作的两种方式:

• 单击网格中的一行会再次调用相同的页面，并添加一个详细面板。
• 单击行时，通过javascript/JSON呼叫控制器操作以返回详细信息并填充面板。

我希望所选行能够突出显示。 所选行可能在分页网格中的几个页面中。

听起来很容易。不幸的是，我是asp.net MVC的新手，也不是有经验的程序员。然而，我可以跟随和适应例子。我希望能提供上述两种方法的示例来帮助我学习MVC。

谢谢。

- Alan T

Answer 1

为了回答我的问题：

我最终使用了PartialViews和jQuery。

点击行上的选择链接会导致在所选行下方添加一个新行（使用jQuery）。在这一行中，我使用jQuery来获取/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");
            }
        );

    }

希望这能帮助其他试图实现主/细节页面的人们。

- Alan T