ASP.NET MVC HTML Helpers Tutorial with Examples

ASP.NET MVC HTML Helpers Tutorial with Examples

Today, We want to share with you ASP.NET MVC HTML Helpers Tutorial with Examples.
In this post we will show you HTML Helpers in ASP.NET MVC with Example, hear for HTML Helpers In ASP.NET MVC we will give you demo and example for implement.
In this post, we will learn about Creating Custom HTML Helpers (C#) with an example.

Introduction

HTML Helpers in ASP.NET MVC is just a method that is used to render HTML in view(.cshtml).HTML Helper uses view engine in MVC. It posses many methods, using these methods we can create html controls like Text box, Check box, Radio button and so on.

You can also create your own HTML Helpers as per your need to render more complex HTML content such as a menu strip or an HTML table for displaying dynamic data coming from the database.

Different types of HTML Helpers

HTML Helpers in ASP.NET MVC are of three types as below

1. Inline Html Helpers

Inline Html Helpers are created in the same view by using the Razor @helper tag. The scope of this helpers is within the same view.

<div>
  @helper ListingItems(string[] items)
  {

<ol>
  @foreach (string item in items)
  {
<li>@item</li>
  }
  </ol>
  }

Colours:

  @ListingItems(new string[] { "Red", "Green", "Blue" })

Countries:

  @ListingItems(new string[] { "US", "UK", "Koria" })

Sports:

  @ListingItems(new string[] { "Cricker", "Tennis", "Golf" })
  </div>

2. Built-In Html Helpers

This type of Html Helpers are extension methods on the HtmlHelper class. Further these are divided into below categories.

i – Standard Html Helpers

Standard Html Helpers are used to render frequently used HTML tags like text boxes,text area,radiobuttons, checkboxes etc. A list of most common standard html helpers is listed below:

  • HTML Element : TextBox
    Example : @Html.TextBox("txtName", "val")
    OutPut : <input id="txtName" name="txtName" type="text" value="val" />
  • HTML Element : TextArea
    Example : @Html.TextArea("txtAddress", "val", 5, 15, null)
    OutPut : <textarea cols="15" id="txtAddress" name="txtAddress" rows="5">val</textarea>

In the same way you can use other control like below

  • @Html.Password(“txtPassword”, “val”)
  • @Html.Hidden(“hfStudentId”, “val”)
  • @Html.CheckBox(“chkTerms”, false)
  • @Html.RadioButton(“rbGender”, “val”, true)
  • @Html.DropDownList (“ddlGender”, new SelectList(new [] {“Male”, “Female”}))
  • @Html.ListBox(“lbSports”, new MultiSelectList(new [] {“Cricket”, “Chess”}))

ii – Strongly Typed HTML Helpers

These helpers can be use to render the frequntly used HTML elements in strongly typed view like as HTML text boxes, checkboxes etc. The HTML elements are created based on model properties.
The strongly typed HTML helpers work with a lambda expression.The view model object is passed as a value to a lambda expression, and any field or property from view model object to be used to set the id, name and value attributes of the HTML helper.

  • HTML Element : TextBox
    Example : @Html.TextBoxFor(m=>m.Name)
    OutPut : <input id="Name" name="Name" type="text" value="Name-val" />
  • HTML Element : TextArea
    Example : @Html.TextArea(m=>m.Address , 5, 15, new{}))
    OutPut : <textarea cols="15" id="Address" name="Address" rows="5">val</textarea>

In the same way you can use other control like below

  • @Html.PasswordFor(m=>m.Password)
  • @Html.HiddenFor(m=>m.ClientId)
  • @Html.CheckBoxFor(m=>m.IsActive)
  • @Html.RadioButtonFor(m=>m.IsApproved, “val”)
  • @Html.DropDownListFor(m => m.Gender, new SelectList(new [] {“Male”, “Female”}))
  • Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {“Cricket”, “Music”}))

3. Custom Html Helpers

As per your need you may also create your own custom helper methods by creating an extension method on the HtmlHelper class or by creating static methods with in a utility class.

JSON Fundamentals Tutorial with Examples

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about ASP.NET MVC HTML Helpers Tutorial with Examples.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   ASP.NET AJAX partial postback in UpdatePanel control
  2.   Remove Special Characters from String using C#
  3.   Laravel Create Custom Helper Class Example
  4.   C# convert Decimal to Binary octal hexadecimal Examples
  5.   jQuery Functions Not Working after PostBack in Asp.Net
  6.   C# Linq Left Outer Join using LINQ To SQL Tutorial
  7.   Angular 6 and ASP.NET Core 2.0 Web API Example
  8.   How to display cross domain json data using Jquery
  9.   How to Open URL in New Tab using c#
  10.   Read Connection String from Web.Config file in ASP.Net using C# and VB.Net