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

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

Below is the action function "DisplayCustomer" which will be invoked.

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 run the application you should see the below display.

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.

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

In the next lab we will discuss how to validate MVC URL. All actions to MVC come via MVC URL and even data is fed via MVC URL. So in the next section we will see how we can validate the data passed in the MVC URL.

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

MVC is all about action which happens via URL and data for those actions is also provided by the URL. It would be great if we can validate data which is passed via these MVC URL's.

For instance let's consider the MVC URL http://localhost/Customer/ViewCustomer . If anyone wants to view customer details for 1001 customer code he needs to enter http://localhost/Customer/ViewCustomer/1001 .

The customer code is numeric in nature. In other words anyone entering a MVC URL like http://localhost/Customer/ViewCustomer/Shiv is invalid. MVC framework provides a validation mechanism by which we can check on the URL itself if the data is appropriate. In this lab we will see how to validate data which is entered on the MVC URL.

Step 1:- Create a simple customer model

The first is to create a simple customer class model which will be invoked by the controller.

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

Step 2:- Create the controller class

The next step is to create a simple controller class which has collection of the customer model object which was created in step 1.

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);
}
}

The controller has a simple 'DisplayCustomer' function which displays the customer using the 'id' value. This function takes the 'id' value and looks up through the customer collection. Below is the downsized reposted code of the function.

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

return View("DisplayCustomer", objCustomer);
}

If you look at the 'DisplayCustomer' function it takes an 'id' value which is numeric. We would like put a validation on this id field with the following constraints:-

• Id should always be numeric.
• It should be between 0 to 99.

We want the above validations to fire when the MVC URL is invoked with data.

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

The validation described in the step 2 can be achieved by applying regular expression on the route map. If you go to global.asax file and see the maproute function on the inputs to this function is the constraint as shown in the below figure.

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

So in order to accommodate the numeric validation we need to the specify the regex constraint i.e. '\d{1,2}' in the 'maproute' function as shown below. '\d{1,2}' in regex means that the input should be numeric and should be maximum of length 1 or 2 , i.e. between 0 to 99.

You can specify default values by saying id=0 as shown in the below code snippet. So just in case if some one does not specify the value to the id it will take the value as zero by default.

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

One of the crucial things in any website development is defining navigations from one page to the other page. In MVC everything is an action and those actions invoke the views or pages. We can not specify direct hyperlinks like www.questpond.com/home.aspx , this would defeat the purpose of MVC. In other words we need to specify actions and these actions will invoke the URL's.

In the next lab we will look in to how to define outbound URL in MVC views which will help us to navigate from one page to other page.

Lab 9:- Understanding MVC outbound URLs

Introduction

When we talk about web applications end users would like to navigate from one page to other page. So as a simple developer your first thought would be to just give page names as shown in the below figure.

So for example if you want to go and browse from home.aspx to about.aspx give the anchor hyper link page name and things should be fine.

By doing that you are violating MVC principles. MVC principle says that hit should first come to the controller but by specifying <a href="Home.aspx"> the first hit comes to the view. This bypasses your controller logic completely and your MVC architecture falls flat.

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

Lets create three views as shown in the below figure "Home","About" and "Product".

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

Next step is to define controller actions which will invoke these views. In the below code snippet we have defined 3 actions "GotoHome" (this invokes home view), "Aboutus" ( this invokes the about view) and "SeeProduct" ( this invokes product view).

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

To invoke the actions rather than the views we need to specify the actions in the anchor tag as shown in the below code snippet.

This is products

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

If you want to create the anchor links using the HTML helper classes you can use the action link function as shown in the below code snippet.

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

The above code was for the products page , you can do the same type of navigations for the about us and the home page.

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

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

After writing so much I am out completely to think for 3rd day for now. Will update this section in a day or 2 , hope for co-operation.

Final note you can watch my .NET interview questions and answers videos on various sections like WCF, Silver light, LINQ, WPF, Design patterns, Entity framework etc.