The 3 Musketeers: - Model, View and Controller using HTTP Handler – Part 1

Questpond
Posted by in ASP.NET category on for Advance level | Views : 10915 red flag
Rating: 5 out of 5  
 1 vote(s)

In this section we will learn about the basics of MVC and then see how we can implement the same in ASP.NET using HttpHandlers.


 Download source code for The 3 Musketeers: - Model, View and Controller using HTTP Handler – Part 1

The 3 Musketeers: - Model, View and Controller using HTTP Handler – Part 1

Introduction and Goal

Warning


Pre-requisite

The world is about Action, Format and data

The Problem of tight coupling and solution

Implementing MVC in ASP.NET

The easy musketeer Model

The second musketeer: - The view


The third tough musketeer: - Controller

The Web.Config file and the HttpHandler section
 

Introduction and Goal
 

In this section we will learn about the basics of MVC and then see how we can implement the same in ASP.NET using HttpHandlers.

For past some days I have been writing and recording videos in design patterns, UML, FPA, Enterprise blocks and lot you can watch the videos at http://www.questpond.com 

You can download my 400 .NET FAQ EBook from http://www.questpond.com/SampleDotNetInterviewQuestionBook.zip
 

Warning
 

Microsoft has released the ASP.NET MVC framework and the second tutorial will talk about that. In this tutorial we will try to understand how we can implement MVC on pure ASP.NET. This will make our fundamentals more clear when we see the ready made framework of MVC ASP.NET.
 

Pre-requisite
 

We would suggest you to read the concept of HttpHandlers and HttpModules. You can read my article on the same http://www.codeproject.com/KB/aspnet/HttpModuleandHttpHandle.aspx
 

The world is about Action, Format and data
 

When we talk about any project its all about action, depending on action the user sees some data in some kind of format. Let’s take up a small three liner customer project requirement shown below:-

• User goes to the home page.
• User can see customer data with sales figure.
• User can see customer data with out sales figure.

From the requirement you can typically classify three entities one is the action, second the view depending on the action and third the data to be displayed for the particular action and format.
 

The above figure shows how the action, view and model / data will work together to fulfill our requirements. We have three actions from the above requirement one the user can go to home page, second he can view the customer with sales and third he can view the customer with out sales. Every of this action is mapped to view / web page which need to be displayed. For instance when the user does the action ‘GotoHome’ he will be shown ‘Home.aspx’ page. Every view will use the model to get data. Currently for the ‘Home.aspx’ there is no model but the customer views will connect with the model to display the data.

The final table we conclude is as below.
 

Action View   Data
GotoHome Home.aspx  NA
ViewCustomerWithOutSales  DisplayCustomerWithOutSales.aspx Customer Model
ViewCustomerWithSales DisplayCustomerWithSales.aspx  Customer Model

 

The Problem of tight coupling and solution
 

If we closely visualize the above problem we can figure the two big tight couplings one is the action with the view and the view with the model i.e. data. In practical scenarios we can always think about many views which can tie up to same models and many actions resulting the same view. So if decouple them we can avoid redundant coding and a better reusable framework.
 

So what we do is we give this work of co-ordination to a third party i.e. the controller. Now all the actions are sent to the controller. The work of the controller is to update and load the model and then tie that model with the view depending on the action.
 

Implementing MVC in ASP.NET
 

We will take the same example of the three liner customer project which we discussed previously. Below is a visual view of things and how it will move. If the action is ‘GotoHome’ , ‘Home.aspx’ page will be shown with two links one is to view customer with sales and the other is to view customer with out sales. If the action is ‘ViewCustomersWithOutSales’ it will display a simple view where the customer details are shown with out sales figure. If the action is ‘ViewCustomerWithSales’ it will show a display of customer with its sales figure.
 

The easy musketeer Model
 

Let’s first understand the model part of the MVC. This is the simplest part to start with and then we will proceed towards more complicated things like controller and views. Model is nothing but a class which will provide necessary data source to the views.

The below code shows a customer data. It has three properties customer name, address and the sales amount to the customer.

 

public class clsCustomer
{
private string _strCustomerName;
private string _strAddress;
private double _dblSales;
public string CustomerName
{
set
{
_strCustomerName = value;
}
get
{
return _strCustomerName;
}
}
public string Address
{
set
{
_strAddress = value;
}
get
{
return _strAddress;
}
}
public double Sales
{
set
{
_dblSales = value;
}
get
{
return _dblSales;
}
}}
 

 

