Getting Started with Razor View Engine in MVC 3

There are two points; one is that UserRegisterModel is bound because we create a strongly typed view and another is the master layout has been implemented on a new view by the Layout property in the code block. Here "ViewBag.Title" is assigned a string value "UserRegister" that is the title of the page so whenever we want to modify the title of the page then we just modify the value of the "ViewBag.Title" property.

Before going into detail of view design, we need a little bit of the idea of HTML Helpers in MVC. HTML Helpers are much like traditional ASP.NET Web Form controls. An HTML Helper, in most cases, is just a method that returns a string. We will use three methods of HTML Helpers as in the following.

• LabelFor: It is a method of the LabelExtensions class under the "System.Web.Mvc.Html" namespace that returns an HTML label element. The model property displays text and the attribute value in the specified expression for the UI. It is an extension method of the HtmlHelper instance.
• For example when the model Name property is used in the "LabelFor()" method then it's rendered in HTML-like.

  <label for="Name">Name</label>
  

• TextBoxFor: It is a method of the InputExtensions class in the "System.Web.Mvc.Html" namespace that returns an HTML text input element. The model property is used for id and name attribute values. The Input element type property sets "text" by the "TextBoxFor()" method. It is also an extension method for the HtmlHelper instance. It also shows a model property value in TextBox. For example when the model Name property is used in the "TextBoxFor()" method then it's rendered in HTML-like.

  <input id="Name" name="Name" type="text" value="" />  

• PasswordFor: It is a method of the InputExtensions class in the "System.Web.Mvc.Html" namespace that returns an HTML password input element. The model property is used for id and name attribute values. The Input element type property sets "password" by the "PasswordFor()" method. It is also an extension method for the HtmlHelper instance. It also shows the model property value in TextBox. For example, the model Password property is used in the PasswordFor() method and it's rendered in HTML-like.

  <input id="Password" name="Password" type="password" />

To design the user registration form we create a stylesheet "BaseStyleSheet.css" under the Content folder.

.formRowContainer {
    width: 100%;
    padding-top: 10px;
}
.labelContainer {
    padding-top: 2px;
    float: left;
    min-width: 155px;
}
.valueContainer {
    float: left;
}
.buttonContainer {
    padding-top: 5px;
    padding-left: 155px;
}
.clearStyle {
    clear: both;
}

Then we give a to this CSS in this view and add code in the view "UserRegister.cshtml" to create the user registration form. We are creating a registration form so all the forms will exist in <form> </form> tags but in MVC we create the entire form in an "html.BeginForm()" code block that is rendered in a <form> tag that has a controller action method in the action attribute value and a method will be used in a HttpPost request to submit data.

@model UserRegistrationApplication.Models.UserRegisterModel
@{
    ViewBag.Title = "UserRegister";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="@Url.Content("~/Content/BaseStyleSheet.css")" rel="stylesheet" type="text/css" />

<h2>User Register Form</h2>

@using(Html.BeginForm())
{
    <div>
        <div class="formRowContainer">
            <div class="labelContainer">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="valueContainer">
                @Html.TextBoxFor(model => model.Name, Model.Name)
            </div>
        </div>
        <div class="clearStyle"></div>

        <div class="formRowContainer">
            <div class="labelContainer">
                @Html.LabelFor(model => model.Password)
            </div>
            <div class="valueContainer">
                @Html.PasswordFor(model => model.Password, Model.Password)
            </div>
        </div>
        <div class="clearStyle"></div>

        <div class="formRowContainer">
            <div class="labelContainer">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="valueContainer">
                @Html.TextBoxFor(model => model.Email, Model.Email)
            </div>
        </div>
        <div class="clearStyle"></div>

        <div class="buttonContainer">
            <button>Register</button>
        </div>
    </div>
}

Our view is ready. Press F5 or run the application to show the form on a browser screen. Now the result on the screen is:

Oh, we get an HTTP 404 error (The resource cannot be found) for our URL http://localhost:3581/. It's not good that we do a lot of stuff for this application and the application doesn't run successfully. But don't worry, we should be happy that we get an error from our code because each error teaches us something more.

Now open the Global.asax.cs file from Solution Explorer in Visual Studio and look at the "RegisterRoutes()" method. This method defines the application route for the URL and it is called on application startup. According to the "RegisterRoutes()" method our application's default controller is "Home" and the default controller action method is "Index" but we don't define this in our user Registration application so we get the error that the resource cannot be found. To remove this error we have two options, one is to set a static hard-coded string value in the "MapRoute()" method parameter of the RouteCollection instance in the "RegisterRoutes()" method for the UserRgisterController controller and the action method and another option is to pass a controller and action method in the URL in the browser. We chose the second option because each application has multiple pages where the Home controller is the default controller and the Index is the default action method for controllers.

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
    );
}
protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    RegisterGlobalFilters(GlobalFilters.Filters);
    RegisterRoutes(RouteTable.Routes);
}

Now give the user register controller and action method URL http://localhost:3518/UserRegister/UserRegister in a browser request. Or we can change the "MapRoute()" method parameter in a "RegisterRoutes()" method of a RouteCollection instance as in the following.

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "UserRegister", action = "UserRegister", id = UrlParameter.Optional } // Parameter defaults
    );
}

After that, I click on the Register button to show my data. Where is my input data? To show the input data I want to clarify a few things. When we access a view from a browser then the browser request looks at the HttpGet action method in the controller but when we send a request by button click then the request looks at the HttpPost action method in the controller. If we don't define explicitly the path of the action method then it looks at the default action method that has the same name as the view name. To show our form data we create an action method in the controller that has a parameter that is a model that passes from the view to the controller on postback and we get data from that model in the action method.

