HTML Helpers in Asp.Net MVC Razor View

  Total Views : 3668
  Comments : 0
 
  Keywords : Asp.net mvc html helpers with examples, Understand html helpers in asp.net mvc razor, Render for with html helpers in asp.net mvc, Basic & strongly type html helpers in asp.net mvc

Here we will learn what are the HTML helpers in asp.net mvc razor view, types of html helpers in asp.net mvc, basic html helper controls in asp.net, strongly type html helpers in asp.net mvc and how to create html helpers in asp.net mvc application with example. 

 

Generally in asp.net mvc we use html helpers in a view to render html content. In asp.net mvc html helper is a method that help us to return html content as a string. 

 

In any web application basic thing is to render html as output. In .NET we have ASP.NET Webforms and ASP.NET MVC frameworks to render html but they do rendering thing in different ways.

 

In ASP.NET Webforms we just drag and drop control on Form and in code behind .cs file we will bind data to server controls to display html content in page. In ASP.NET MVC we have only HTML Controls to display content in page.

 

If you came from ASP.NET Webforms development background you will think ASP.NET Webforms are better when compared with ASP.NET MVC because here you need to write bulk of HTML that will get render in browser and writing whole html will make developers bit crazy. To solve this problem ASP.NET MVC came up with HTML Helpers which will help us to render html in browser. The HTML helpers and server controls both are used to render html on browser.

 

In asp.net mvc applications if we use HTML helper it won't maintain any viewstate and loading time of website will reduce and page performance will increase drastically. In asp.net mvc razor view we have different type of HTML helpers avaliable those are

 

     1) Basic HTML helpers

 

     2) Strongly type HTML helpers

 

Following are the list of basic html helpers available in asp.net mvc 

 

  1. @Html.BeginForm
  2. @Html.EndForm
  3. @Html.TextBox
  4. @Html.TextArea
  5. @Html.Password
  6. @Html.Hidden
  7. @Html.CheckBox
  8. @Html.RadioButton
  9. @Html.DropDownList
  10. @Html.ListBox

Following are the list of strongly type html helpers available in asp.net mvc

 

  1. @Html.TextBoxFor
  2. @Html.TextAreaFor
  3. @Html.PasswordFor
  4. @Html.HiddenFor
  5. @Html.CheckBoxFor
  6. @Html.RadioButtonFor
  7. @Html.DropDownListFor
  8. @Html.ListBoxFor

Basic HTML Helpers in Asp.Net MVC Razor

Lets have simple example to see how to use basic helper controls in asp.net mvc. For this example we need to create following items in our asp.net mvc applicaiton

 

  1. Controller (UserController)
  2. View ( UserDetails)

Adding Controller (UserController) in Asp.Net MVC

Lets start with adding Controller and name it as UserController for that right click on Controllers folder à select Add à click on controller à Give name as UserController and select template as Empty MVC Controller and click add. Once our controller created that will be like as shown below

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Tutorial5.Controllers

{

public class UserController : Controller

{

//

// GET: /User/

public ActionResult UserDetails()

{

return View();

}

}

}

Adding View (UserDetails)

Now we will create a View with name UserDetails for that right click on UserController à select Add View and give name as UserDetails and click Add. Once we add view open it and use all Basic HTML helpers in side that view like as shown below

 

@{ Layout = null;}

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width"/>

<h2>UserDetails</h2>

</head>

<body>

<div>

<table style="width: 100px; border: 1px;">

@using (Html.BeginForm())

{ 

<tr>

<td>Textbox</td>

<td>@Html.TextBox("UserName")</td>

</tr>

<tr>

<td>TextArea</td>

<td>@Html.TextArea("UserAddress")</td>

</tr>

<tr>

<td>Password</td>

<td>@Html.Password("UserPassword")</td>

</tr>

<tr>

<td>Hidden field</td>

<td>@Html.Hidden("UserID")</td>

</tr>

<tr>

<td>CheckBox</td>

<td>@Html.CheckBox("Check")</td>

</tr>

<tr>

<td>RadioButton</td>

<td style="width: 20px;">@Html.RadioButton("gender", "Male", true)Male</td>

<td style="width: 20px;">@Html.RadioButton("gender", "Female", true)Female</td>

</tr>

<tr>

<td>DropDownList</td>

<td>@Html.DropDownList("DrpCountry", new List<SelectListItem> {

new SelectListItem { Text = "select", Value = "0" } ,

new SelectListItem   { Text = "India", Value = "1" },

new SelectListItem   { Text = "USA", Value = "2" }

})</td>

</tr>

<tr>

<td>ListBox</td>

<td>@Html.ListBox("ListName", new List<SelectListItem> {

new SelectListItem { Text = "One", Value = "1" },

new SelectListItem { Text = "Two", Value = "2" },

new SelectListItem { Text = "Three", Value = "3" }

})</td>

</tr>

<tr>

<td>DisplayName</td>

<td>@Html.DisplayName("DisplayName")</td>

</tr>

<tr>

<td>Editor</td>

<td>@Html.Editor("EditID")</td>

</tr>

}

