MVC

Before looking into how to use the HTML helper methods in MVC Views let’s first understand what are the problems that HTML helpers solves.

HTML helpers have a very specific use which is to generate the HTML for the containing view. In any web page we need a form element which may contain some child HTML elements like the input fields to enable the user to provide input values and  interact with our application.

Though we can write the html elements ourselves,after all html elements consists of simple opening and closing tags, but the HTML helpers generates html tags for us and we don’t have to write all the boilerplate code. If we take the example of the form tag ,it is written as

<form action="”url”" method="”get”"> </form>

The action attribute points to the url to which our web page will be submitted while the method attribute can be Get or Post.

If we write the above HTML then we need to verify if our url is correctly refering to the action method in the controller which complies with the routes defined by our application

We can generate the similar html using the BeginForm() html helper.But if we use the BeginForm() html helper method then the generated form tag will use the correct routing configuration for the action method.Also if the routing configuration changes in our application BeginForm()  will take care of it.

So following are the benefits of  HTML helpers over writing the html elements ourselves.

• We don’t have to worry about forgetting the closing tag or any any other markup as the html is generated by another well tested component  the “HTMLHelper method” which ensures that only valid html is generated.
• Writing html elements by hand in a large enterprise application can get tedious. We don’t  need to write boilerplate code again and again.
• HTML helpers provides few features by default like encoding attribute values to prevent cross site scripting attacks ,generated url’s points to the correct server resources and binding the html elements to the model object so the model changes are reflected in the html elements.

HTML helpers are implemented as methods which generate chunk of HTML.Helper methods can be accessed in a view using the HTML property.Every view has an implicit base class.In the case of razor views it is WebViewPage and for the WebForms views it is ViewPage which defines the HTML property for which all the extension methods are defined ,so the helper methods are accessible via the HTML property in all the views which we create.

There are two versions of the HTML helper methods the normal html helper methods and strongly typed.The difference is that the normal HTML helpers are unaware of the model for the view while the strongly typed version knows about the model.

As the strongly typed version is aware of the model so any changes in the model such as changing the name of the property or removing a property are recognized.So an advantage of using the strongly typed helper methods is that errors such as typing wrong property name are caught at compile time instead of runtime.

Another advantage of the strongly typed methods is that we get the visual studio intellisense support which is not available for the normal helper methods.

We will see common HTML helpers along with the strongly typed versions and the html elements that they generate.

@Html.BeginForm   The BeginForm helper method generates the form element.It posts to a controller action method which we can specify as the method parameters.The following BeginForm() method will post to the EmployeeDetails  method of the Home Controller.

@using (Html.BeginForm("EmployeeDetails", "Home"))
{

}

If we don’t specify a value for the action method and controller parameters then by default the BeginForm() method posts to the same action method and controller which returned the view.

Html helpers for form elements have a normal strongly typed version.Unlike normal html helper methods in which we pass a string literal ,we pass a model object as lambda expression parameter to the strongly typed methods.

@Html.TextBox   We can use the TextBox helper method to generate input field for the user.It renders the input html tag with the type attribute set to “text”.

It has different overloads which we can use to specify different properties like html attributes and the format.We can use the following overload to specify the name ,value and the html attributes for the textbox.

@Html.TextBox(String nameOfTextBox, Object value, Object htmlAttributes)

If we call the method with  the below argument values

@Html.TextBox("name", "john", new { id = "nameId" })

we get the following html rendered by the helper .Since we have explicitly set the value of the id attribute in the helper above it is rendered in the input tag.If we don’t explicitly set the value of id then the id value will be same as the name.

<input id="nameId" name="name" type="text" value="john" />

Strongly typed version of the TextBox helper is TextBoxFor().So to render a textbox for name property we use the TextBoxFor() helper as

@Html.TextBoxFor(model => model.name)

