Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

Asp.Net MVC

Learn step by step



Html Helper method in .Net MVC application

Html Helper:

  • To attach content to VIEW of .Net MVC application, Html Helper is used.
  • Html Helper is nothing at all but a method which returns string.
  • Html Helper could we used to produced standard HTML elements similar as Text Box, Label and many more.
  • All Html helper are also known as the Html property of view. For example to render a Text Box we get Html.TextBox() method.
  • Using Html helper method is elective. Its motive is to decrease scripting code.

The.NET MVC framework includes the following set of standard HTML Helpers:

  • Html.ActionLink()
  • Html.BeginForm()
  • Html.CheckBox()
  • Html.DropDownList()
  • Html.EndForm()
  • Html.Hidden()
  • Html.ListBox()
  • Html.Password()
  • Html.RadioButton()
  • Html.TextArea()
  • Html.TextBox()

An HTML Helper is only a method that render a HTML string. The string can denoted any kind of content that we want. For example, we can use HTML Helpers to render standard HTML tags like HTML <input>, <button> and <img> tags and many more.

We can also make your own HTML Helpers to render more complicated content such as a menu strip or an HTML table for showing database data.

Types of HTML Helpers
Inline Html Helpers

These are make in the same view by using the Razor @helper tag. These helpers can be recycled only on the same view.

@helper ListingItems(string[] items)
{
<ol>
@foreach (string item in items)
{
<li>@item</li>
}
</ol>
}

<h3>Programming Languages:</h3>

@ListingItems(new string[] { "C", "C++", "C#" })

<h3>Book List:</h3>

@ListingItems(new string[] { "How to C", "how to C++", "how to C#" })
Built-In Html Helpers

Built-In Html Helpers are reference methods on the HtmlHelper class. They are divided into three categories-

1.Standard Html Helpers

These helpers are used to deliver the most common kinds of HTML elements like as HTML text boxes, checkboxes and many more.A list of almost common standard html helpers is given below:


HTML Element Example
TextBox @Html.TextBox("Textbox1", "val")
Output: <input id="Textbox1" name="Textbox1" type="text" value="val" />
TextArea @Html.TextArea("Textarea1", "val", 5, 15, null)
Output: <textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>
Password @Html.Password("Password1", "val")
Output: <input id="Password1" name="Password1" type="password" value="val" />
Hidden Field @Html.Hidden("Hidden1", "val")
Output: <input id="Hidden1" name="Hidden1" type="hidden" value="val" />
CheckBox @Html.CheckBox("Checkbox1", false)
Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
RadioButton @Html.RadioButton("Radiobutton1", "val", true)
Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
Drop-down list @Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"}))
Output: <select id="DropDownList1" name="DropDownList1"> <option>M</option> <option>F</option> </select>
Multiple-selectHtml.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"}))
Output: <select id="ListBox1" multiple="multiple" name="ListBox1"> <option>Cricket</option> <option>Chess</option> </select>

2.Strongly Typed HTML Helpers

These helpers are used to deliver the most common types of HTML elements in potently typed view like as HTML text boxes, checkboxes etc. The HTML elements are generated based on model properties.


HTML Element Example
TextBox @Html.TextBoxFor(m=>m.Name)
Output: <input id="Name" name="Name" type="text" value="Name-val" />Output:
TextArea @Html.TextArea(m=>m.Address , 5, 15, new{}))
Output: <textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
Password @Html.PasswordFor(m=>m.Password)
Output: <input id="Password" name="Password" type="password"/>
Hidden Field @Html.HiddenFor(m=>m.UserId)
Output: <input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
CheckBox @Html.CheckBoxFor(m=>m.IsApproved)
Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
RadioButton @Html.RadioButtonFor(m=>m.IsApproved, "val")
Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
Drop-down list @Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"}))
Output: <select id="Gender" name="Gender"> <option>Male</option> <option>Female</option> </select>
Multiple-select Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"}))
Output: <select id="Hobbies" multiple="multiple" name="Hobbies"> <option>Cricket</option> <option>Chess</option> </select>

3.Templated HTML Helpers

These helpers figure out what HTML elements are needed to render based on properties of your model class. This is a very compromising approach for showing data to the user, although it needs some initial control and assistance to set up. To setup genuine HTML element with Templated HTML Helper,create use of DataType attribute of DataAnnitation class.

For e.g.,when we use DataType as Password, A templated helper automatically delivered Password type HTML input element.


Templated Helper Example
Display Renders a read-only view of the specified model property and selects an appropriate HTML element based on property’s data type and metadata.
DisplayFor Strongly typed version of the previous helper
Html.DisplayFor(m => m. Name)
Editor Renders an editor for the specified model property and selects an appropriate HTML element based on property’s data type and metadata.
Html.Editor("Name")
EditorFor Strongly typed version of the previous helper
Html.EditorFor(m => m. Name)

Custom Html Helpers

We can also makes your own custom helper methods by generating an extension method on the HtmlHelper class or by generating static methods with in a utility class.

Required of Custom Html Helpers?
Well, there is forever require to do some custom stuff on top of what framework offers, and reason for doing this is either business necessity or to get things done in elegant way.

Writing a custom Html helper is just writing an extension method.We are really writing an extension method for HtmlHelper class.
Being a SharePoint developer I always search this task similar to making of a web control where you override the render method of base class and do the custom Html rendering.

Creating Custom Html Helper
All right,for demo purpose We will keep the simple example - We will simply write an Html helper which will render the header of any content on view page.
Simply by using the <header> tag of Html 5.

Step 1: Determine your custom static class for making of your custom Html helpers


Step 2: Add static method to the class and make sure that return type is MvcHtmlString. Write an input variable of method as HtmlHelper and also a string for which the header tag requires to be created.


Step 3 : Include the rendering logic in the method ,we can take help from TagBuilder class to produce Html tags to be rendered.


Step 4: Build the project and open any view page. Now we can use your custom Html helper to render the header. Make sure that your view page has right using namespace for using your custom Html helper extension.


When we notice the view page's Html , we will be searching the created Html tag by our Custom Html helper extension




Related Videos