</table>

</div>

</body>

</html>

If you observe above code we used all Basic HTML helper controls.  Generally our basic html helper controls syntaxes like as shown below  

Syntax of Basic HTML Helper Controls

Following are syntaxes of using  basic html helper controls in asp.net mvc application.

 

Textbox - @Html.TextBox("UserName")

 

TextArea - @Html.TextArea("UserAddress")

 

Password - @Html.Password("UserPassword")

 

Hidden field - @Html.Hidden("UserID")

 

Checkbox - @Html.CheckBox("Check")

 

Radiobutton - @Html.RadioButton("gender", "Male", true)Male

 

DropdownList - @Html.DropDownList("DrpCountry", new List<SelectListItem> {

 

                       new SelectListItem { Text = "select", Value = "0" } ,

                       new SelectListItem   { Text = "India", Value = "1" },

                       new SelectListItem   { Text = "USA", Value = "2" }

                       })

Listbox - @Html.ListBox("ListName", new List<SelectListItem> {

 

                       new SelectListItem { Text = "One", Value = "1" },

                       new SelectListItem { Text = "Two", Value = "2" },

                       new SelectListItem { Text = "Three", Value = "3" }

                      })

 

DisplayName - @Html.DisplayName("Displayname")

 

Editor - @Html.Editor("EditID")

 

Now if we run above code we will get basic html helper result like as shown below 

Basic html helpers output in asp.net mvc razor view example

Now we will learn strongly type HTML helpers in asp.net mvc razor

Strongly Type HTML Helpers in Asp.Net MVC Razor View

Let’s have simple example to use strongly type helper controls in asp.net mvc. To use strongly type html helpers in asp.net mvc example we need to create model, controller and view

 

       1) Model (UserModel)

 

       2) Controller (UserStronglyController)

 

       3) View (UserStronglyDetails)

Create Model with name UserModel

Now we will create model in our asp.net mvc application for that right click on Models Folder à Select Add à then select Class à now new pop up will open in that select class and give name as UserModel and click Add button. Now open UserModel file and write the code like as shown below 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Tutorial5.Models

{

public class UserModel

{

public int UserID { get; set; }

public string UserName { get; set; }

public string UserAge { get; set; }

public string UserAddress { get; set; }

public string UserMobileno { get; set; }

public bool Usergender { get; set; }

public int CheckID { get; set; }

 

public List<SelectListItem> listdropdown { get; set; } // for dropdownlist

public IEnumerable<Student> listboxdata { get; set; } //for Listbox

public string[] Listboxid { get; set; } //for Listbox

}

public classStudent// For ListBox

{

public string Id { get; set; }

public string Name { get; set; }

}

}

If we observe above code we created 2 classes. The First class (UserModel) is used for binding all Textbox and Dropdownlist related controls and also we created a list of students in side that will contain list of all student in UserModel. The Second class (Student) is used for binding Listbox in which I took ID and Name which will contain multiple data inside that for binding Listbox.

Add Controller (UserStronglyController)

Lets create new controller and name it as UserStronglyController for that right click on Controllers folder à select Add à click on controller à Give name as UserStronglyController and select template as Empty MVC Controller and click add. Now open our controller UserStrongController and write the code like as shown below

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Tutorial5.Models;

 

namespace Tutorial5.Controllers

{

public classUserStronglyController : Controller

{

[HttpGet] //decorating with http attributes

public ActionResult UserStronglyDetails()

{

UserModel u = new UserModel();

u.listdropdown = new List<SelectListItem>(){ // Filling Dropdownlist with data

new SelectListItem{Text ="select" , Value="0"},

new SelectListItem{Text ="one" , Value="1"},

new SelectListItem{Text ="two" , Value="2"},

new SelectListItem{Text ="three" , Value="3"}

};

u.listboxdata = new List<Student>(){ // Filling listbox with data

new Student{Name ="select" , Id="0"},

new Student{Name ="one" , Id="1"},

new Student{Name ="two" , Id="2"},

new Student{Name ="three" , Id="3"}

};

return View(u);

}

}

}

