"Translation" Understanding HTML helper for ASP.

http://blog.csdn.net/tianxiaode/article/details/21096953

Original: Understanding HTML Helpers in ASP.

Shailendra Chauhan works as software Analyst at reputed MNC and have more than 5 years of hand over Microsoft. NET Technolo Gies. He is a. NET consultant and is the founder & chief editor of Www.dotnet-tricks.com and Www.dotnetinterviewtricks.com b Logs. He is author of the book ASP interview Questions and Answers.
He loves to work with Web applications and mobile apps using Microsoft technology including ASP, MVC, C #, SQL Server, WCF, Web API, Entity framework,cloud Computing, Windows Azure, jquery, jquery Mobile, Knockout.js, angular.js and many mor e Web technologies. More ...

The HTML helper is the way to return an HTML string. These strings can be used to represent anything you expect. For example, you can use the HTML helper to render standard HTML tags, such as HTML <input>, <button>, , and so on.


You can also render more complex content, such as a menu bar or an HTML table that displays database data, by creating a custom HTML helper.

Different types of HTML helpers

The following is a list of the three types of HTML assistants:

Inline HTML Helper

These need to be created using the Razor @hepler tag within the same view. These assistants can be reused within the same view.

[CSharp]View Plaincopy

2. @helper Listingitems (string[] items)
4. {
6. <ol>
8. @foreach (string item in items)
10. {
12. <li> @item </li>
14. }
16. </ol>
18. }
26. @ListingItems (new string[] { "C", "C + +", "C #"})
34. @ListingItems (new string[] { "How to C", "what to C + +", "How to C #"})

Built-in HTML helper

The built-in HTML helper is the extension method for the HtmlHelper class. The built-in HTML helper can be divided into 3 types:

The Standard HTML helper

These assistants can be used to render the most commonly used HTML element types, such as HTML text input boxes, check boxes, and so on. The following is a list of the most commonly used standard HTML helpers:

HTML elements	Example
Textbox	@Html. TextBox ("Textbox1", "Val") Output: <input id= "Textbox1" name= "Textbox1" type= "text" value= "Val"/>
TextArea	@Html. TextArea ("Textarea1", "Val", 5, (+), 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-select	Html.listbox ("ListBox1", New Multiselectlist (new [] {"Cricket", "Chess"}) Output: <select id= "ListBox1" multiple= "multiple" name= "ListBox1" > <option>Cricket</option> <option >Chess</option> </select>

Strongly-Typed HTML helper

These assistants are primarily used to render the most commonly used HTML element types in a strongly typed view, such as HTML text input boxes, check boxes, and so on. HTML elements are created according to the model properties. The strongly typed HTML helper needs to be used with a lambda expression. The model object is passed as the value of the lambda expression, and you can select a field or property from the model to set the HTML helper ID, name, and Value properties. The following is a list of the most commonly used strongly-typed HTML helpers:

HTML elements	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>

Templated HTML Helper

These assistants need to be clear that HTML elements are required to be rendered based on the properties of the model class. While this requires some careful and patient setup, this is a very flexible way to show the data to the user. In order to use the templated HTML Helper to set the appropriate HTML elements, you need to use the datatype feature of the Dataannitation class.

For example, when using datatype as a password, the templated helper automatically renders the input element of the cipher type's HTML.

Templating Assistant	Example
Display	Renders a read-only view of a specified model property and selects the appropriate HTML element based on the property's data type and metadata. Html.display ("Name")
Displayfor	A strongly typed version of the previous assistant. Html.displayfor (m = + M. Name)
Editor	Renders an editor for the specified model property, and gives the property the data type and metadata to select the appropriate HTML element. Html.editor ("Name")
Editorfor	A strongly typed version of the previous assistant. Html.editorfor (m = + M. Name)

Custom HTML Helper

You can also create a custom helper method by creating an extension method for the HtmlHelper class or by creating a static method within a feature class.

[CSharp]View Plaincopy

2. Public static class Customhelpers
4. {
6. Submit Button Helper
8. Public static mvchtmlstring Submitbutton (thishtmlhelper helper, string
10. ButtonText)
12. {
14. String str = "<input type=\" submit\ "value=\" "+ buttontext + " \ "/>";
16. return new mvchtmlstring (str);
18. }
20. Readonly strongly-typed TextBox Helper
22. Public static mvchtmlstring Textboxfor<tmodel, tvalue> ( This
24. Htmlhelper<tmodel> HtmlHelper, Expression<func<tmodel, tvalue>>
26. expression, bool isreadonly)
28. {
30. mvchtmlstring HTML = default (mvchtmlstring);
34. if (isreadonly)
36. {
38. html = System.Web.Mvc.Html.InputExtensions.TextBoxFor (HtmlHelper,
40. expression, new {@class = "ReadOnly",
42. @readonly = "Read-only"});
44. }
46. Else
48. {
50. html = System.Web.Mvc.Html.InputExtensions.TextBoxFor (HtmlHelper,
52. expression);
54. }
56. return HTML;
58. }
60. }

"Translation" Understanding HTML helper for ASP.