Master-Detail查看ASP.NET MVC

时间:2009-10-07 09:23:54

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

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

我正在尝试演示Master-Details视图如何处理'Orders'和& Northwind数据库中的“订单详细信息”表。 (因此:表格有关系,即订单可以有多个订单明细)

我创建了两个控件(第一个用于订单,第二个用于OrderDetails)。我将Orders表中的所有订单显示在List视图中。一旦我点击其中一个订单,它就会转到该订单的详细信息视图。

我想要做的事情(& failed)是在订单的详细信息视图下创建一个子视图,该视图包含该订单的所有订单详细信息。

我还想根据主视图中的选择更改子视图的内容。我读了很多关于使用AJAX& amp; JSON动态改变了但我也没做到:'(

任何人都可以提供帮助,并为我提供技术和帮助。我可以如何实现它的代码?

1 个答案:

答案 0 :(得分:5)

使用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