The 3 Musketeers, Model, View and Controller Using ASP.Net MVC: Part II

Introduction and Goal

This is my second article in MVC. In my previous article we discussed how to develop MVC applications in ASP.NET using HttpHandler. In case you missed the first part I have given the link below. I am sure Httphandler is a tough way to implement MVC, but if you have understood the concept then you have understood the basics of implementing MVC. Ok, now the good news. In Visual Studio 2008 we have something readymade given by the Microsoft ASP.NET community the ASP.NET MVC. In this section we will discuss step-by-step how to use the ASP.NET MVC to build the three Musketeer's Model, View and Controller. It's a clean approach and easy to build upon since it encapsulates the HttpHandler implementation for MVC, thus bringing in simplicity.

The three Musketeers part 1.

Pre-requisites

We would suggest you to read the concepts of MVC and HttHandlers to understand this tutorial, more specifcally HTTPHandler.aspx . To understand the concept of HttpHandler and module you can read my HttpModuleandHttpHandle  article.

This article does not discuss the concept of MVC so please read the previous article about the basics of MVC. 

Installing the ASP.NET MVC  

The first thing you need to do is download the ASP.NET MVC setup from Microsoft link given below.

http://www.microsoft.com/downloads/details.aspx?FamilyId=A24D1E00-CD35-4F66-BAA0-2362BDDE0766&displaylang=en

Once you set it up you should see a MVC solution in your Visual Studio 20008 project templates. 

Our goal 

Our goal is to use a simple example of a customer view. The following is a visual view of things and how it will move. If the action is Home, the Home.aspx page will be shown with two links: one is to view the customer with sales and the other is to view the customer without sales. If the action is "ViewCustomersWithOutSales" then it will display a simple view where the customer details are shown without sales figure. If the action is ViewCustomerWithSales, it will show a customer with its sales figures. 

Model the easy musketeer

Once you create the MVC project you will see that the solution has three folder controllers, views and model. So we have added a "clsCustomer" class that will load dummy customers in the list. In real projects this class will actually connect to the DAL component to get the data. 

The second musketeer the view

All pages in ASP.NET MVC inherit from "ViewPage". So to create a view in ASP.NET MVC we need to select the MVC view page as shown below. 

If you have read the principles of MVC the controller loads the model. So there should be a mechanism by which the model data should be sent to the view. That's done using "ViewData".

The following is the code to view the "ViewCustomerWithOutSales" ASPX behind code. You can see that the page is inherited from the "ViewPage" class. Second we have taken the customer data from the "ViewData" and bound the data to a data grid.

namespace MvcApplication.Views.Customers { public partial class ViewCustomerWithoutSales : ViewPage { protected void Page_Load(object sender, EventArgs e) { dtgWithoutSales.DataSource = (clsCustomers) ViewData["Customers"]; dtgWithoutSales.DataBind(); } } }

We have done the same for "ViewCustomerWithSales". In the same way we have made "Home.aspx". It does not have any model as such.

The Controller, the heart of ASP.NET MVC

To create a controller class you can add an item and use the controller template as shown in the following figure. Note to add the controller class in the controller folder. 

The controller class naming convention is bit driven by a naming convention. The main purpose of the controller class is to map the action to the view. So the class name maps with the folder where the view is stored and the ASPX page name maps with the function in the customer controller. For instance the "ViewCustomerWithOutSales" will call the view "ViewCustomerWithOutSales.aspx".

The naming convention is driven by how the routes are registered in the global.asax file. The following is the code snippet that shows how the routing is mapped. So it's the controller name , the folder name and the ID. We will understand later what is the use of ID.

public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Home", id = "" } // Parameter defaults ); }

As we know, the role of the controller is to load the model and the call the view. You can see from the following code snippet it has loaded the customers model and passed the same in the "ViewData" to the ASPX behind code.

public ActionResult ViewCustomerWithOutSales() { clsCustomers objCustomers = new clsCustomers(); objCustomers.LoadCustomers(); ViewData["Customers"] = objCustomers; return View(); }

In the same manner we have coded for the other controller.

So when we call the URL http://localhost:1935/Home/Home  you will see the following figure. 

So when we call the http://localhost:1935/Customer/ViewCustomerWithOutSales  action you will see the following page without sales. 

When we go to the URL http://localhost:1935/Customer/ViewCustomerWithSales  you will see the data without sales.