In controller we created an object of Model class (UserModel) and filled data in this List which we have created for binding Dropdownlist and Listbox and in last we are Returning a Model.

Add View (UserStronglyDetails)

After completetion of controller now we will create a View with name UserStronglyDetails and use strongly type HTML helpers in side that view for that we need to use Scaffolding technique. To add view Just right click inside controller a new dialog will popup à From that pop up dialog select Model class as UserModel and select Scaffold template as Create like as shown below

 

create model for strongly type html helpers in asp.net mvc application

 

It will generate code of all controls we need to configure according to our need. Here is the view which contains all strongly type HTML Helpers Controls

 

@model Tutorial5.Models.UserModel

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width"/>

<title>UserStronglyDetails</title>

</head>

<body>

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script src="~/Scripts/jquery.validate.min.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm())

{

@Html.ValidationSummary(true)

<fieldset>

<legend>UserModel</legend>

<div class="editor-label">

@Html.LabelFor(model => model.UserID)

</div>

<div class="editor-field">

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

@Html.ValidationMessageFor(model => model.UserID)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.UserName)

</div>

<div class="editor-field">

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

@Html.ValidationMessageFor(model => model.UserName)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.UserAge)

</div>

<div class="editor-field">

@Html.TextAreaFor(model => model.UserAge)

@Html.ValidationMessageFor(model => model.UserAge)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.UserAddress)

</div>

<div class="editor-field">

@Html.PasswordFor(model => model.UserAddress)

@Html.ValidationMessageFor(model => model.UserAddress)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.UserMobileno)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.UserMobileno)

@Html.ValidationMessageFor(model => model.UserMobileno)

</div>

<div class="editor-label">

@Html.Display("Checkbox")

</div>

<div class="editor-label">

@Html.LabelFor(model => model.CheckID)

</div>

<div class="editor-label">

@Html.Display("RadioButton")

</div>

<div class="editor-field">

@Html.RadioButtonFor(m => m.CheckID, true, new { @checked = "checked" })

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Usergender)

</div>

<div class="editor-field">

@Html.CheckBoxFor(m => m.Usergender)

</div>

<div class="editor-label">

@Html.Display("Listbox")

</div>

<div class="editor-field">

@Html.ListBoxFor(x => x.Listboxid, new SelectList(Model.listboxdata, "Id", "Name"))

</div>

<br/>

<div class="editor-label">

@Html.Display("DropDownList")

</div>

<div class="editor-field">

@Html.DropDownListFor(m => m.UserID, Model.listdropdown)

</div>

<p>

<input type="submit" value="Create"/>

</p>

</fieldset>

}

<div>

@Html.ActionLink("Back to List", "Index")

</div>

</body>

</html>

If you observe above code we used Strongly Type Html Helper Controls. Generally our strongly type html helper controls syntaxes like as shown below 

Syntax of Strongly Type HTML Controls

Following are the syntaxes of using strongly type html controls in asp.net mvc application

 

Textbox@Html.TextBoxFor(model => model.UserName)

 

TextArea@Html.TextAreaFor(model => model.UserAge)

 

Password@Html.PasswordFor(model => model.UserAddress)

 

Hidden field@Html.HiddenFor(model => model.UserID)

 

Checkbox@Html.CheckBoxFor(m => m.Usergender)

 

Radiobutton@Html.RadioButtonFor(m => m.CheckID, true, new { @checked = "checked" })

 

DropdownList@Html.DropDownListFor(m => m.UserID, Model.listdropdown)

 

Listbox@Html.ListBoxFor(x => x.Listboxid, new SelectList(Model.listboxdata, "Id", "Name"))

 

DisplayName@Html.DisplayFor(m => m.Listboxid)

 

Editor@Html.EditorFor(model => model.UserMobileno)

 

Now run application to see output of strongly type html helpers that will be like as shown below

 

Strongly type html helper asp.net mvc razor view example output

 

Finally we finished completed working with both basic Html Helper Controls and strongly type html controls asp.net mvc application.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User