Correspondingly I have made a collection where I will be loading some dummy records. In real projects this class will connect to the database to load data. To keep the article simple I have hardcoded data in the customer collection.
 

public class clsCustomers : CollectionBase
{
public clsCustomers()
{
}
public void LoadCustomers()
{
Add("Shiv", "Mulund", 20);
Add("Raju", "Mumbai", 20);
Add("Manish", "Delhi", 20);
Add("Lalu", "Nepal", 20);
Add("Khadak", "Ratoli", 20);
Add("Shaam", "Ghatkopar", 20);
}
void Add(string strCustomerName, string strAddress, double dblSales)
{
clsCustomer objCustomer = new clsCustomer();
objCustomer.Address = strAddress;
objCustomer.CustomerName = strCustomerName;
objCustomer.Sales = dblSales;
List.Add(objCustomer);
}
}

 

The second musketeer: - The view


We have three files in our view Home.aspx, DisplayCustomerWithOutSales.aspx and DisplayCustomerWithSales.aspx. Home.aspx is pretty simple and only has the links.

The ‘DisplayCustomerWithOutSales.aspx’ will bind the customer’s data given by the controller. Controller will pass the data using the ASP.NET context.
 

public partial class DisplayCustomerWithOutSales : System.Web.UI.Page
{
clsCustomers objCust;
protected void Page_Load(object sender, EventArgs e)
{
objCust = (clsCustomers) Context.Items["Customers"];
dtgWithOutSales.DataSource = objCust;
dtgWithOutSales.DataBind();
}}
 



The ‘DisplayCustomerWithSales.aspx’ also has the same code you can see the same in the source code attached with this tutorial.
 

The third tough musketeer: - Controller
 

We would suggest you to read the concept of HttpHandlers and HttpModules. You can read my article on the same http://www.codeproject.com/KB/aspnet/HttpModuleandHttpHandle.aspx 

For every action we have a controller class. In real projects you can always map multiple actions to one controller class. To make the tutorial simple I have kept one controller for every action.

The controller will do three things:-
• Load the model
• Pass the model to the view.
• Load the view and send it to the end user

Below is the home handler class. As it’s not tied up with any data it does not call any model and just invokes the view.

public class clsHomeHandler : IHttpHandler
{
public void ProcessRequest(System.Web.HttpContext context)
{
context.Server.Transfer("./view/Home.aspx");
}
public bool IsReusable
{
get
{
return true;
}
}
}
 



Customer with out sales controller class. This loads the model and adds the model data in the context. If you remember in the view code snippet the data is taken from the context. After that it just loads the view i.e. ‘DisplayCustomerWithSales.aspx’.

 

public class clsHandlerCustomerWithSales : IHttpHandler
{
public void ProcessRequest(System.Web.HttpContext context)
{
clsCustomers objCustomers = new clsCustomers();
objCustomers.LoadCustomers();
context.Items.Add("Customers", objCustomers);
context.Server.Transfer("./view/DisplayCustomerWithSales.aspx");
}
public bool IsReusable
{
get
{
return true;
}
}
}


 

The third controller is customer with out sales. The code is self explanatory as it maps with the previous code snippet logic.
 

public class clsHandlerCustomerWithOutSales  : IHttpHandler
{
public void ProcessRequest(System.Web.HttpContext context)
{
clsCustomers objCustomers = new clsCustomers();
objCustomers.LoadCustomers();
context.Items.Add("Customers", objCustomers);
context.Server.Transfer("./view/DisplayCustomerWithOutSales.aspx");
}
public bool IsReusable
{
get
{
return true;
}
}
}

 

The Web.Config file and the HttpHandler section
 

In Web.config file we just map the action with the handlers. The actions are nothing put paths currently.

 

<httpHandlers>

<add verb="*" path="GoToHome" type="Controller.clsHomeHandler, Controller"/>

<add verb="*" path="ViewCustomersWithOutSales" type="Controller.clsHandlerCustomerWithOutSales, Controller"/>

<add verb="*" path="ViewCustomersWithSales" type="Controller.clsHandlerCustomerWithSales, Controller"/>

</httpHandlers>


So ‘GoToHome’ invokes the home page as shown in the below figure



‘ViewCustomersWithSales’ action invokes the data with sales.

 

Action ‘ViewCustomerWithOutSales’ invokes the customer data without sales figures.

 

 We have also attached the MVC source code for better understanding , please feel free to download the same and utilize it.

Page copy protected against web site content infringement by Copyscape

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)