As with other strongly typed helper methods it expects a lambda expression.

 @Html.DropdownList and @Html.Listbox   These  are used to generate the list with multiple values from which user can select single or multiple values,dropdownlist allows single selection while listbox helper selects multiple selection.Both of these helpers are rendered as a select element.The difference between the two is that dropdownlist helper method renders a dropdown list in which only a single item can be selected while listbox helper renders a list which allows to select multiple items at a time.

We can use the DropDownList method to render a list containing three items in which the item with value 3 is selected as

@Html.DropDownList("courses", new SelectList(
new List<Object>{
new { Text = "Computers", Value = 1 },
new { Text = "Electronics", Value = 2 },
new { Text = "Mechanical", Value = 3}
},
"Value",
"Text",
3))

We get the following dropdown on executing the view containing the above code.Mechanical list item is selected as we have given the select index as 3 above.

If we want to create  a listbox instead of dropdownlist we can use the listbox helper method as

@Html.ListBox("courses", new SelectList(
new List<Object>{
new { Text = "Computers", Value = 1 },
new { Text = "Electronics", Value = 2 },
new { Text = "Mechanical", Value = 3}
},
"Value",
"Text",
3))

The following listbox is rendered by the above listbox helper method.

@Html.Password  This renders an input password field ,in which user typed value is masked so that it is not visible on screen. To generate a password field having id password we can use the following helper method
@Html.Password(“password”)

in the generated input field entered values are not visible on screen

The above Password helper renders the following input element
<input id=”password” name=”password” type=”password” />

@Html.Hidden This renders a hidden field with id and value being set with the method arguments.If we have a id field in our model then we can use the following to set the field with its value.
@Html.Hidden(“id”)

The following input element will be generated by using the above helper method.The value is set as 1 below as it is the value of the id field in the model.

<input id="id" name="id" type="hidden" value="1" />

We can use the strongly typed method also to set the hidden field with the id value as

@Html.HiddenFor(model=>model.id)

If we want to set the hidden field with some other value then we can pass the value explicitly as

@Html.Hidden("id","11")

@Html.RadioButton   HTML Radiobutton displays a list of choices from which user can select a single value.Radiobuttons are usually placed in a group with each each radio button having the same name.We can use the RadioButton helper to generate the html radio buttons.

Below we are creating radio buttons for three products from which user can select a single product.We have passing the same name to the three helper methods so that the rendered radio buttons will belong to the same group.To the second  method we are passing the value true for the third argument as we want the tv radio button selected by default.

<span>computer</span> @Html.RadioButton("product", "computer")
<span>tv</span> @Html.RadioButton("product", "tv", true)
<span>mp3</span> @Html.RadioButton("product", "mp3")

The above methods displays a group of radio buttons.

Following html is rendered by the above methods

<input id="product" name="product" type="radio" value="computer" />
<input checked="checked" id="product" name="product" type="radio" value="tv" />
<input id="color" name="product" type="radio" value="mp3" />

We can bind the htmlhelper method to a model property using the strongly typed version.So if we have a model property called product

@Html.RadioButtonFor(model => model.product, "1")
@Html.RadioButtonFor(model => model.product, "2")
@Html.RadioButtonFor(model => model.product, "3")

 @Html.CheckBox  This renders a checkbox which user can select or deselect.It acts as a true/false field. To render a checkbox with name print we can use it as

@Html.CheckBox("print")

If we want to make the rendered checkbox selected by default then we can pass the value true to the second argument.

@Html.CheckBox("print",true)

The strongly typed version binds to a boolean model property.If we have a boolean model property print then we can call the method as

@Html.CheckBoxFor(model=>model.print)

@Html.ActionLink   We can create an HTML link using this helper method.This is one of the most useful methods since it takes care of the routing information .Routes are not only responsible for matching the incoming urls but also helps generate outgoing urls,which are urls which are generated as a part of our view rendering.

For example if we want to render a hyperlink which posts to the Details action of the Home controller then we will use the following

@Html.ActionLink("Employee Details","Details","Home")

The first parameter above is the link text, and the second parameter is the name of the controller action.

It renders the following HTML:

