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

我正在尝试演示North-wind数据库中“订单”和“订单详细信息”表上的“主-详细信息” View 的工作方式。 (因此:这些表具有关系,即一个订单可以具有多个订单详细信息)

我创建了两个控件(第一个用于Orders,第二个用于OrderDetails)。我将“订单”表中的所有订单显示到“列表” View 中。单击其中一个订单后,它将带我到该订单的“详细信息” View 。

我要做的事(&失败)是在该订单的“详细信息” View 下创建一个 subview ,该 subview 具有该订单的所有订单详细信息。

我还想根据主 View 中的选择来更改 subview 的内容。我读了很多有关使用AJAX和JSON动态更改该内容的信息,但我也没有做到这一点:'(

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

最佳答案

您可以使用MVC和jQuery轻松完成此操作。

首先在Orders\List.aspx View 中:

<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部分 View 中:
Id: <%= Model.Id %><br />
Name: <%= Model.Name %><br />
Description: <%= Model.Description %><br />
etc

10-05 20:40
查看更多