MVC 5 chapter 3 HTML Helper

We should not be unfamiliar with HTML helper, because it must be used when writing MVC views. An HTML Help is a method to return an HTML string, which indicates the expected type of content. For example, you can use HTML Helper to display standard HTML tags such as HTML <input>, <button>, and <image>. If the built-in HTML helper provided by MVC cannot meet your View output requirements, and you want to enter a more complex type of content such as HTML table, you can use the custom functions provided by MVC to develop extended HTML helper for your use. Below we will briefly introduce several types of HTML helper provided by MVC.

For different types of HTML Helpers, MVC provides the following three types of HTML Helper:

1. Inline HTML Helpers (also known as Inline HTML Helper)

This type of HTML Helper can only be used in the View that defines it. It can only be used for basic extensions and lacks the necessary reusability. The defined syntax starts with the Razor @ helper tag, the signature of the method is followed by an example:

@ Helper ListingItems (string [] items)

{

<Ol>

@ Foreach (string item in items)

{

<Li> @ item </li>

}

</Ol>

}

<H3> Programming versions:

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

<H3> Book List:

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

 

2. Built-In Html Helpers (built-in HTML Helper)

This type of HTML Helper provides the Ship for MVC by default. The specific subdivision can be subdivided into three types.

1) standard HTML Helper

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) Strong HTML Helper

These strong types of Helpers are used to present the most common types of HTML elements such as text boxes. check boxes are in a strong type view. That is to say, the HTML element in the view is created based on the object model attributes. In addition, strong HTML helpers is used in combination with Lambda expressions. The Object Property of the object is passed to the Lambda expression as a value. You can select a field or attribute from the object to set the id, name, and value of the HTML helper. The following lists the most common HTML helpers.

Sample TextBox@Html.TextBoxFor for HTML Element (m => m. Name)
Output:<Input id = "Name" name = "Name" type = "text" value = "Name-val"/> 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) template class HTML Helpers

These helpers solve what HTML elements are used to render Attributes Based on the object model class. This is a very flexible method for users, although it requires some initialization settings. To use Templated HTML Helper to create correct HTML elements, you can use the ype feature of the DataAnnotation class. For example, when you use the Password data type, a templated helper will automatically display the HTML input elements of the Password type. The following is an example.

 

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

 

3. Custom Html Helpers (Custom Html Helpers)

If the preceding HTML helpers cannot meet your needs, you can also create your own custom helper method, you can create an extension method on the HTMLHelper class or add a static method to the utility class. The following is an 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 stronugly-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 ;}}

P.S. You never know how much you can do.