<a href="/Home/About">About this Website</a>

The above link is generated by checking the routing information defined by our application.So we should use the ActionLink() helper for generating the outgoing urls instead of hardcoding the urls in our views.

@Html.ValidationSummary   This is used to show the errors to the user.It renders a list which contains the errors which are contained in the ModelState dictionary.

In the action method we can add the errors in the ModelState dictionary.We can add the errors as model errors or as property errors.

ModelState.AddModelError("", "This is a Model error");  //model error
ModelState.AddModelError("propertyerror", "This is a Property error"); //property error

To display the errors we can use the helper method as

@Html.ValidationSummary(false)//displays model errors
@Html.ValidationSummary(true)//displays property errors

So as we have seen above Html helper methods in MVC renders html markup.They also help avoid code redundancy and provide few features like encoding out of the box.

If we need some functionality which is not covered by the the inbuilt helpers we can create our own helper methods.

Follow on:

In the last articles we looked at the roles and responsibilities of Controller and Routing in MVC application.View is another component which is an important part of any MVC application.It is one of the pillars of Model View Controller framework.

Views in MVC have a very specific responsibility, to generate the result ,which is mostly HTML, for the request.Most of the times action methods return views though they can return other types as well ,such as Json and File.

Though View generates the result for the user but View can be directly accessed only by the controller.Controller gives the view model data and any other information which needs to be returned to the user.

View is a template which just defines the layout of the HTML which will be rendered.As the view needs to generate the HTML from the model provided to it by the controller ,view contains server side code also apart from the HTML markup.The code which is in the view is specific to the view engine.Webforms view engine has a different code syntax then the razor view engine.As the razor view engine has more fluent syntax so we will consider razor views only.We will create a view and look into the important features of the view.

We add a new Details action method in the Home controller.

public ActionResult Details(int id)
{
return View();
}

The above code just adds an action method to the controller.The statement return View() is a helper method which returns an object of type ViewResult. ViewResult is a type which helps the ViewEngine render the View.The View() method will render a view with the same name as the action name.So in this case it will search for the Details view.As no Details view exists currently so we have to add the Details view.To add the view right click anywhere inside the Details action method.Following options will be displayed on right clicking inside the method.

We need to select the Add View option to add a new view.On selecting Add view we get the dialog to select view options

We will keep the default settings for now and click the Add button.This will create a view with the name Details.cshtml in the Views/Home folder.

The view was created in the folder Views/Home because the framework expects the view for an action method inside a folder which has the name of the Controller,in this case as the controller name is Home so the View is located inside a folder with the name controller.The file extension is .cshtml which is the file extension for razor views.

Following is the content of the Details.cshtml view.

@{
ViewBag.Title = "Details";
}

<h2>Details</h2>

Though the default view does not contain much but we can understand two important points about  a view from the above code

• View is just a template which contains code and markup.
• View has access to few objects and properties which we can use to set or get the information in the view. ViewBag is one such object.

Let us now see the significance of the above points to a view.

View as a template 

One of the main things to remember while working with views is that the purpose of the view is to generate the HTML which will be returned to the client.Though view may contain the code to format and display the information provided to it by the client but the client works with HTML and is not aware of the actual view contents.View is not even accessible directly by the client ,unlike the webforms which can be directly accessed by the client.

Though client is not aware of the code and other view contents ,understanding what is contained in a view is important if we want to have control over the HTML that is generated by the view.

A view can contain the following elements

• Code in the form of code expressions or code blocks.
• HTML markup

Code expressions are used for writing the response to the output.Below is an example of code expression

@ViewBag.Message

The above expression causes the value contained in the ViewBag.Message property to be written to the response.ViewBag is a property of a dynamic type which is accessible in both the view and the controller.

@ is the character which  specifies to the view engine that the following text is code and not markup.We can easily mix the code expressions and the markup as:-

<span> Hello  @ViewBag.Message </span>

Code blocks are used to include c#(or vb) statements  in a view.Code blocks are declared using curly braces {}.

