Getting Started With ASP.NET MVC - Part Three

Introduction

This article explains the basics of ASP.NET MVC and explains Razor View Engine in MVC, HTML Helper in MVC, Action verbs, and different types of view results. Here, we will learn about getting started with ASP.NET MVC. Read the previous  articles before reading this article.

• Getting Started With ASP.NET MVC - Part One
• Getting Started With ASP.NET MVC - Part Two

What is ASP.NET MVC

MVC is an architectural pattern. It separates the application into three main components. They are Model, View, and Controller. It handles specific development aspects of an application. MVC is the most frequently used industry-standard web development framework.

Razor View Engine in MVC

View Engine is responsible for rendering the view into HTML form to the browser. The Razor view was introduced with ASP.NET MVC 3. It is default view engine now. Razor provides a streamlined syntax for expressing views. It minimizes the amount of syntax and extra characters. Write HTML and server-side code in web pages using C# or VB.NET.

Razor page contains “.CSHTML” extension. Razor syntax starts with “@{“ and end with “}”. Each line ends with a semicolon. We can add all server-side code using a razor. A simple example for razor syntax is below.

Example

@{
    int a, b, c;
    string add;
    a = 10;
    b = 20;
    c = a + b;
    add ="Addition Is :" +  @c;
    <h2>@add</h2>
}

Output

HTML Helpers in MVC

HTML Helper is a Class. We can create HTML Controls programmatically using HTML helpers. HTML Helpers are used in View to render HTML content. HTML Helpers are more lightweight as compared to ASP.NET Web Form controls. It is a normal HTML control as well as very fast compared to traditional controls.

Normally, when we request to enter the web page, server control converts into the HTML control and renders the browser so here it's taking time to respond to the given request. If we are using HTML helper controls it will not take time to convert to an HTML control because it defaults to HTML controller.

namespace System.Web.Mvc
{
    //
    // Summary:
    //     Supports the rendering of HTML controls in a view.
    public class HtmlHelper
    {
        public static readonly string ValidationInputCssClassName;
        public static readonly string ValidationInputValidCssClassName;
        public static readonly string ValidationMessageCssClassName;
        public static readonly string ValidationMessageValidCssClassName;
        public static readonly string ValidationSummaryCssClassName;
        public static readonly string ValidationSummaryValidCssClassName;
        public HtmlHelper(ViewContext viewContext, IViewDataContainer viewDataContainer);
public HtmlHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection);
    }

Many HTML helper controllers are available. We can see the below list.

HTML Helper

• TextBox
• TextArea
• CheckBox
• RadioButton
• DropDownList
• ListBox
• Hidden
• Password
• Display
• Label
• Editor
• ActionLink

HTML Helper Strongly Type

• TextBoxFor
• TextAreaFor
• CheckBoxFor
• RadioButtonFor
• DropDownListFor
• ListBoxFor
• HiddenFor
• PasswordFor
• DisplayFor
• LabelFor
• EditorFor

Sample Example

We have created a sample form using HTML helper controls.

<h2>HTML Helper Controler</h2>
<table border="1">
    <tr><td>Name    </td><td>@Html.TextBox("Name")</td></tr>
    <tr><td>Address </td><td>@Html.TextArea("Address")</td></tr>
    <tr><td>Language</td><td>Tamil @Html.CheckBox("Tamil") English @Html.CheckBox("Tamil")</td></tr>
    <tr><td>Gender  </td><td>Male @Html.RadioButton("Gender", "Male") Female @Html.RadioButton("Gender", "Female")</td></tr>
</table>

Output

In the above example, we can see the syntax for HTML helper controller. HTML helper controller after rendering the browser is changed to normal HTML. Go to the browser and right-click on any HTML controller go to “Inspect Element”. We can see how it looks in the  below screenshot.

Sample HTML Code

<h2>HTML Helper Controler</h2>
<table border="1">
    <tbody>
        <tr><td>Name    </td><td><input id="Name" name="Name" type="text" value=""></td></tr>
        <tr><td>Address </td><td><textarea cols="20" id="Address" name="Address" rows="2"></textarea></td></tr>
        <tr><td>Language</td><td>Tamil <input id="Tamil" name="Tamil" type="checkbox" value="true"><input name="Tamil" type="hidden" value="false"> English <input id="Tamil" name="Tamil" type="checkbox" value="true"><input name="Tamil" type="hidden" value="false"></td></tr>
        <tr><td>Gender  </td><td>Male <input id="Gender" name="Gender" type="radio" value="Male"> Female <input id="Gender" name="Gender" type="radio" value="Female"></td></tr>
    </tbody>
</table>

Different Type of View Results

Action Result is a result of action methods or return types of action methods. A programmer uses different action results to get the expected output. Action Results returns the result to view the page for the given request.

Definition

Action Result is a result of action methods or return types of action methods. Action result is an abstract class. It is a base class for all type of action results.

Types of Action Results

There are different Types of action results in ASP.NET MVC. Each result has a different type of result format to view page.

• View Result
• Partial View Result
• Redirect Result
• Redirect To Action Result
• Redirect To Route Result
• JSON Result
• File Result
• Content Result

We can refer to the below link for knowing about more different types of view results.

• Different Types Of Action Results In ASP.NET MVC

Conclusion

This article explained about Razor View Engine in MVC, HTML Helper in MVC, Action verbs, and different types of view results. I hope this is very helpful for new learners. The next article explains about getting started in ASP.NET MVC part 4.