View an ASP.NET MVC Master Part

Question

I am new to MVC and am participating in a project developed using ASP.NET MVC 1.0. I am also weak in JavaScript: - (

I am trying to show how the Master Parts view works with the Orders and Order Details tables from the Northwind database. (Therefore: the tables are relevant, that is, the order may have several order details)

I created two controls (1st for Orders, 2nd for OrderDetails). I displayed all the orders from the Orders table as a List. As soon as I click on one of the orders, it will take me to the Details view of this order.

What I want to do (& failed) is to create a submatrix under the "Details" view for the order, which lists all the order details for this order.

I also want to change the contents of the subtitle based on the selection from the main view. I read a lot about using AJAX and JSON to dynamically change this, but I was also unable to do this: '(

Can anyone help with this and provide me with the technique and code of how I can implement it?

Answer 1

You can do this quite easily using MVC and jQuery.

First in the view 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>

Then in partial view Orders\Detail.ascx:

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