Learn MVC (Model view controller) Step by Step in 7 days – Day 2

So, what’s the agenda?

Lab 6:- Unit test MVC projects

So what we will do in this section is we will create a simple MVC application and we will do unit test on the ASP.NET application using VSTS unit test framework.

Step1:- Create the simple display customer screen project

The controller class at the end of the day is a simple .NET class. For instance if you watch your project code closely, you can easily see the customer controller class as shown below.

 Collapse | Copy Code

public class CustomerController : Controller
{
...
....
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = 12;
objCustomer.CustomerCode = "1001";
objCustomer.Amount = 90.34;

return View("DisplayCustomer",objCustomer);
}
}

Step 2:- Add a simple unit test project

Let’s use our VSTS unit test framework to test the controller class. In case you are a complete fresher to VSTS unit testing we would request to see this article to get a hang of unit testinghttp://www.codeproject.com/KB/cs/VSTSTesting.aspx  . Add a new project to your solution using the test project solution template.

Step 3:- Add appropriate project references

We need to add reference to the MVC application in our unit test project so that we can get hold of the controller class.




Once you add the references you should see the MVC application in your project references as shown in the below figure.

Step 4:- Write the unit test

 Collapse | Copy Code

[TestMethod]
public void DisplayCustomer()
{
CustomerController obj = new CustomerController();
var varresult = obj.DisplayCustomer();
Assert.AreEqual("DisplayCustomer", varresult.ViewName);
}

Step 5 :- Finally run the unit test

On the test view right click on the test and run the selected test case as shown below.




If everything goes well you should see green color indicating that the test has passed or else you should see a red color with details regarding why the test failed.




So what’s in the next Lab

Lab 7:- Understanding MVC routing

Introduction

Adding further to the complication we can have multiple URL’s mapped to one controller or you can have more than one controller mapped to a single URL. For instance you can have www.questpond.com/contactus  andwww.questpond.com/aboutus  mapped to a single controller called as “AboutUsController”.

It would be great if we have some kind of mechanism by which we can configure these mappings. That’s what exactly MVC routing is meant for. MVC routing helps to easily configure and map the URL with the controllers.

Step 1:- Take the MVC project created in Day 1.

Step 2 :- Change global.asax.cs

All routing mapping are stored in to a collection called as ‘routes’. This collection belongs to the namespace “System.Web.Routing”. To add a route you need to call the ‘MapRoute’ method and pass three parameters “name”,”url” and “defaults”.

Below is a print screen of the snippet of the ‘maproute’ function.



“Name” is the key name by which the route will be identified from the collection.

“Url” defines what kind of URL format we want to connect with the controllers. For instance in the below code snippet we are saying that “View/ViewCustomer” is the URL format.

“Defaults” defines the controller class and action functions which will be invoked when the URL is called. For instance in the below code we are saying that when “View/ViewCustomer” is called it will invoke the “Customer” controller class and the action function invoked will be “DisplayCustomer”.

In case your controller takes parameters you can use the “{“brackets. For instance in the below code snippet we have used “{“to specify that we can have “id” parameter.

If you want to define the parameter as optional you can use the “UrlParameter.Optional” enum.

The first thing is comment the default mapping code. We will explain the default mapping code later.

 Collapse | Copy Code

//routes.MapRoute(
// "Default", // Route name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id = 
UrlParameter.Optional }); // Parameter defaults

 Collapse | Copy Code

routes.MapRoute(
"View", // Route name
"View/ViewCustomer/{id}", // URL with parameters
new { controller = "Customer", action = "DisplayCustomer", 
id = UrlParameter.Optional }); // Parameter defaults

 Collapse | Copy Code

public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = 12;
objCustomer.CustomerCode = "1001";
objCustomer.Amount = 90.34;

return View("DisplayCustomer",objCustomer);
}

Step 3:- Run the application

If you remember we commented the default entry route. Let’s understand what exactly this default code meant.