[HttpPost]
public ActionResult UserRegister(UserRegisterModel model)
{
    System.Text.StringBuilder sbMessage = new System.Text.StringBuilder();
    sbMessage.Append("Your Name is: " + model.Name + "</br>");
    sbMessage.Append("Your Password is: " + model.Password + "</br>");
    sbMessage.Append("Your Email is: " + model.Email + "</br>");
    return Content(sbMessage.ToString());
}

Thereafter we get the result on a button registration click. Our URL does not change, in that case, only the content will change.

It was our basic example of the MVC Razor View Engine.

Using Data Annotation Validator Attribute to Perform Validation

We use validator attributes to perform validation. The "System.ComponentModel.DataAnnotations" namespace includes the following validator attributes.

• Range: Enables you to validate whether the value of a property falls between a specified range of values.
• ReqularExpression: This enables you to validate whether the value of a property matches a specified regular expression pattern.
• Required: Enables you to mark a property as required.
• StringLength: This enables you to specify a maximum length for a string property.
• Validation: The base class for all validator attributes.

Now we implement three attributes (Required, StringLength, and RegularExpression) out of five attributes on our UserRegisterModel model so we need to modify our existing model.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
namespace UserRegistrationApplication.Models
{
    public class UserRegisterModel
    {
        [DisplayName("User Name")]
        [Required(ErrorMessage = "Name can not be blank")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Password can not be blank")]
        [StringLength(6, ErrorMessage = "Password should be equal or less than 6 characters")]
        public string Password { get; set; }

        [Required(ErrorMessage = "Email can not be blank")]
        [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Email is not Valid")]
        public string Email { get; set; }
    }
}

Here we are using DisplayName also to display the custom name for the Name field, in other words on the UI screen the model Name property label will have "User Name" as a text value. Here we defined a custom message for string length and regular expression so that the UI screen shows our custom message when validation is applied, otherwise, we get the default error message of the data annotation validator attribute.

We applied a data annotation validator attribute on the model properties that would show the message on the UI screen so we need to add a "ValidationMessage()" method of the HtmlHelper class for each field and we also modified our view as in the following

@model UserRegistrationApplication.Models.UserRegisterModel
@{
    ViewBag.Title = "UserRegister";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="@Url.Content("~/Content/BaseStyleSheet.css")" rel="stylesheet" type="text/css" />

<h2>User Register Form</h2>

@using(Html.BeginForm())
{
    <div>
        <div class="formRowContainer">
            <div class="labelContainer">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="valueContainer">
                @Html.TextBoxFor(model => model.Name, Model.Name)
                @Html.ValidationMessage("Name")
            </div>
        </div>
        <div class="clearStyle"></div>

        <div class="formRowContainer">
            <div class="labelContainer">
                @Html.LabelFor(model => model.Password)
            </div>
            <div class="valueContainer">
                @Html.PasswordFor(model => model.Password, Model.Password)
                @Html.ValidationMessage("Password")
            </div>
        </div>
        <div class="clearStyle"></div>

        <div class="formRowContainer">
            <div class="labelContainer">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="valueContainer">
                @Html.TextBoxFor(model => model.Email, Model.Email)
                @Html.ValidationMessage("Email")
            </div>
        </div>
        <div class="clearStyle"></div>

        <div class="buttonContainer">
            <button>Register</button>
        </div>
    </div>
}

We are using "ValidationMessage()" of the HTMLHelper class that takes an argument in string form that is the property name in the model and shows an error message defined in the model property when the model is not valid on submitting the form. We need to check that the model is valid in the action method under the controller so we update our existing post-action method in the UserRegisterController controller.

[HttpPost]
public ActionResult UserRegister(UserRegisterModel model)
{
    if (ModelState.IsValid)
    {
        System.Text.StringBuilder sbMessage = new System.Text.StringBuilder();
        sbMessage.Append("Your Name is: " + model.Name + "</br>");
        sbMessage.Append("Your Password is: " + model.Password + "</br>");
        sbMessage.Append("Your Email is: " + model.Email + "</br>");
        return Content(sbMessage.ToString());
    }
    else
    {
        return View(model);
    }
}

Here we used an If condition to determine whether the UserRegisterModel model is valid. If the model is valid according to validation then the if block will be executed otherwise it will be executed. Now we run our MVC UserRegistrationApplication to test validation. We perform two tests, one for the required field message and another for the custom validation message. First of all, we leave blank all TextBoxes on the form and submit the form by the registration button click. We get the result below.

Now we perform another test by inserting the wrong values in input fields and submitting the form by the registration button click.

I hope that we have learned the basics of Razor View Engine in MVC 3 so we take a look at why it is better than the aspx view engine.

Why use Razor View Engine over aspx view engine

1. The Razor View Engine makes writing dynamic content on our MVC views easier because we don't need to use the "<% %>" formatting as we do with the default view engine (aspx view engine).
2. It reduces code when doing a loop for the generation of a list on a view because we don't need so many "<%: %>" to get items in a list compared to "@" in Razor.
3. Here we can define a section the same as a Content PlaceHolder.
4. Here we use just Layout pages instead of Master Pages.
5. "@helper" functions for really easy creation of functions that emit markup.
6. "@model" keyword for specifying your view's model type without having to write a "<%@ Page" directive with the full class name.
7. Razor View Engine supports TDD (Test Driven Development) because it does not depend on the "System.Web.UI.Page" class.

Conclusion

This article is a runway for MVC beginners who can run their learning jet plan to fly in MVC technologies. I hope this article has helped you to understand the basics of the MVC Razor view engine.