@{
var message = "Hello razor!";
}

One of the advantages of using razor views is the fluent syntax it provides.We can very easily transition from code to mark and vice versa.

Passing data from Controller to View

ViewBag is just one of the few ways we can use to pass the data from the controller to the view.Other ways we can pass the data from the controller to the view is using the ViewData and the Model.As all of these objects are accessible from both the controller and the view ,so we can pass the information from the controller to the view using these.

For understanding this better,below is an action method from which we are passing the same data using the ViewData ,Model and ViewBag.

public ActionResult Details()
{
ViewBag.Message = "Hello razor view!";
ViewData["Message"] = "Hellow razor view";
ViewInformation info = new ViewInformation { Message = "Hellow razor view" };
return View(info);
}

We can access the different values in the view as

@ViewBag.Message <br/>
@ViewData["Message"] <br />
@(((ViewInformation)Model).Message)

The above view just displays the text “Hello razor view!”, three times from the different objects.Though we can use the different objects to pass the data from the controller to the view each should be used depending upon the scenario

ViewBag is a dynamic type so it doesn’t require a cast ,as we can see in the above example.The type of the ViewBag property is determined at runtime.

ViewData is a collection of objects so it can be used to pass multiple objects ,but requires type cast while retrieving the values.

Model is used to a pass a model object which represents an entity for which the view is defined.We can pass specific information to the view which is defined by the model class.We can create strongly type view to avoid casting the model objects in the view.

Lets see how we can create a strongly typed view.

We use Model object to pass the information from the controller to the view when

• We have a set of related information ,for instance we have an entity with different properties.
• We want to aggregate data from different sources such as different database table and want to display the aggregated data to the end user.

If we try to access the Model object from the View we face following challenges

• The View does not provide intellisense
• We need to type convert the Model associated to the View.

The above points  are addressed in a strongly typed view.

 There is no intellisense support for normal view

 Strongly typed view provides intellisense

To create a strongly typed view we just need to add the following statement at the top of the view file.

@model ClassName

For example if we want to create a strongly typed view for a model class called ViewInformation then we can use the following statement

@model ViewInformation

We can pass the model object from the action method as before but now the view is aware of the type it is working with and type mismatches are caught at compile time instead of runtime.

Some of the other important things to be remembered while working with views are:-

• Normal views implicitly inherit from the WebViewPage class ,while strongly typed views inherit from the WebViewPage<T> class ,which is a strongly typed version of the same class.
• While using strongly typed view we can access the Model object as an action method parameter instead passing many different parameters for the different form elements.For example if our strongly typed view is typed for the ViewInformation class then when we submit the view we can access the entire object as an action method parameter as below

public ActionResult Update(ViewInformation viewInformation)
{

•     We can use layout views to define the basic layout of all the views in our application and to make the layout consistent across the application.The default layout view is called _Layout and is located in the Views/Shared folder.
•     Partial Views are used as a part of another view.They define pieces of HTML which becomes part of the parent  view.This makes it easy to define an HTML template and use it in multiple views in the application.This avoids duplication.

Follow on:

As we have seen in the last article , Controller in MVC application is the component which takes care of the user input ,as well as defines the application logic.It performs operations on the model and then selects the view to render.

Routing has it’s own specific responsibility.It acts as the interface between the clients request and the Controller which serves the request.As the client does not request any specific page,as in the case of web form pages ,so the responsibility of Routing component is more important in MVC.Without the Routing component there is no way that the request can be mapped to a particular controller.A URL such as http://www.ecommerce.com/product/1  have no meaning by itself ,it is only because of the routing component that our application is able to handle the request.

Routing subsystem contains a collection of routes.Each route contains the information on what all requests the route will match and which controller and action method will handle the request.

1.What requests the route will match is identified by the url pattern defined by the route.

2.Which controller and action method will handle the request is identified by the {action} and {controller} parameters declared by the route.

We will look at the default route created when we create a new MVC application and see how the route handles the two points mentioned above.

Create a MVC project and open the RouteConfig.cs file in the App_Start folder.

It contains a RegisterRoutes method defined as

public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}

