HTML Helper class generates HTML elements using the model class object in razor view. HTML Helper is a method that returns a HTML string. The string can represent any type of text like that we can use HTML Helpersto render standard HTML tags like HTML <input>, <img> and <button> tags etc. Also Read our previous tutorial about Types of MVC Project Templates.
Types of HTML Helpers :
- Inline HTML Helpers
- Built-In HTML Helpers
- Standard HTML Helpers
- Strongly Typed HTML Helpers
- Templated HTML Helpers
- Custom Html Helpers
Trending Now : ASP.NET MVC 5 New Features
1. Inline HTML Helpers :
Inline Html Helpers are create in the same view by using the Razor @helper tag. These helpers can be reused 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#”, “Asp”, “MVC” })
<h3>Book Lists:</h3>
@ListingItems(new string[] { “How to C#”, “how to Asp”, “how to MVC” })
2.Built-In HTML Helpers :
These Helpers are extension methods on the HTML Helper class. The Built-In HTML helpers can be divided into three Types .
Standard Html Helpers :
Standard HTML helpers are used to render the most common types of HTML elements such as HTML text boxes, checkboxes etc. A list of few standard HTML helpers is given below
1 | Html Element | Example |
---|---|---|
1 | TextBox | @Html.TextBox(“Textbox2”, “val”)Output: <input id=”Textbox2″ name=”Textbox2″ type=”text” value=”val” /> |
2 | Password | @Html.Password(“Password2”, “val”)Output: <input id=”Password2″ name=”Password2″ type=”password” value=”val” /> |
Strongly Typed HTML Helpers:Strongly Typed HTML helpers are used to render the most common types of HTML elements in strongly typed view like as HTML check boxes, text boxes etc.
1 | Html Element | Example |
---|---|---|
1 | TextBox | @Html.TextBoxFor(m=>m.Name)Output: <input id=”Name” name=”Name” type=”text” value=”Name-val” /> |
2 | Password | @Html.PasswordFor(m=>m.Password)Output: <input id=”Password” name=”Password” type=”password”/> |
Templated HTML Helpers:
Templated HTML helpers are very Flexible approach .It defines what Html elements are required to render based on properties of model class. A list of few Templated HTML helpers is given below
1 | Templated Helper | Example |
---|---|---|
1 | Display | Html.Display(“Name”) |
2 | Editor | Html.EditorFor(m => m. Name) |
3.Custom Html Helpers:
We can also create own custom helper methods by creating an extension method on the HTML Helper class or by creating static methods with in a utility class.
For Example ,
public static class CustomHelpers
{
//Submit Button Helper
public static MvcHtmlString SubmitButton(this HtmlHelper helper, string
buttonText)
{
string str = “<input type=\”submit\” value=\”” + buttonText + “\” />”;
return new MvcHtmlString(str);
}
//Readonly Strongly-Typed TextBox Helper
public static MvcHtmlString TextBoxFor<TModel, TValue>(this
HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>>
expression, bool isReadonly)
{
MvcHtmlString html = default(MvcHtmlString);
if (isReadonly)
{
html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
expression, new { @class = “readOnly”,
@readonly = “read-only” });
}
else
{
html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
expression);
}
return html;
}
}