Master-Detail View ASP.NET MVC

Question

Я новичок в MVC и участвую в проекте, который разработан с ASP.NET MVC 1.0. Я также слаб в JavaScript: - (

Я пытаюсь продемонстрировать, как представление Master-Details работает с таблицами 'Orders' и 'Order Details' из базы данных Northwind. (Следовательно: таблицы имеют отношение, то есть заказ может иметь несколько деталей заказа)

Я создал два элемента управления (первый для заказов, второй для OrderDetails). Я отобразил все заказы из таблицы «Заказы» в виде списка. Как только я нажимаю на один из заказов, он переходит к представлению Details этого заказа.

Что я хочу сделать (& не удалось), так это создать вспомогательное представление под представлением «Детали» для заказа, в котором содержатся все данные о заказе для этого заказа.

Я также хочу изменить содержимое вложенного представления на основе выбора из основного представления. Я много читал об использовании AJAX и JSON для динамического изменения этого, но я тоже не смог сделать это: '(

Кто-нибудь может помочь в этом и предоставить мне технику и код того, как я могу это реализовать?

Answer 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