Reference to HtmlHelper in MVC, mvchtmlhelper

Reference to HtmlHelper in MVC, mvchtmlhelper

Reference to HtmlHelper in MVC

 

Analysis of the main use of various controls in 7 main categories of HtmlHelper controls in MVC (1)

HtmlHelper class in the command System. web. mvc. html consists of seven static classes: FormExtensions class, InputExtensions class, LinkExtensions class, SelectExtensions class, TextExtensions class, ValidationExtensions class, And RenderPartialExtensions class.

To facilitate developers to use the HtmlHelper control, an Html attribute is set in the ViewPage class, which is of the HtmlHelper type.

1. FormExtensions class

The extended Methods BeginForm, BeginRouteForm, and EndForm in step 3 are defined.

(1) BeginForm(Implement the beginning of form definition)

There are 13 overload 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, forcanchod 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 );

You can set the second overload method as follows:

Html. BeginForm (new {action = "action", controller = "actroller", id = "2 "});

In the above Code, an instantiated object of the route value is set, and the output HTML statement is:

<Form action = "actroller/action/2" method = "post"/>

The last parameter of the last 13th methods is to set the values of relevant attributes for the instantiated object, such as class and width.

(2) BeginRouteForm(This mainly implements the starting part of the form definition and sets the action value using the routing method)

There are 12 overload 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 overload method:

Html. BeginRouteForm (new {action = "action "});

<Form action = "Home/action" method = "post"/> Home is the directory of the page.

The difference between BeginForm and BeginRouteForm is that the first action is action, and the second action is Home/action.

(3) EndForm(Implement the end part of the form definition)

Html. EndForm ();

Equivalent to </Form>

 

The InputExtensions class has five types of extension methods. You can set the checkBox, hidden, password, radioButton, and textBox controls in the view.

(1) There are 6 overload methods to implement the check box control in CheckBox

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 );

Code for setting the check box:

<% = Html. BeginForm ("CheckBox", "Home") %>

<Fieldset>

<Legend> set the font: </lengend>

<% = Html. CheckBox ("MyCheckBox1", true, new {id = "checkBox1"}) %>

<Label for = "checkBox1"> </label>

<% = Html. CheckBox ("MyCheckBox2", false, new {id = "checkBox2"}) %>

<Label for = "checkBox1"> italic </label>

<Br/>

<Input type = "submit" value = "Submit"/>

</Fieldset>

<% Html. EndForm (); %>

Run the preceding code. The preceding check box sets the HTML statement corresponding to the Code:

<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"/>

Retrieve checkBox in the background

Public ActionResult CheckBox (FormCollection formCollection)

{

Bool MyCheckBox1 = formCollection [0]. Contains ("true"); // retrieve whether the first check box is selected

Bool MyCheckBox2 = formCollection ["MyCheckBox2"]. Contains ("true"); // check whether the check box whose name is MyCheckBox2 is multiple times selected

ViewData ["CheckBox1"] = MyCheckBox1;

ViewData ["CheckBox2"] = MyCheckBox2;

Return View ();

}

(2) Hidden values in the Hidden form. There are four overload 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:

Html. Hidden ("testName"); the output Html statement is as follows:

<Input id = "testName" name = "testName" type = "hidden" value = ""/>

(3) Password is mainly used to enter the Password text box. There are four reload 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:

Html. Password ("MyPwd"); the output Html statement is as follows:

<Input id = "MyPwd" name = "MyPwd" type = "password"/>

Bytes --------------------------------------------------------------------------------------------

 

 

All methods of the HTML extension class have two parameters:
Using textbox as an Example
Public static string TextBox (this HtmlHelper htmlHelper, string name, Object value, IDictionary <string, Object> htmlAttributes)
Public static string TextBox (this HtmlHelper htmlHelper, string name, Object value, Object htmlAttributes)
These two parameters represent the attribute set of the html Tag. The usage is as follows.

1. ActionLink
<% = Html. ActionLink ("this is a connection", "Index", "Home") %>
Writing Method with QueryString
<% = Html. ActionLink ("this is a connection", "Index", "Home", new {page = 1}, null) %>
<% = Html. ActionLink ("this is a connection", "Index", new {page = 1}) %>
Other Html attributes
<% = 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 simultaneously
<% = 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 generated result is:
<A href = "/"> This is a connection </a>
Writing Method with QueryString
<A href = "/? Page = 1 "> This is a connection </a>
<A href = "/? Page = 1 "> This is a connection </a>
Other Html attributes
<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 simultaneously
<A href = "/? Page = 1 "id =" link1 "> This is a connection </a>
<A href = "/? Page = 1 "id =" link1 "> This is a connection </a>

2. RouteLink
The function is the same as that of ActionLink.
<% = Html. RouteLink ("about", "about", new {}) %>
With QueryString
<% = Html. RouteLink ("about", "about", new {page = 1}) %>
<% = Html. RouteLink ("about", "about", new {page = 1}, new {id = "link1"}) %>

Result:
<A href = "/about"> about </a>
<A href = "/about? Page = 1 "> about </a>
<A href = "/about? Page = 1 "id =" link1 "> about </a>
3. Form two methods
<% Using (Html. BeginForm ("index", "home", FormMethod. Post) {%>
<% }%>

<% Html. BeginForm ("index", "home", FormMethod. Post); // note that no = output %>
<% Html. EndForm (); %>

Result:
<Form action = "/home/index" method = "post"> </form>
4. TextBox, Hidden,
<% = 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;"}) %>

Result:

<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;" type = "text" value = ""/>
<Input id = "CategoryName" name = "CategoryName" style = "width: 300px;" type = "text" value = "Beverages"/>

5. TextArea
<% = Html. TextArea ("input5", Model. CategoryName, 3, 9, null) %>
<% = Html. TextAreaFor (a => a. CategoryName, 3, 3, null) %>

Result:
<Textarea cols = "9" id = "input5" name = "input5" rows = "3"> Beverages </textarea>
<Textarea cols = "3" id = "CategoryName" name = "CategoryName" rows = "3"> Beverages </textarea>

6. CheckBox
<% = Html. CheckBox ("chk1", true) %>
<% = Html. CheckBox ("chk1", new {@ class = "checkBox"}) %>
<% = Html. CheckBoxFor (a => a. IsVaild, new {@ class = "checkBox"}) %>

Result:

<Input checked = "checked" id = "chk1" name = "chk1" type = "checkbox" value = "true"/> <input name = "chk1" type = "hidden "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
<% = Html. ListBox ("lstBox1", (SelectList) ViewData ["Categories"]) %>
<% = Html. ListBoxFor (a => a. CategoryName, (SelectList) ViewData ["Categories"]) %>

Result:
<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
<% = Html. DropDownList ("ddl1", (SelectList) ViewData ["Categories"], "-- Select One --") %>
<% = Html. dropDownListFor (a =>. categoryName, (SelectList) ViewData ["Categories"], "-- Select One --", new {@ class = "dropdownlist"}) %>

Result:
<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. All functions are for reuse. However, it is really difficult to use custom controls.
<% Html. RenderPartial ("DinnerForm"); %> check that there is no equal sign.