Master-Detail View ASP.NET MVC - 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