Details on the use of HtmlHelper controls in ASP. net mvc, mvchtmlhelper

Details on the use of HtmlHelper controls in ASP. net mvc, mvchtmlhelper

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 (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:

Copy codeThe Code is 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:

Copy codeThe Code is as follows:
<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 (mainly implements the start part of 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:

Copy codeThe Code is as follows:
Html. BeginRouteForm (new {action = "action "});

Copy codeThe Code is as follows:
<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 (implementing the end part of form definition)

Copy codeThe Code is as follows:
Html. EndForm ();

Equivalent to </Form>

2. 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:

Copy codeThe Code is as follows:
<% = 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:

Copy codeThe Code is 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"/>

Retrieve checkBox in the background

Copy codeThe Code is as follows:
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:

Copy codeThe Code is as follows:
Html. Hidden ("testName ");

The output Html statement is as follows:

Copy codeThe Code 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:

Copy codeThe Code is as follows:
Html. Password ("MyPwd ");

The output Html statement is as follows:
Copy codeThe Code 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

Copy codeThe Code is as follows:
<% = Html. ActionLink ("this is a connection", "Index", "Home") %>

Writing Method with QueryString

Copy codeThe Code is as follows:
<% = 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

Copy codeThe Code is 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 simultaneously

Copy codeThe Code is 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 generated result is:

Copy codeThe Code is as follows:
<A href = "/"> This is a connection </a>

Writing Method with QueryString

Copy codeThe Code is as follows:
<A href = "/? Page = 1 "> This is a connection </a>
<A href = "/? Page = 1 "> This is a connection </a>

Other Html attributes

Copy codeThe Code is 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 simultaneously

Copy codeThe Code is 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

The function is the same as that of ActionLink.

Copy codeThe Code is as follows:
<% = Html. RouteLink ("about", "about", new {}) %>

With QueryString

Copy codeThe Code is as follows:
<% = Html. RouteLink ("about", "about", new {page = 1}) %>
<% = Html. RouteLink ("about", "about", new {page = 1}, new {id = "link1"}) %>

Result:

Copy codeThe Code is as follows:
<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

Copy codeThe Code is as follows:
<% Using (Html. BeginForm ("index", "home", FormMethod. Post) {%>
<% }%>

Copy codeThe Code is as follows:
<% Html. BeginForm ("index", "home", FormMethod. Post); // note that no = output %>
<% Html. EndForm (); %>

Result:

Copy codeThe Code is as follows:
<Form action = "/home/index" method = "post"> </form>

4. TextBox

Copy codeThe Code is 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;"}) %>

Result:

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

5. TextArea

Copy codeThe Code is as follows:
<% = Html. TextArea ("input5", Model. CategoryName, 3, 9, null) %>
<% = Html. TextAreaFor (a => a. CategoryName, 3, 3, null) %>

Result:

Copy codeThe Code is 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 codeThe Code is as follows:
<% = Html. CheckBox ("chk1", true) %>
<% = Html. CheckBox ("chk1", new {@ class = "checkBox"}) %>
<% = Html. CheckBoxFor (a => a. IsVaild, new {@ class = "checkBox"}) %>

Result:

Copy codeThe Code is as follows:
<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

Copy codeThe Code is as follows:
<% = Html. ListBox ("lstBox1", (SelectList) ViewData ["Categories"]) %>
<% = Html. ListBoxFor (a => a. CategoryName, (SelectList) ViewData ["Categories"]) %>

Result:

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

Result:

Copy codeThe Code is 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. All functions are for reuse. However, it is really difficult to use custom controls.

Copy codeThe Code is as follows:
<% Html. RenderPartial ("DinnerForm"); %>

You can see that there is no equal sign.

Articles you may be interested in:

• HtmlHelper of asp.net image Verification Code
• C # How should I distinguish the application logic (Controller layer) from the business logic (Model layer) in MVC mode )?
• Implement Asp.net mvc upload Avatar and cropping Function
• An amazing journey to ASP. NET Mvc5 + EF7
• Access statistics system implemented by ASP. net mvc 3
• How to use chart controls in ASP. NET MVC
• How to deploy MVC3 and MVC4 programs in IIS6 of windows2003
• Development of ASP. NET Mvc with EF delayed Loading
• ASP. NET Mvc development-query data
• ASP. NET Mvc development-delete and modify data