主从视图 ASP.NET MVC答案

【问题标题】：Master-Detail View ASP.NET MVC主从视图 ASP.NET MVC
【发布时间】：2010-12-04 13:38:52
【问题描述】：

我是 MVC 的新手，我参与了一个使用 ASP.NET MVC 1.0 开发的项目。我的 JavaScript 也很弱 :-(

我试图演示主从视图如何在 Northwind 数据库中的“订单”和“订单详情”表上工作。（因此：表格有关系，即一个订单可以有多个订单详情）

我创建了两个控件（第一个用于 Orders，第二个用于 OrderDetails）。我将 Orders 表中的所有订单显示到列表视图中。一旦我点击其中一个订单，它就会将我带到该订单的详细信息视图。

我想要做的（失败）是在订单的详细信息视图下方创建一个子视图，其中包含该订单的所有订单详细信息。

我还想根据主视图中的选择更改子视图的内容。我读了很多关于使用 AJAX 和 JSON 来动态改变它的内容，但我也没有这样做:'(

任何人都可以在这方面提供帮助并为我提供如何实现它的技术和代码？

【问题讨论】：

签出this

标签： asp.net-mvc view master-detail

【解决方案1】：

您可以使用 MVC 和 jQuery 相当轻松地做到这一点。

首先在您的Orders\List.aspx 视图中：

<script>
    // once the page has loaded
    $(function() {
        // set up your click event to load data
        $('.list-item').click(function() {
            // ajax load the content returned by the detail action
            $('#detail').load('<%= Url.Action("Detail") %>', { id: this.id } );
        });
    });
</script>

<style> .list-item { cursor: pointer; } </style>

<% // loop through the orders in your model and show them 
// as each div has the class list-item it will be give the click event
foreach( var order in Model ) { %>
    <div id="<%= order.Id %>" class="list-item"><%= order.Name %></div>
<% } %>

<%-- the panel that the ajaxed content will be loaded into --%>
<div id="detail"></div>

然后在您的Orders\Detail.ascx 部分视图中：

Id: <%= Model.Id %><br />
Name: <%= Model.Name %><br />
Description: <%= Model.Description %><br />
etc

【讨论】：