asp.net MVC - How to do a master/detail page

Question

I wish to create a master/detail page. I see it working one of two ways:

• Clicking a row in a grid calls the same page again with the addition of a details panel.
• Clicking a row does javascript/JSON call to a controller action that returns details and populates a panel.

I would like the selected row to be highlighted. The selected row could be several pages into a paged grid.

Sounds easy. Unfortunately I'm new to asp.net MVC, and I'm not an experienced programmer. However, I can follow and adapt examples. I would appreciate examples of both the above methods to help me learn MVC.

Thanks in advance.

Answer 1

To answer my own question:

I ended up using PartialViews and jQuery.

Clicking on a select link against a row causes a new row to be added below the selected one (using jQuery). Into this row I use jQuery to GET /PurchaseOrder/Detail (a PartialView).

Here is my Javascript:

function GetDetails(id, enableEdit) {

     var detailsRowExists = $().find("#detailsRow").size();

     if (detailsRowExists) {
      // Delete details row
      // Note: need to rename id for row to be deleted
      // because jQuery does not wait for the row to be
      // deleted before adding the new row.
      $("#detailsRow").attr("id", "detailsRowOld");
      $("#detail").slideUp("normal", function() {
       $("#detailsRowOld").remove();
      });
     };


     // Put new row below selected one
     $("tr[id=" + id + "]").after("<tr id='detailsRow'><td colspan='4'><div id='detail'><img src='../../Content/wait20trans.gif' />Loading...</div></td></tr>");

     // Pull details into new row
     $.get("/PurchaseOrder/Detail/" + id, { enableEdit: enableEdit },
      function(data) {
       $("#detail").hide();
       $("#detail").html(data);
       $("#detail").slideDown("normal");
      }
     );

    }

Hopefully this may helps others trying to achieve a master/details page.

Answer 2

And how to save the order data AND order details ?