asp.net MVC - 如何做一个主/详细页面答案

【问题标题】：asp.net MVC - How to do a master/detail pageasp.net MVC - 如何做一个主/详细页面
【发布时间】：2009-02-06 20:42:06
【问题描述】：

我希望创建一个主/详细页面。我认为它可以通过以下两种方式之一发挥作用：

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

我希望突出显示选定的行。选定的行可以是分页网格中的几页。

听起来很简单。不幸的是，我是 asp.net MVC 的新手，而且我不是经验丰富的程序员。但是，我可以遵循和调整示例。我会很感激上述两种方法的例子来帮助我学习 MVC。

提前致谢。

【问题讨论】：

标签： asp.net-mvc

【解决方案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");
            }
        );

    }

希望这可以帮助其他尝试实现主/详细信息页面的人。

【讨论】：