ASP.NET MVC Notes - Part Two

In the previous article, you learned the basic and important concepts of Asp.Net MVC.

Part 1 article link:

• ASP.NET MVC Notes - Part One

In Part 2 you will learn the following things:

• What is Html Helper?
• Types and Uses of @Html Helper
• Difference between @Html.Helper and @Html.HelperFor
• Listing of @Html.Helper
• Sample code for each HTML helper

What is HTML Helper?

HTML helper helps to create the control. HTML helper binds model property values to control. All HTML helper controls are derived from System.Web.Mvc.HTML namespace. All HTML helper controls are classes and have separate extension methods.

Example

@HTML.Label(“")

@HTML.Label from LabelExtension class with Extension method under System.Web.Mvc.HTML namespace.

In the above screenshot, you can see LabelExtensions class which has the various flavors of Label HTML helpers.

Types and Uses of @Html Helper

There are three types of Html helpers:

• Inline Html Helpers.
• Built-in Html Helpers.

• Normal Html Helper (Loosely Typed)
• Strongly Typed Html Helper.
• Templated Html Helper.

• Custom Html Helper.

Inline Html Helpers

Group of code which can be reused within the same view.

Built-in Html Helpers

Built-in HTML helpers are further divided into two parts:

1. Html Helper
2. Strongly Typed Html Helper.
3. Templated Html Helper: This HTML helper generates HTML based on properties of the model class.

Custom Html Helper

A user can design as per the requirement of project or logic.

Html Helper generates HTML tag. As you know, the browser only understands HTML, CSS, and Javascript. Using strongly typed HTML helper you can directly bind your view with the model. When the user submits a form all fields/controls values are available to POST method. Afterward, there are two or three ways to retrieve the values of view in the controller (Control values while form submitted).

Microsoft introduced HTML helper in MVC pattern because:

1. Html Helper is lightweight.
2. There is no ViewState existence in MVC.
3. It's easy to use opensource technologies like this.

You can visit the following link for more information on HTML helper namespace: https://msdn.microsoft.com/en-us/library/system.web.mvc.html(v=vs.118).aspx

Nowadays people are using client-side and various JS frameworks to manipulate DOM (Document Object Model)

Built-In HTML Helper

Further divided into two major types:

1. @HTML.Helper
2. @HTML.HelperFor 

Difference between @Html.Helper and @Html.HelperFor

@Html.Helper	@Html.HelperFor
1. There is no model binding.	1. You can bind to the model.
2. No compile time checking.	2. Because this is strongly typed this can be checked in compile time. Totally interacts with Model.
3. Less preferable	3. Highly preferable.

Listing of @Html.Helper for the following HTML elements.

Anchor linkCheckBoxDrop-down listHidden FieldLabelMultiple-select (ListBox)PasswordRadioButtonTextAreaTextBox 

Now we go through one by one the above Html elements with @Html.Helper

Anchor link

To create HTML anchor link with HTML helper. Syntax: @Html.ActionLink(“Link Text Display on UI”, “Action Method”,”Controller Name”) 

Example

@Html.ActionLink("Bachelor in Science ( IT )", "IT","Bsc")

Html Code Generated

<a href="/Bsc/IT">Bachelor in Science ( IT )</a>

UI Output

Note
@Html.ActionLinkFor is not available for the ActionLink element by default. 

MSDN Link for more Details

https://msdn.microsoft.com/en-us/library/dd492124(v=vs.118).aspx?cs-save-lang=1&cs-lang=csharp#code-snippet-1 https://msdn.microsoft.com/en-us/library/system.web.mvc.html.linkextensions.actionlink(v=vs.118).aspx

CheckBox

To create HTML checkbox with HTML helper Syntax: @Html.CheckBox(“CheckboxName”, “Boolean for Checked or Not”) True for selected and False for not selected. 

Example

<b>Please select your programming language:</b>
<br />
C# @Html.CheckBox("C#", true)
<br />
VB.Net @Html.CheckBox("VB.Net", true)
<br />
Java @Html.CheckBox("Java", false)
<br />
Python @Html.CheckBox("Python", false)
<br />
Visual Foxpro @Html.CheckBox("Visual Foxpro", true)

Html Code Generated

<b>Please select your programming language:</b>
<br /> C#
<input checked="checked" id="C_" name="C#" type="checkbox" value="true" />
<input name="C#" type="hidden" value="false" />
<br /> VB.Net
<input checked="checked" id="VB_Net" name="VB.Net" type="checkbox" value="true" />
<input name="VB.Net" type="hidden" value="false" />
<br /> Java
<input id="Java" name="Java" type="checkbox" value="true" />
<input name="Java" type="hidden" value="false" />
<br /> Python
<input id="Python" name="Python" type="checkbox" value="true" />
<input name="Python" type="hidden" value="false" />
<br /> Visual Foxpro
<input checked="checked" id="Visual_Foxpro" name="Visual Foxpro" type="checkbox" value="true" />
<input name="Visual Foxpro" type="hidden" value="false" />

 UI OUTPUT

MSDN Link for more Details

https://msdn.microsoft.com/en-us/library/system.web.webpages.html.htmlhelper.checkbox(v=vs.111).aspx

Drop-down List

To create a dropdown list with HTML helper. 

Syntax

@Html.DropDownList(“DropDownListName”, SelectList object with Value, ”Text for Default Empty Item”)

Example

@Html.DropDownList("city", new SelectList(new[] { "Mumbai","Delhi","Kanpur","Jodhpur","Shirdi" }),"--Select City--")

Html Code Generated

City

<select id="city" name="city">
    <option value="">--Select City--</option>
    <option>Mumbai</option>
    <option>Delhi</option>
    <option>Kanpur</option>
    <option>Jodhpur</option>
    <option>Shirdi</option>
</select>

UI Output

After opening dropdownlist:   

MSDN Link for more Details

https://msdn.microsoft.com/en-us/library/system.web.webpages.html.htmlhelper.dropdownlist(v=vs.111).aspx 

Hidden Field

To create hidden field HTML element with HTML helper. 

Syntax

@Html.Hidden(“HiddenFieldName”, Object Value)

Object Value

It can be any data type. 

Example

@Html.Hidden("hdnfldYourCode","AP45Z25")

Html Code Generated

<input id="hdnfldYourCode" name="hdnfldYourCode" type="hidden" value="AP45Z25" />

UI Output

Hidden field is non ui element.

Label

To create a label with HTML helper. 

Syntax

@Html.Label(“LabelName”, “Text to display”)

Example

@Html.Label("lblText","Hello Dear Reader, How are you?")

Html Code Generated

<label for="lblText">Hello Dear Reader, How are you?</label>

UI Output

MSDN Link for more Details

https://msdn.microsoft.com/en-us/library/system.web.webpages.html.htmlhelper.label(v=vs.111).aspx

Multiple-select (ListBox)

To create multi-select (ListBox) with HTML helper. 

Syntax

@Html.ListBox(“ListBoxName”, list of items, html / css attributes)

Example

@Html.ListBox("lstBoxHobbies", new MultiSelectList(new [] {
    "Reading",
    "Chatting",
    "Boating",
    "Biking",
    "Waling",
    "Mountain Climbing"
}), new {
    @style = "height:150px;width:250px;"
})

Html Code Generated

Select Your Hobbies

<select id="lstBoxHobbies" multiple="multiple" name="lstBoxHobbies" style="height:150px;width:250px;">
    <option>Reading</option>
    <option>Chatting</option>
    <option>Boating</option>
    <option>Biking</option>
    <option>Waling</option>
    <option>Mountain Climbing</option>
</select>

 UI Output

MSDN Link for more Details

https://msdn.microsoft.com/en-us/library/system.web.mvc.html.selectextensions.listbox(v=vs.118).aspx

Password

To create a text box for receiving a password with HTML helper. 

Syntax

@Html.Password(“password field name”)

Example

@Html.Password("txtPassword")

Html Code Generated

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

UI Output

MSDN Link for more Details

https://msdn.microsoft.com/en-us/library/system.web.mvc.html.inputextensions.password(v=vs.118).aspx#M:System.Web.Mvc.Html.InputExtensions.Password%28System.Web.Mvc.HtmlHelper,System.String%29

RadioButton

To create radio button HTML element with HTML helper.    

Syntax

@Html.RadioButton(“RadioButtonName”,Object Value)

Example

Male @Html.RadioButton("rbGender","Male")
Female @Html.RadioButton("rbGender", "Femaile")

 Html Code Generated

Male <input id="rbtn1" name="rbtn1" type="radio" value="Male" />
Female <input id="rbtn1" name="rbtn1" type="radio" value="Femaile" />

UI Output

TextArea

To create input text area HTML element with HTML helper.     

Syntax

@Html.TextArea(“TextAreaName”, “Text Value of Text Area”)

Example

@Html.TextArea("txtareaRemarks","I am TextArea")

Html Code Generated

<textarea cols="20" id="txtareaRemarks" name="txtareaRemarks" rows="2">
    I am TextArea
</textarea>

 UI Output

 TextBox

To create input text box HTML element with HTML helper. 

Syntax

@Html.TextBox(“TextBoxName”, “TextBox Value”)

Example

@Html.TextBox("txtUserName","Suhana Ashish Kalla")

This example creates a textbox with a predefined value “Suhana Ashish Kalla.” Html Code Generated:

User Name

<input id="txtUserName" name="txtUserName" type="text" value="Suhana Ashish Kalla" />

 UI Output

My other Asp.Net MVC Articles

• DropDownList In ASP.NET MVC
• Set Paging Size In ASP.NET MVC
• Implementing Tiny Animated jQuery Chart Plugin With ASP.NET MVC
• ASP.NET MVC CRUD With Dapper (Micro ORM)
• Learn About ASP.NET MVC Routing

G

M

T

Detect languageAfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

AfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

Text-to-speech function is limited to 200 characters

Options : History : Feedback : Donate

Close