RegisterRoutes method is called from the Application_Start method when the application starts

As we can see above a routecollection object ,routes, is being passed to the RegisterRoutes method.This collection object contains all the routes defined by our application.
RouteCollection class defines a method called MapRoute which is used to add new routes to the route collection.

Before moving ahead lets see what is a route.Routes are what we define to handle the requests that our application receives.Route has few important characteristics

Route is identified by a name
Route has a URL pattern which is used to match the URL’s that the route will handle.
URL pattern can consist of route parameters which are just variables which are populated by values from the URL.
Route can define default values for the route parameters.

If we take the example of the default route ,there is a named parameter url being passed to the MapRoute method.It has the value “{controller}/{action}/{id}”.This pattern has three segments.

We can identify each segment by the “/” character .The forward slash (“/”) character separates each segment in the URL pattern.The segments in this pattern are all route parameters.The route parameters are just placeholders and are identified by curly braces {} .Each segment can contain literal values or the placeholders or a combination of both.

So the following url pattern is perfectly valid.

url:"{segment1}/{segment1}/{segment3}"

The important point is that the above url pattern will match any url having three segments.This answers the first point that we discussed above What requests the route will match

So our new url pattern will match url’s such as

http://xx/yy/zz

Though the pattern we have defined above is perfectly valid but it is not of any use as it will not forward the request to any controller class and action method.If we look at the default route pattern it is defined as

"{controller}/{action}/{id}"

The {controller} and {action} placeholders have spacial meaning in MVC as they represent the controller and the action method which will handle the request.So if we make a request using the url http://Home/Index then the Index method in the Home controller is invoked.The first segment corresponds to the controller name and the second  segment corresponds to the action name which will handle the request.

So now we know that Who will handle the request is identified by the {action} and {Controller} route parameters.

Though we have declared the inbuilt {action} and {controller} parameters above but we can declare our own parameters in the route pattern.We can pass values to action method using these.So we can declare a {name} route parameter like

"{controller}/{action}/{name}"

The value of the name parameter will be fetched from the url and will be used to populate  the action method parameter name.

We have seen what is url pattern in a route and how the route identifies the action method and the controller which will handle the request.There are few other things that should be considered when declaring routes

Default parameter values      We can define the default values for the route parameters defaults parameter.If the url does not contain a segment specified in the url method argument then the value we have supplied to the defaults argument will be used for the {action} and {controller} parameters.

As we have seen earlier our default route is defined as

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

The defaults argument values will be used used for both the controller and the action method if we don’t supply values for these.If we look into the project properties the project Url is defined as below.So if we run the application the url requested is the application root url  or “/”.The reason that the Index action in the Home controller is executed is because of the defaults argument which sets the value of Controller as Home and action as Index.

 

Order matters while adding the routes to the route collection The routes which we add to the route collection are matched with an incoming request in the order in which we add them.So the incoming URL will match the first route we added to the collection and if the match is found then it will not try to match the url with the url patterns of the other routes.So if we define a generic url pattern which would be matched with any url  at the beginning of the route collection then our remaining routes will not be matched to the incoming url.

So as we have seen routing is an important component in mvc application which maps the requests to the action methods which handles the request.

 

Follow on:

Controller is one of the most important component in an MVC application since it acts as a coordinator between the view and the model and also handles the users requests.The user’s request is received by the controller which requests the model to perform different CRUD operations ,based on the request, and then decides the result to return to the user.

In the case of web forms there is a direct relationship between the URL and a file on the server’s hard drive as the requested file is requested by the user and is part of the URL.

In MVC there is a decoupled relationship between the requested URL and the controller class used to serve the request.The client just makes a request using a URL and it’s the responsibility of the MVC application to pass the request to the appropriate component or the controller which will handle the request.

