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.

Read Also:  Asp.Net Clear all controls value reset

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”}))
Read Also:  How to Open URL in New Tab using c#

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”}))
Read Also:  Get Dynamically connection string in app.config file c#

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. Read Also:  Difference Between Managed and Unmanaged Code in C#.NET
  2. Read Also:  ASP.NET AJAX partial postback in UpdatePanel control
  3. Read Also:  Laravel Create Custom Helper Class Example
  4. Read Also:  ASP.NET Page life cycle with Events
  5. Read Also:  C# Named and Optional Arguments Tutorial with Examples
  6. Read Also:  Create User Login System using C# Examples
  7. Read Also:  ASP.NET Page life cycle with Events
  8. Read Also:  Create User Login System using C# Examples
  9. Read Also:  Asp.Net Clear all controls value reset
  10. Read Also:  Get Responsive navbar menu to Automatically close after anchor link clicked