The HtmlHelper class is composed of 7 static classes in the command System.Web.Mvc.Html, which are formextensions classes, inputextensions, Linkextensions, selectextensions classes, Te Xtextensions class, ValidationExtensions class, RenderPartialExtensions class.
To make it easier for developers to use the HtmlHelper control, a property HTML is set in the View ViewPage class, which is the HtmlHelper type.
I. FormExtensions class
The extension method Beginform,beginrouteform,endform of type 3 is defined.
(1) BeginForm (Implementation of the beginning of the form definition)
There are 13 overloaded methods:
BeginForm ();
BeginForm (Object routevalues);
BeginForm (RouteValueDictionary routevalues);
BeginForm (string actionname,string controllername);
BeginForm (String actionname,string controllername,object routevalues);
BeginForm (String actionname,string controllername,routevaluedictionary routevalues);
BeginForm (String actionname,string Controllername,formmethod method);
BeginForm (String actionname,string controllername,object Routevalues,formmethod method);
BeginForm (String actionname,string controllername,routevaluedictionary Routevaues,formmethod method);
BeginForm (String actionname,string controllername,formmethod method,object htmlattributes);
BeginForm (String actionname,string controllername,formmethod method,idictionary<string,object> Htmlattributes);
BeginForm (String actionname,string controllername,object routevalues,formmethod method,object htmlAttributes);
BeginForm (String actionname,string controllername,routevaluedictionary routevalues,formmethod method,IDictionary <string,object> htmlattributes);
For the second overloaded method, you can set the following:
Copy Code code as follows:
Html.BeginForm (new{action= "action", controller= "Actroller", id= "2"});
In the preceding code, an instantiated object is set for the route value, and the output HTML statement is:
Copy Code code as follows:
<form action= "ACTROLLER/ACTION/2" method= "post"/>
The last argument for the last 13th method is the value of the instantiated object setting the related property such as Class,width.
(2) Beginrouteform (primarily implementing the beginning of the form definition, setting the value of the action in a routed way)
There are 12 overloaded methods:
Beginrouteform (object routevalues);
Beginrouteform (RouteValueDictionary routevalues);
Beginrouteform (string routename);
Beginrouteform (string Routename,object routevalues);
Beginrouteform (string routename,routevaluedictionary routevalues);
Beginrouteform (string Routename,formmethod method);
Beginrouteform (String Routename,object Routevalues,formmethod method);
......
For the first overloaded method:
Copy Code code as follows:
Html.beginrouteform (New {action= "action"});
Copy Code code as follows:
<form action= "Home/action" method= "POST"/>home is the directory where the page is located
The difference between BeginForm and Beginrouteform is that the first action is the action and the second action is home/action
(3) EndForm (the end of the definition of the form is implemented)
Copy Code code as follows:
Equivalent to </Form>
Two. The InputExtensions class has 5 types of extension methods that you can set Checkbox,hidden,password,radiobutton,textbox controls in the view.
(1) CheckBox implementation check box control has 6 overloaded methods
CheckBox (string name);
CheckBox (string Name,bool ischecked);
CheckBox (String Name,bool ischecked,object htmlattributes);
CheckBox (string Name,object htmlattributes);
CheckBox (string name,idictionary<string,object> htmlattributes);
CheckBox (String Name,bool ischecked,idictionary<string,object> htmlattributes);
To set the implementation code for the check box:
Copy Code code as follows:
<%=html.beginform ("CheckBox", "Home")%>
<fieldset>
<legend> Set Font:</lengend>
<%=html.checkbox ("MyCheckBox1", true,new{id= "CheckBox1"})%>
<label for= "CheckBox1" > Blackbody </label>
<%=html.checkbox ("MyCheckBox2", false,new{id= "CheckBox2"})%>
<label for= "CheckBox1" > Italic </label>
<br/><br/>
<input type= "Submit" value= "Submit"/>
</fieldset>
<%html.endform ();%>
Run the preceding code, which corresponds to the HTML statement for the setting code of the above check box:
Copy Code code as follows:
<input checked= "Checked" id= "CheckBox1" name= "MyCheckBox1" type= "CheckBox" value= "true"/>
<input name= "MyCheckBox1" type= "hidden" value= "false"/>
<input id= "CheckBox2" name= "MyCheckBox2" type= "CheckBox" value= "false"/>
<input name= "MyCheckBox2" type= "hidden" value= "false"/>
Retrieving a checkbox in the background
Copy Code code as follows:
Public ActionResult CheckBox (formcollection formcollection)
{
BOOL Mycheckbox1=formcollection[0]. Contains ("true");//Retrieves whether the first check box is selected
BOOL mycheckbox2=formcollection["MyCheckBox2"]. Contains ("true");/whether the check box with the name MyCheckBox2 is selected
viewdata["CheckBox1"]=MYCHECKBOX1;
viewdata["CheckBox2"]=MYCHECKBOX2;
return View ();
}
(2) Hidden the hidden values in the form, with 4 overloaded methods.
Hidden (string name);
Hidden (string name,object value);
Hidden (String name,object value,object htmlattributes);
Hidden (String name,object value,idictionary<string,object> htmlattributes);
eg
Copy Code code as follows:
Html.hidden ("testname");
The HTML statement corresponding to the output is as follows:
Copy Code code as follows:
<input id= "testname" name= "testname" type= "hidden" value= ""/>
(3) Password is primarily a text box that enters a password, with 4 overloaded methods.
Hidden (string name);
Password (string name,object value);
Password (String name,object value,object htmlattributes);
Password (String name,object value,idictionary<string,object> htmlattributes);
eg
Copy Code code as follows:
The HTML statement corresponding to the output is as follows:
Copy Code code as follows:
<input id= "MyPwd" name= "mypwd" type= "password"/>
--------------------------------------------------------------------------------------------
All methods of an HTML extension class have 2 parameters:
Take the textbox as an example
public static string TextBox (this htmlhelper htmlhelper, string name, Object value, idictionary<string, object> htm Lattributes)
public static string TextBox (this htmlhelper htmlhelper, string name, object value, Object htmlattributes)
These 2 parameters represent the collection of attributes for this HTML tag. Use the following methods.
1.ActionLink
Copy Code code as follows:
<%=html.actionlink ("This is a connection", "Index", "Home")%>
With QueryString.
Copy Code code as follows:
<%=html.actionlink ("This is a connection", "Index", "Home", new {page=1},null)%>
<%=html.actionlink ("This is a connection", "Index", new {page=1})%>
There are other HTML attributes to be written
Copy Code code as follows:
<%=html.actionlink ("This is a connection", "Index", "Home", new {id= "Link1"})%>
<%=html.actionlink ("This is a connection", "Index", NULL, new {id= "Link1"})%>
QueryString and HTML attributes exist at the same time
Copy Code code as follows:
<%=html.actionlink ("This is a connection", "Index", "Home", new {page = 1}, new {id = "Link1"})%>
<%=html.actionlink ("This is a connection", "Index", new {page = 1}, new {id = "Link1"})%>
The resulting results are:
Copy Code code as follows:
<a href= "/" > This is a connection </a>
With QueryString.
Copy Code code as follows:
<a href= "/?page=1" > This is a connection </a>
<a href= "/?page=1" > This is a connection </a>
There are other HTML attributes to be written
Copy Code code as follows:
<a href= "/? Length=4 "id=" Link1 "> This is a connection </a>
<a href= "/" id= "Link1" > This is a connection </a>
QueryString and HTML attributes exist at the same time
Copy Code code as follows:
<a href= "/?page=1" id= "Link1" > This is a connection </a>
<a href= "/?page=1" id= "Link1" > This is a connection </a>
2.RouteLink
Same as ActionLink in function.
Copy Code code as follows:
<%=html.routelink ("About", "about", new {})%>
With QueryString
Copy Code code as follows:
<%=html.routelink ("About", "about", new {page = 1})%>
<%=html.routelink ("About", "about", new {page = 1}, new {id = "Link1"})%>
Build results:
Copy Code code as follows:
<a href= "/about" > About </a>
<a href= "/about?page=1" > About </a>
<a href= "/about?page=1" id= "Link1" > About </a>
2 Methods of 3.Form
Copy Code code as follows:
<%using (Html.BeginForm ("index", "Home", FormMethod.Post)) {%>
<%}%>
Copy Code code as follows:
<%html.beginform ("index", "Home", formmethod.post);/note there is no = output%>
<%html.endform (); %>
Build results:
Copy Code code as follows:
<form action= "/home/index" method= "POST" ></form>
4.TextBox
Copy Code code as follows:
<%=html.textbox ("input1")%>
<%=html.textbox ("Input2", model.categoryname,new{@style = "width:300px;"})%>
<%=html.textbox ("Input3", viewdata["Name"],new{@style = "width:300px;"})%>
<%=html.textboxfor (a => a.categoryname, new {@style = "width:300px;"}) %>
Build results:
Copy Code code as follows:
<input id= "input1" name= "input1" "type=" text "value=" "/>
<input id= "Input2" name= "Input2" style= "width:300px" "type=" text "value=" Beverages "/>"
<input id= "Input3" name= "Input3" style= "width:300px" text "type=" "value="
<input id= "CategoryName" name= "CategoryName" style= "width:300px" "type=" text "value=" Beverages "/>"
5.TextArea
Copy Code code as follows:
<%=html.textarea ("Input5", Model.categoryname, 3, 9,null)%>
<%=html.textareafor (a => a.categoryname, 3, 3, NULL)%>
Build results:
Copy Code code as follows:
<textarea cols= "9" id= "Input5" name= "Input5" rows= "3" >Beverages</textarea>
<textarea cols= "3" id= "CategoryName" name= "CategoryName" rows= "3" >Beverages</textarea>
6.CheckBox
Copy Code code as follows:
<%=html.checkbox ("Chk1", True)%>
<%=html.checkbox ("Chk1", new {@class = "CheckBox"})%>
<%=html.checkboxfor (a =>a.isvaild, new {@class = "CheckBox"})%>
Build results:
Copy Code code as follows:
<input checked= "Checked" id= "Chk1" name= "chk1" checkbox "Type=" true "value=/><input" name= "Chk1" type= "Value= false"/>
<input class= "checkbox" id= "Chk1" name= "Chk1" type= "checkbox" Value= "true"/><input name= "Chk1" type= "hidden" Value= "false"/>
<input checked= "Checked" class= "checkbox" id= "Isvaild" name= "Isvaild" type= "checkbox" Value= "true"/><input Name= "Isvaild" type= "hidden" value= "false"/>
7.ListBox
Copy Code code as follows:
<%=html.listbox ("LstBox1", (selectlist) viewdata["Categories"])%>
<%=html.listboxfor (a => a.categoryname, (selectlist) viewdata["Categories"])%>
Build results:
Copy Code code as follows:
<select id= "LstBox1" multiple= "multiple" name= "LstBox1" >
<option value= "1" >Beverages</option>
<option value= "2" >Condiments</option>
<option selected= "Selected" value= "3" >Confections</option>
<option value= "4" >dairy products</option>
<option value= "5" >Grains/Cereals</option>
<option value= "6" >Meat/Poultry</option>
<option value= "7" >Produce</option>
<option value= "8" >Seafood</option>
</select>
<select id= "CategoryName" multiple= "multiple" name= "CategoryName" >
<option value= "1" >Beverages</option>
<option value= "2" >Condiments</option>
<option value= "3" >Confections</option>
<option value= "4" >dairy products</option>
<option value= "5" >Grains/Cereals</option>
<option value= "6" >Meat/Poultry</option>
<option value= "7" >Produce</option>
<option value= "8" >Seafood</option>
</select>
8.DropDownList
Copy Code code as follows:
<%= html.dropdownlist ("Ddl1", (selectlist) viewdata["Categories"], "--select one--")%>
<%=html.dropdownlistfor (a => a.categoryname, (selectlist) viewdata["Categories"], "--select one--", new {@class = "DropDownList"})%>
Build results:
Copy Code code as follows:
<select id= "DDL1" name= "DDL1" >
<option value= "" >--select one--</option>
<option value= "1" >Beverages</option>
<option value= "2" >Condiments</option>
<option selected= "Selected" value= "3" >Confections</option>
<option value= "4" >dairy products</option>
<option value= "5" >Grains/Cereals</option>
<option value= "6" >Meat/Poultry</option>
<option value= "7" >Produce</option>
<option value= "8" >Seafood</option>
</select>
<select class= "DropDownList" id= "CategoryName" name= "CategoryName" >
<option value= "" >--select one--</option>
<option value= "1" >Beverages</option>
<option value= "2" >Condiments</option>
<option value= "3" >Confections</option>
<option value= "4" >dairy products</option>
<option value= "5" >Grains/Cereals</option>
<option value= "6" >Meat/Poultry</option>
<option value= "7" >Produce</option>
<option value= "8" >Seafood</option>
</select>
9.Partial View Template
WebForm is called a custom control. Functions are all for reuse. But using the custom controls is really hard to use.
Copy Code code as follows:
<% html.renderpartial ("Dinnerform"); %>
See clearly the no equals sign.