This decoupling makes changing the URL structure easy as the user is not aware of the file which actually serves the request.This is also good from the encapsulation point as the internal details of the application are not exposed to the outside world.

The mapping between the URL and the controller class,which will handle the request, is the responsibility of the URLRouting module which is an HTTPModule.

 

WebForms page is executed when requested by the browser

              The routing module in mvc decouples the controller from the request

From the URLRoutingModule the request is passed to the Controller which contains the action methods which actually handles the request.Once the request reaches the controller ,it decides the model on which to perform the operation and then decides the result which needs to be returned to the client.

Usually we have a controller class for every major feature our application provides.

So controller is where we write the code to serve the requests.Following are some of the important characteristics of controllers.

1.Controller classes and Interface Framework requires that all controller classes inherit from the IController interface .The IController interface specifies a single method called Execute() which receives a RequestContext object.

MVC makes it easier for us to implement controller by providing a base class called Controller which implements the IController interface.So we can inherit from the Controller class instead of writing all the boilerplate code required to implement the IController interface.ControllerBase is the parent class of Controller class and implements the basic controller functionality. ControllerBase also implements the IController’s  Execute() method.

Our Controller class derives from the base Controller class

We derive our controller class,which contains the application logic, from the Controller class which derives from the ControllerBase class.Both the Controller class and the ControllerBase class implements functionality which is required by our controller class.

ControllerBase implements the IController interface ,which is required to be implemented by all controllers in MVC.Also it defines a few important properties that we can access from the action method such as

• ViewData  To pass the data to the view using a dictionary object
• ViewBag    To pass the data to the view using dynamic property
• TempData   To pass the data across the controllers

Controller class inherits the above properties from the ControllerBase class and also provides its own useful properties such as

[table id=8 /]

 2. Action Methods     Controller classes that we define by inheriting from the Controller class expects us to define the application logic in different action methods.Each action method corresponds to a URL and is invoked when the URL is requested by the client.

                                         Different URL’s are handled by the different Action Methods of a Controller class

The action method to execute is selected by the ActionInvoker component of MVC.It implements the IActionInvoker interface. The default ActionInvoker provided by the framework selects the action method by the action method name.

3. Filters for implementing the Cross cutting concerns   Cross-cutting concern refers to the functionality which is supposed to be used in many different parts of the application.If we take the example of logging then different parts of the application may need access to the logging functionality.To cleanly implement the cross cutting concerns we must reuse the common functionality instead of redefining the same functionality in different places.

Cross cutting concerns are implemented in MVC by using filter attributes.Instead of duplicating the common functionality in different controllers and action methods ,filters define the common functionality.So we can easily apply the cross cutting concerns  by decorating the action methods and controllers with attributes.These attributes in-turn invokes the attribute class.

Commonly used filter attributes are

[table id=5 /]

4. ActionResult   Instead of returning the result to the user ,action method instead returns the ActionResult which specifies the result that has to be returned to the user.ActionResult returned by the action method is an object of a class deriving from ActionResult class.This is an example of a command pattern which encapsulates the operation so that it can be passed to other methods in the application.This decouples the object that is handling the responsibility of per froming an action from the object which wants to perform the action.So the responsibility of the action method is just to return the ActionResult ,it is executed later in the request pipeline.

As the ActionResult is an abstract class ,framework provides different ActionResult derived classes for returning different types of results from the action method.There are different ActionResult types such as ViewResult,RedirectResult,JsonResult .

The action method can directly create and return the ActionResult instance as

public ActionResult Create()
{
ViewResult result = new ViewResult();
return result;
}

But instead of creating the ViewResult instance directly in the action method we can use the helper methods provided by the Controller class from which our controller classes derives.So to return the ViewResult we can use the helper method as

public ActionResult Create()
{
return View();
}

Some of the ActionResults and helper methods are

[table id=6 /]

So as we have seen Controllers in MVC are responsible for handling the application logic.We can use the framework provided controller classes or if we need fine grained control we can create and plugin a new controller class by directly implementing the IController interface.

Follow on: