So, what's the
agenda?
This article is continuation to Learn MVC step by step
in 7 days. You can read the first day from
http://www.c-sharpcorner.com/UploadFile/shivprasadk/7858/
In day 2 we will look in do the following 4 labs.
- Writing unit tests on MVC projects.
- Configure MVC routings.
- Validating MVC routes.
- Configure MVC outbound routes.
In case you are completely a fresher I will suggest to
start with the below 4 videos which are 10 minutes approximately so that you can
come to MVC quickly.
So let's start with the above 4 labs one by one.
When we started this whole MVC series (
Day 1 ) we started with two concerns regarding behind code:-
- How can we do unit testing on the ASP.NET behind code?
- How can we reuse the ASP.NET behind code with different user interfaces?
In this section let's concentrate on the first point i.e. Unit testing.
Just a quick recap if we need to unit test the below method
"btngenerateinvoices_click" in ASP.NET behind code , we have the following
problems :-
- How do we create the sender and eventargs object?
- The below complete code runs under HttpContext object, how do I mimic them?
- What about ASP.NET UI controls , how do I access them ?
- What about other ASP.NET object like session object, application, how do I
access them?.
FYI: - Many developers would talk about mock test, rhino mocks etc but still
its cryptic and the complication increases with session variables, view data
objects, ASP.NET UI controls creating further confusion.
![1.jpg]()
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.
The first step is to create a simple MVC project. We
will use the same project which we have discussed in MVC (Model view controller)
day 1
http://www.c-sharpcorner.com/UploadFile/shivprasadk/7858/ . So in case you
do not have any sample project please create one using the link above.
![2.JPG]()
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.
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);
}
}
In simple words because this is a simple .NET class we
can easily instantiate the class and create automated unit tests for the same.
That's what exactly we are going to do in our next steps.
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 testing
http://www.c-sharpcorner.com/UploadFile/shivprasadk/VSTSTesting12042009060041AM/VSTSTesting.asp.
Add a new project to your solution using the test project solution template
![3.JPG]()
We need to add reference to the MVC application in our
unit test project so that we can get hold of the controller class.
![4.JPG]()
Once you add the references you should see the MVC application in your project
references as shown in the below figure.
Once you have added the references open the unit test
class i.e. 'UnitTest1.cs'. In this class create a simple test method called as
'DisplayCustomer' which is attributed by 'TestMethod' attribute as shown in the
below code snippet.
If you see the below code snippet we are creating object of the controller
class, invoking the controller action i.e. 'DisplayCustomer' and then checking
if the view name is 'DisplayCustomer'. If they are equal that means the test
passes or else it fails.
[TestMethod]
public
void DisplayCustomer()
{
CustomerController obj = new
CustomerController();
var varresult = obj.DisplayCustomer();
Assert.AreEqual("DisplayCustomer",
varresult.ViewName);
}
![6.JPG]()
Step 5 :- Finally run the unit
test
Once you have written your test case it's time to run
the test case by clicking on test , windows and then clicking test view.
![7.JPG]()
On the test view right click on the test and run the selected test case as shown
below.
![8.JPG]()
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.
![9.JPG]()
So what's in the next Lab
In the next lab we will discuss about MVC routing. MVC
is all about connecting the actions to the controllers and MVC routing helps us
to achieve the same. So be ready to get routed in our next tutorial.
![10.JPG]()
At the end of the day MVC is nothing but URL mapped to
controllers and controllers mapped to actions.
For example when a user sends a request URL like
www.questpond.com/locateproduct
from the browser, these actions are mapped with MVC controllers and MVC
controllers finally invokes those functions.
Below is a simple table which shows how the whole thing looks like.
![11.JPG]()
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 and
www.questpond.com/aboutus mapped to a single controller called as
"AboutUsController".
![12.JPG]()
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.
Let's take the same customer project we had discussed in
the previous section.
All route mappings are stored in the "global.asax.cs"
behind code file. So the first step is we need to go and change this file.
![14.JPG]()
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.
![15.JPG]()
"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.
//routes.MapRoute(
// "Default", // Route
name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id =
UrlParameter.Optional });
// Parameter defaults
Put the below code , which means when we call
http://localhost/View/ViewCustomer/ it will invoke the customer controller
and will call displaycustomer function.
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);
}
If you run the application you should see the below
display.
![16.JPG]()
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
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.
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.
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;
}
}
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.
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.
![17.JPG]()
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
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.
![18.JPG]()
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.
![19.JPG]()
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
![20.JPG]()
The most important point to note is that these validations are executed even
before the request reaches the controller functions.
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.
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.
![21.JPG]()
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.
Lets create three views as shown in the below figure "Home","About"
and "Product".
![22.JPG]()
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.
![23.JPG]()
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>
Once you have specified the actions inside the link you
navigate between home, about and products page.
![24.JPG]()
![25.JPG]()
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.
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.