MVC 5 Chapter III HTML Helper

The mention of HTML helper must not be unfamiliar, because it must be used when writing MVC view. An HTML Help is a way to return an HTML string that represents the type of content you expect. For example, you can use HTML helper to render standard HTML tags like html <input>, <button> and <image> tags. If the built-in HTML helper provided by MVC doesn't meet the output requirements of your view, and you want to enter a more complex type of content such as HTML table and so on, you can use the customization capabilities provided by MVC to develop an extended HTML helper for you to use, Here's a brief introduction to some of the HTML helpers provided by MVC.

Different types of HTML Helpers, summed up 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, can only do basic extensions, lacks the necessary reusability, the defined syntax begins with the Razor @helper tag, followed by the signature of the Add method, as in the following example:

@helper Listingitems (string[] items)

{

<ol>

@foreach (string item in items)

{

<li> @item </li>

}

</ol>

}

programming Languages:

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

bookList:

@ListingItems (new string[] {"How to C", "what 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, and 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= "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 Helper

These strongly typed helpers are used to render HTML elements of the most common type, such as text boxes, and check boxes in strongly typed views. This means that the creation of HTML elements in the view is based on the entity model properties. In addition, a strongly typed HTML helpers is used with lambda expressions. The Entity Model object property is passed as a value to the lambda expression, and you can select a field or attribute from the entity model object to set the HTML helper's ID, name, and value attributes. The following table lists the most commonly used strongly-typed HTML helpers.

HTML Element Example Textbox@html.textboxfor (m=>m.name)
输出Output:<input id= "name" name= "name" type= "text" value= "Name-val"/> Textarea@html.textarea (m=>m.address, 5, new{} ))
输出Output:<textarea cols= "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 resolve what HTML elements are used to render attributes based on the entity model class. This is a very flexible approach for users, although it requires some initialization settings. To create the correct HTML elements by templated HTML helper, you can use the DataType feature of the Dataannotation class. For example, when you use the password data type, a templated helper automatically renders HTML input elements of the password type. The specific examples are shown below.

Templated Helper Example displayrenders a read-only view of the specified model property and selects an appropriate HTML elemen T based on property ' s data type and metadata.
Html.display ("Name") displayforstrongly 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") editorforstrongly typed version of the previous helper
Html.editorfor (m = + M. Name)

3. Customizing HTML Helpers (custom HTML Helpers)

If the above HTML helpers does not meet your needs, you can also create your own custom helper method, which needs to be implemented either by creating an extension method on the HtmlHelper class or by adding a static method to the utility class, as shown below.

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& Lt Tmodel> HtmlHelper, Expression<func<tmodel, tvalue>> Expression, bool isreadonly) {mvchtmlstring html = d Efault (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, only you do it.