Master-Detail-Ansicht ASP.NET MVC

Question

Ich bin neu in MVC und ich bin in einem Projekt, das mit ASP.NET MVC 1.0 entwickelt wird beteiligt. Ich bin auch schwach in JavaScript :-(

Ich versuche zu demonstrieren, wie die Ansicht "Master-Details" für die Tabellen "Bestellungen" und "Bestelldetails" der Northwind-Datenbank funktioniert. (Daher: die Tabellen haben eine Beziehung, d.h. eine Bestellung kann mehrere Bestelldetails haben)

Ich habe zwei Steuerelemente erstellt (1. für Orders, 2. für OrderDetails). Ich habe alle Bestellungen aus der Tabelle Orders in einer Listenansicht angezeigt. Sobald ich auf eine der Bestellungen klicke, werde ich zur Detailansicht dieser Bestellung weitergeleitet.

Was ich tun möchte (und scheiterte), ist eine Unteransicht unterhalb der Ansicht Details der Bestellung zu erstellen, die alle Bestelldetails für diese Bestellung enthält.

Außerdem möchte ich den Inhalt der Unteransicht auf der Grundlage der Auswahlen in der Hauptansicht ändern. Ich habe viel über die Verwendung von AJAX und JSON gelesen, um das dynamisch zu ändern, aber ich habe es auch nicht geschafft:'(

Kann mir jemand dabei helfen und mir die Technik und den Code zur Verfügung stellen, wie ich sie implementieren kann?

Answer 1

Mit MVC und jQuery lässt sich dies recht einfach bewerkstelligen.

Zuerst in Ihrem Orders\List.aspx Ansicht:

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

Dann in Ihrem Orders\Detail.ascx Teilansicht:

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