"{controller}/{action}/{id}" defines that URL will be automatically named with the convention of controller name / function action name / value. So if you have a controller class with ‘Customer” and action function as “Search” then the URL will be structured as http://xyz.com/Customer/Search  automatically.

 Collapse | Copy Code

//routes.MapRoute(
// "Default", // Route name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id = 
UrlParameter.Optional }); // Parameter defaults

So what’s in the next Lab

Lab 8:- Validating and setting default values to MVC URLS

Step 1:- Create a simple customer model

 Collapse | Copy Code

public class Customer
{
public int Id { set; get; }
public string CustomerCode { set; get; }
public double Amount { set; get; }
}

Step 2:- Create the controller class

 Collapse | Copy Code

public class CustomerController : Controller
{
List<Customer> Customers = new List<Customer>();
//
// GET: /Customer/
public CustomerController()
{
Customer obj1 = new Customer();
obj1.Id = 12;
obj1.CustomerCode = "1001";
obj1.Amount = 90.34;

Customers.Add(obj1);

obj1 = new Customer();
obj1.Id = 11;
obj1.CustomerCode = "1002";
obj1.Amount = 91;
Customers.Add(obj1);

}

[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];

return View("DisplayCustomer",objCustomer);
}
}

 Collapse | Copy Code

[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];

return View("DisplayCustomer",objCustomer);
}

Step 3:- Apply validation using regex on the MVC routes

In case you are new to regular expression we would advise you to go through this video on regular expressionshttp://youtu.be/C2zm0roE-Uc?hd=1

 Collapse | Copy Code

routes.MapRoute(
"View", // Route name
"View/ViewCustomer/{id}", // URL with parameters
new { controller = "Customer", action = "DisplayCustomer", 
id = 0 }, new { id = @"\d{1,2}" }); // Parameter defaults

Step 4:- Test if it works

So now that we are done with the validation using the ‘maproute’ functions, it’s time to test if these validations work.

So in the first test we have specified valid 1 and we see that the controller is hit and the data is displayed.



If you try to specify value more than 100 you would get error as shown below. Please note that the error is confusing but it’s the effect of the regex validation which is specified on the maproute function.



If you try to specify a non-numeric value you should again get the same error which confirms that our regex validation is working properly.

The most important point to note is that these validations are executed even before the request reaches the controller functions.

So what’s in the next lab

Lab 9:- Understanding MVC outbound URLs

Introduction

Ideally the actions should direct which page should be invoked. So the hyperlink should have actions in the anchor tags and not the page names i.e. direct view name.

Step 1:- Create views

Let’s create a simple navigation between these 3 pages as shown below. From the home view we would like to navigate to about and product view. From about and product view we would like to navigate back to the home view.

Step 2 :- Create controller for the views

 Collapse | Copy Code

public class SiteController : Controller
{
//
// GET: /Site/

public ActionResult GotoHome()
{
return View("Home");
}

public ActionResult AboutUs()
{
return View("About");
}

public ActionResult SeeProduct()
{
return View("Product");
}
}

Step 3:- Provide actions in the link

 Collapse | Copy Code

This is products
<a href="GotoHome">Go Home</a><br />
<a href="Aboutus">About us</a><br />

 Collapse | Copy Code

<%= Html.ActionLink("Home","Gotohome") %>

 Collapse | Copy Code

This is About us
<a href="GotoHome">Go Home</a><br />
<a href="SeeProduct">See Product</a><br />

This is home page
<br />
<a href="SeeProduct">See Product</a><br />
<a href="Aboutus">About us</a><br />

 Collapse | Copy Code

</div>

Step 4:- Enjoy your navigation

Once you have specified the actions inside the link you navigate between home, about and products page.

While navigating you can see how the URL’s are pointing to the actions rather than absolute page names like home.aspx, aboutus.aspx etc which violates the complete MVC principle.

What’s for third day?