Thursday, January 2, 2020

Types Of HTML Helpers in Asp.Net MVC Razor View

Asp.net MVC provides the HTML helper methods and returns the HTML string using the model class objects or properties in the razor view. Usually, HTML Helper Methods helps you to create the HTML control programmatically. we can develop the application without them. but HTML Helpers helps in the rapid development of a view.

The HTML Methods fully works based on the model class properties. if we want to display values from Server to View or View to Server then we need HTML controls. based on properties, and using HTML Helper methods we can generate them and HTML Helpers work as a mediator between them.

We can categorize the HTML Helpers into 3  types.

  1.   Custom HTML Helpers
  2.   Built-in HTML Helpers
    1. Strongly Typed HTML Helpers
    2. Standard HTML Helpers
    3. Templated HTML Helpers
  3.   Inline HTML Helpers

1. Custom HTML Helpers :

   we can create our own custom HTML Helpers method by creating an extension method on HtmlHelper Class.

2. Built-in HTML Helpers :

Below is the list of loosely coupled HTML Helper methods

Html HelperHtml Control
Html.TextBox              TextBox                    
Html.TextArea            TextArea
Html.Password            Password TextBox
Html.Beginform            Form Tag
Html.AnchorLink            Anchor Link
Html.CheckBox           CheckBox
Html.RedioButton           Radio Button
Html.ListBox           Multi Select List Box     
Html.Hidden           Hidden Field
Html.Label
            Label

Below is the Tightly coupled HTML Helpers Methods

Strongly Typed Html Helper     Html Control
Html.TextBoxFor            TextBox                    
Html.TextAreaFor            TextArea
Html.PasswordFor            Password TextBox
Html.CheckBoxFor           CheckBox
Html.RedioButtonFor           Radio Button
Html.ListBoxFor           Multi Select List Box     
Html.HiddenFor           Hidden Field
Html.LabelFor
            Label

3. Inline HTML Helpers

These HTML Helpers reused only in same page or view by using Razor with help of @helper Tag.

example :

@helper ListingItems(string names)
{
<ol>
@foreach(string name in  names)
{
<li>name</li>
}
</ol>
}

<h3>Employee Names Are ::</h3>

 @ListingItems(new string[] { "Valli", "John", "Jaswanth" })






No comments: