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.