Master-Detail View ASP.NET MVC

Question

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

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)

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.

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 :'(

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

Answer 1

You can do this fairly easily with MVC and jQuery.

First in your 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>

Then in your Orders\Detail.ascx partial view:

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