Click here to Skip to main content
15,126,501 members
Articles / Web Development / ASP.NET
Posted 21 Jan 2013


71 bookmarked

Master-Details using ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
4.83/5 (34 votes)
21 Jan 2013CPOL9 min read
three ways to create Master-Details Using ASP.NET MVC

source code: Download 


This Article is for beginners, you learn with real world example how to take the default implementation of ASP.NET MVC for Master-Details to the next level


The Problem 


MVC infrastructure allows easy and almost effortless display a list of records
​​from a DB. As well as it allows (out of the box) drilldown/delete and update
each record, but not always it the most convenient way.<o:p>


In this tutorial, we will see three methods of presenting masterDetails
solution using MVC.<o:p>



The Scenario: 

 We have a requirement to
develop a site that displays a list of customers with the option to drill down a
customer and view full details. 



So let's see how we implement this
with MVC4 in a very simple way.<o:p>


To be focused on the solution,
we will use the minimum... No layers, IOC, tests and everything the book


The Solution (Part I) :  

  1. First, using VS2012, let’s
    create a new mvc4 Image 1
  2.  We will choose Internet
    Image 2



3. In order to create our
object model we will use EntityFramework
    Right click the Models folder and choose New



Image 3


Select ADO.NET Entity Data Model from Data
Templates folder<o:p>


Change the name to: Northwind.edmx<o:p>


Click Add.<o:p>


Image 4




Click next, to create the model from database<o:p>


Image 5







Choose your database…<o:p>


To create a new connection, click on New
and enter your DB server name and Database name<o:p>


(*notice: the connection string will be added
by VS to our web.config)<o:p>




<o:p> Image 6 




Choose Customers table and click Finish.<o:p>




Image 7




If we look at the project
structure we will see the generated model - Northwind.edmx and visual
representation of the chosen customer table.<o:p>




Image 8




Under Northwind.edmx, we can
see the class created for us called Customers.<o:p>




Image 9





Important! In order the use
the new data model we just created we must build the project.<o:p>


MVC infrastructure allows us to work with the
object model in a simple, easy and without much effort.<o:p>


We will create a new
controller called Customer.<o:p>


Choose the template that
will create views with the object model we created earlier and click ADD<o:p>


Image 10




If we examine the structure
of the project, we will see that new CustomerController and some new views has
been create. This will let us work with the model.<o:p>


Image 11




Before running the code, in
RouteConfig  file, we will set routing to
direct by default to newly created CustomerController<o:p>


Image 12


To reduce slightly the
customer table,  we will use Take(5)
method in the Index action in CustomerController. <o:p>


Image 13




We also  reduce slightly the number of columns in the
Index View, to get a smaller table.<o:p>




Image 14




For the drilldown to work ,
replace the following code:<o:p>




Image 15




Image 16




Finally, hit F5 to run the
project. You should see the The result screen below:<o:p>






Image 17




Clicking on the Details
refer us to the customer details page<o:p>


Image 18





Very easy and very simple...<o:p>


We have implemented the requirement. We have a list of customers with
the option to drilldown to customer’s information.<o:p>


But end users as end users, they’re almost never satisfied with the


They do not like the fact that in order to see the customer information
they need to move to another screen, and again return to the customers, they
want to see the customer details and the list of customers on the same page!<o:p>


No problem - let's deliver: 

The Solution (Part II) :  

We will use a new model that will contain the following data structure:<o:p>


List of customers to view.<o:p>


