Share via

ASP.NET MVC: Getting Started (Part 3)

  • Article

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 result. Here, we can learn

Getting Started with ASP.NET MVC part three. Read the previous part of the articles before reading this article.

What is ASP.NET MVC

MVC is an architectural pattern. It separates the application into three main components. The three compounds 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 the 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 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 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 render the browser so here taking time to response the given request. If we are using HTML helper controls will not take time to convert as HTML control because it defaults 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);
    }

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

HTML Helper

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

HTML Helper Strongly Type

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

Sample Example

We have created 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

Above example, we see the syntax for HTML helper controller. HTML helper controller after rendering the browser it is changed as normal HTML. Go to the browser and right-click on any HTML controller go to “Inspect Element”. We can see the looks like 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 return 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 below link for know about the more different type of view results.

Conclusion

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

See Also