Master-Details using ASP.NET MVC

source code: Download CP_MasterDetail.zip 

Introduction 

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>

 

<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. 

<o:p>

 

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
says...<o:p>

 

The Solution (Part I) :  

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

<o:p>

 

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

<o:p>

 

 

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

 

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

 

Click Add.<o:p>

 

 

<o:p> 

 

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

 

 

<o:p> 

 



 

<o:p> 

 

Choose your database…<o:p>

 

To create a new connection, click on New
Connection 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> 

 

<o:p>  

 

<o:p> 

 

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

 

<o:p> 

 

 

<o:p> 

 

4.      
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>

 

<o:p> 

 

 

<o:p> 

 

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

 

<o:p> 

 

 



 

<o:p> 

 

6.      
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>

 

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

 

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

 

 

<o:p> 

 

9.      
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>

 

 

<o:p> 

 

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

 

 

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

 

 

<o:p> 

 

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

 

 <o:p>

 

 

  <o:p> 

 

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

 

From-<o:p>

 

 

To-<o:p>

 

 

<o:p> 

 

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

 

<o:p> 

 

<o:p> 

 

 

<o:p> 

 

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

 

 



 

<o:p> 

 

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
results!<o:p>

 

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
selected).<o:p>

 

·        
Client code selected (if
selected).<o:p>

 

<o:p> 

 

 

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

 

 

<o:p> 

 

<o:p> 

 

<o:p> 

 

<o:p> 

 

<o:p> 

 

<o:p> 

 

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

 

 

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>

 

<o:p> 

 

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

 

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

 

From<o:p>

 

 

To<o:p>

 

 



 

<o:p> 

 

2.      
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:
CustomerMasterList:<o:p>

 

<o:p> 

 

 

<o:p> 

 



 

<o:p> 

 

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>

 

<o:p>

 

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

 

 

 <o:p>

 



 

<o:p> 

 

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

 

<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>

 

<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>

 

<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>

 

<o:p> 

 

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

 

To support the new requirement we will use PartialViews and JQuery AJAX
capabilities.<o:p>

 

Let's continue...

<o:p>

 

The Solution (Part III) :  

 

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

 

<o:p> 

 

<o:p> 

 

<o:p>

 

<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>

 

1.      
Create the PartialView

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

<o:p>

 

Here is the configuration values of the new
View:<o:p>

 

<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>

 

<o:p>

 

2.      
Changes on the Index view:

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

 

<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>

 

<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>

 

<o:p>

 

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

 

<o:p>

 

<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
view:<o:p>

 

<o:p> 

 

<o:p>

 

<o:p> 

 

3.      
Adding a new Action to the
Controller

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

 

<o:p>

 

Here is our brand new Action:



<o:p>

 

<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>

 

<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>

 

<o:p>

 

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

 

<o:p>

 

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

 

<o:p>