Customer selected (if


Client code selected (if




Image 19


Here is the new model I’ve created. Called "CustomerMasterDetailsModel"
under the Models folder:<o:p>


Image 20














We will change the Index Action in the Controller in order to use new
model. The code should look like this:<o:p>


Image 21


The first change I'll make is to insert Optional parameter in case the
user select a customer.<o:p>


At the first time, the parameter will be null, so we'll pass to the View
the full list of customers.<o:p>


The second time we get here, will be due to a customer selection by the
end user. This time the parameter will hold the customer id value. In addition
to customer list we also have to locate the selected customer, add it to the
model along with the selected customer id and pass it to the View.<o:p>




As you probably guessed, the Index View will need few changes too:<o:p>


We will Replace the
existing model (at the top of the page):<o:p>




Image 22




Image 23





Now we have to deal with
the two sections of code within the View. One is the customers and the other
one is the selected customer information. <o:p>


We will delete the existing code and create a
new one for the two sections.<o:p>


We'll start with the list of customers - (We
will use UL element instead Table) and wrap it inside section element called:




Image 24







As you can see We will represent each
customer from the customers list as a UL and add an ActionLink (that will be
converted to <a href tag). Clicking on this link will lead us to the same
controller, to the Index Action and pass the Customer Id as a parameter. <o:p>


The second code section called:
CustomerDetails will handle displaying the customer information (if selected).
Note row 31, the code will run only if a customer was selected.<o:p>


Image 25<o:p>


This is what we get after running the project:<o:p>


Image 26







Now when we click on the link View Details, we will be directed
to the following URL: localhost: 2075/Customer/Index/ALFKI<o:p>


Image 27<o:p>


When the IndexAction runs, it will validate that a customer id was sent.
If so, it will return the new model that contain the customer list, the
selected customer object & selected customer id.<o:p>


Image 28<o:p>


Very easy and very simple...<o:p>


We fulfilled our duty…implementing our customer requirement. Now we have
a list of customers with the option to drilldown to a customer information in
the same page.<o:p>




No??? Again???… Our customers are disappointed with the result!<o:p>


They don’t like the fact that every time they click customer details the
see the page refreshed, especially if they are in the middle the page and the
refresh lead them back to the top.<o:p>




Well… know the say: the customer is always right<o:p>


To support the new requirement we will use PartialViews and JQuery AJAX


Let's continue...



The Solution (Part III) :  


The following image illustrates the changes we need to make in order to
support the new request:<o:p>






Image 29<o:p>




I'll transfer the code that responsible of showing the customer details
to a new PartialView, and add some client side code to the Index view, that
will help us to make ajax call to the action method on the server. The server
then return an HTML code containing the customer details so we can inject it to
a new div(place holder) that we will create soon. This changes will  help us to implement the new requirement.<o:p>


Create the PartialView

right click on the customer folder under the Views and click "Add".

Image 30<o:p>


Here is the configuration values of the new


Image 31<o:p>


In the created view we'll delete the last two
rows (that handle the navigation functionality (we won't use it.<o:p>


Image 32<o:p>


Changes on the Index view:

first we'll delete the section element with the "CustomerDetails" id.<o:p>


Image 33<o:p>


We'll add instead a new empty div with
"CustomerDetail" id, this div will present the HTML of the selected
customer details.<o:p>


Image 34<o:p>


We'll make some modification to the first
code segment that responsible presenting the customer list, we'll replace the
following <li> element:<o:p>


Image 35<o:p>


With this <li> element:<o:p>


Image 36<o:p>




Pay attention that we changed the
"Index" Action name with "CustomerDetail"(that we are going
add right away), we also added a new "css class" parameter that will
use as a selector to identify the <a> element.

The last thing left to do is to add client side script that will connect
between the click event of the <a> element and the Ajax command (using
the class selector).

When a user click the <a> element , will make an Ajax call to the
CustomerDetail Action within the Controller, the Controller will return a
partial view in HTML format that will be inject to the div element.<o:p>


Here is the script attached to the end of the




Image 37<o:p>




Adding a new Action to the

we will create a new action (we know its name as we set it at the view level)<o:p>


Image 38<o:p>


Here is our brand new Action:



Image 39<o:p>


Inside the Action we use the Find method
(passing along the id) to get the appropriate customer object , we the return
the Partial view by specifying its name and also the current found customer,
this will eventually return an HTML code with current customer details to be
hosted inside our Div.<o:p>


Image 40<o:p>


And we done!!!<o:p>


Now let's hit F5 to run the project, <o:p>


We'll get the main page with a list of Customers:<o:p>


Image 41<o:p>


We then click the "View Details" Link and Walla we get our
customer details with a full refresh! J


Image 42<o:p>


<o:p>  * big thx to Golan Sheetrit for his help Smile | :)  




This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Meir Krudo
Team Leader Orinoa
Israel Israel
No Biography provided

Comments and Discussions

GeneralMy vote of 5 Pin
Abdullah Zaber9-Feb-16 23:40
MemberAbdullah Zaber9-Feb-16 23:40 
QuestionInitial the detail view on load Pin
Anthony Huang17-Dec-15 9:55
MemberAnthony Huang17-Dec-15 9:55 
GeneralMy vote of 1 Pin
aboubkr9012-Dec-15 5:53
professionalaboubkr9012-Dec-15 5:53 
GeneralGood one but not Master-Detail Pin
Saily27-Apr-15 5:32
MemberSaily27-Apr-15 5:32 
GeneralThanks very good work Pin
yo_jadf12-Aug-14 5:43
Memberyo_jadf12-Aug-14 5:43 
GeneralMy vote of 3 Pin
Fernando A. Gomez F.8-Aug-14 10:06
MemberFernando A. Gomez F.8-Aug-14 10:06 
QuestionNot actually a Master-Detail Pin
Francis Rodgers26-May-14 11:25
professionalFrancis Rodgers26-May-14 11:25 
AnswerRe: Not actually a Master-Detail Pin
Member 105393247-Nov-14 3:55
MemberMember 105393247-Nov-14 3:55 
SuggestionRe: Not actually a Master-Detail Pin
soldernut16-Nov-14 19:06
Membersoldernut16-Nov-14 19:06 
QuestionVery Good. Thankyou Pin
SleepyBoBos2-Apr-14 18:59
MemberSleepyBoBos2-Apr-14 18:59 
QuestionWhat about inline add and edit? PinPopular
Shimmy Weitzhandler16-Apr-13 9:54
MemberShimmy Weitzhandler16-Apr-13 9:54 
QuestionThe _III_ Version Pin
Bob Kaye30-Jan-13 11:17
MemberBob Kaye30-Jan-13 11:17 
AnswerRe: The _III_ Version Pin
SleepyBoBos2-Apr-14 19:02
MemberSleepyBoBos2-Apr-14 19:02 
GeneralSource code Pin
Meir Krudo22-Jan-13 12:59
MemberMeir Krudo22-Jan-13 12:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.