主详细查看ASP.NET MVC [英] Master-Detail View ASP.NET MVC

问题描述

我是新来的MVC和我参与了与ASP.NET MVC 1.0开发的一个项目。我也弱在JavaScript中： - （

I'm new to MVC and I'm involved in a project that is developed with ASP.NET MVC 1.0. I'm also weak in JavaScript :-(

我试图证明主详细说明如何在'订单'和查看工作;从Northwind数据库订单明细表。 （因此：表中有一个关系，即一个订单可以有多个订单详细信息）

I'm trying to demonstrate how Master-Details view work on 'Orders' & 'Order Details' tables from Northwind database. (Hence: the tables has a relation, i.e., an order can have multiple order details)

我创建了两个控件（1日的订单量，第二对订单明细）。我显示的所有从订单表订单到列表视图。当我点击它带我到该订单的详细信息视图中的订单之一。

I created two controls (1st for Orders, 2nd for OrderDetails). I displayed all the orders from Orders table into a List view. Once I click on one of the orders it takes me to the Details view of that order.

我想要做什么（安培;失败）是创建一个让所有该订单的订单细节订单的详细信息视图下方的子视图。

What I want to do (& failed) is to create a sub view below the Details view of the order that is having all the order details for that order.

我也想改变的基础上，从主视图的选择子视图的内容。我读了很多关于使用AJAX和放大器; JSON动态地改变这一点，但我没能做到这一点：（

I also want to change the content of the sub view based on the selections from the master view. I read a lot about using AJAX & JSON to dynamically change that but I failed to do it too :'(

任何人都可以在帮助和为我提供技术和放大器;我怎么能实现它code？

Anyone can help in that and provide me with the technique & code of how I can implement it?

推荐答案

您可以用MVC和jQuery做到这一点很容易。

You can do this fairly easily with MVC and jQuery.

首先在订单\\ 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>

然后在你的订单\\ Detail.ascx 局部视图：

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

这篇关于主详细查看ASP.NET MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！