ASP. net mvc htmlhelper

Source: Internet
Author: User
Tags actionlink

ASP. net mvc provides htmlhelper to generate HTML tags with data bindings.

1. actionlink
Among them, HTML. actionlink is the most commonly used

(1). actionlink (string linktext, string actionname)

// The page displays linktext pointing to the actionname method of the default controller object in global. asax. CS.

(2). actionlink (string linktext, string actionname, string controllername)

// The page displays the linktext pointing to the actionname method of the controller corresponding to controllername.

(3). actionlink (string linktext, string actionname, object routues, object htmlattributes)

// The page displays linktext pointing to global. asax. the actionname method of the default controller object in CS, and pass parameters to the action method (implemented using anonymous name/value pairs), and set the Page Link attribute htmlattributes.

1.1 Basic usage
When the urlrouting rule is the default ruleCodeIs

1: <a href = "/"> This is a connection </a>

The three parameters in actionlink are

Displayed text
Action
Controller
The controller can be omitted. If omitted, it points to the action under the same controller.

Querystring and HTML attribute settings in 1.2actionlink
1: Write method with querystring
2: <% = html. actionlink ("this is a connection", "Index", "home", new {page = 1}, null) %>
3: <% = html. actionlink ("this is a connection", "Index", new {page = 1}) %>
4: Other HTML attributes
5: <% = html. actionlink ("this is a connection", "Index", "home", new {id = "link1"}) %>
6: <% = html. actionlink ("this is a connection", "Index", null, new {id = "link1"}) %>
7: Both querystring and HTML attributes exist.
8: <% = html. actionlink ("this is a connection", "Index", "home", new {page = 1}, new {id = "link1"}) %>
9: <% = html. actionlink ("this is a connection", "Index", new {page = 1}, new {id = "link1"}) %>

The generated result is:

1: Write method with querystring
2: <a href = "/? Page = 1 "> This is a connection </a>
3: <a href = "/? Page = 1 "> This is a connection </a>
4: Other HTML attributes
5: <a href = "/? Length = 4 "id =" link1 "> This is a connection </a>
6: <a href = "/" id = "link1"> This is a connection. </a>
7: Both querystring and HTML attributes exist.
8: <a href = "/? Page = 1 "id =" link1 "> This is a connection </a>
9: <a href = "/? Page = 1 "id =" link1 "> This is a connection </a>

In this way, you can use actionlink to generate almost all address connections.

NOTE: If action and controller are not involved in the connection, there is no need to use actionlink. Instead, you can directly write HTML code. For example

1: <a href = "#1"> chapter </a>
2: <a href = "javascript: void (0)" onclick = "Delete ();"> Delete </a>

2. routelink
2.1 and actionlink
Routelink is similar to actionlink, but its address is generated by route.

1: <% = html. actionlink ("this is a connection", "Index", "home") %>

If routelink is used for writing

1: <% = html. routelink ("this is a connection", new {controller = "home", Action = "Index"}) %>

Actionlink with querystring and HTML attributes

1: <% = html. actionlink ("this is a connection", "Index", new {page = 1}, new {id = "link1"}) %>

You can write it like this.

In fact, it is to use a newly created routuedictionary object (the new {} instantiated object will be equivalent to routuedictionary) to replace the original action, the Controller string is specified separately.

2.2routelink use Route rules
In addition to these cooperative usage, routelink also supports using route rule names to create connections

For example, we add a route rule to the Global. asax file.

1: routes. maproute (
2: "about", // This is the rule name
3: "about", // URL
4: New {controller = "home", Action = "about "}
5 :);

Then we can use this route rule

1: <% = html. routelink ("about", "about", new {}) %>
2: <% = html. routelink ("about", "about", new {page = 1}) %>
3: <% = html. routelink ("about", "about", new {page = 1}, new {id = "link1"}) %>

To generate the following HTML:

1: <a href = "/about"> about </a>
2: <a href = "/about? Page = 1 "> about </a>
3: <a href = "/about? Page = 1 "id =" link1 "> about </a>

3. Form
In many cases, it is necessary to generate form elements,ArticleAs described at the beginning, when modifying a content, we may need to bind the data to the form.

3.1 generate form
Of course, we can use pure HTML code or urlhelper to generate a form.

For example

But it is still difficult to maintain because it is in HTML attributes. Fortunately, ASP. net mvc provides us with a helper. we can generate a form in the following two ways:

1: <% using (html. beginform ("Index", "home", formmethod. Post) {%>
2: Form Content
3: <%}%>
4: <% html. beginform ("Index", "home", formmethod. Post); // note that no = output %>
5: Form Content
6: <% html. endform (); %>

The beginform method is similar to the call method of actionlink. Therefore, ASP. net mvc also provides the beginrouteform method.

Of course, here we can also use new {} to add the querystring or HTML attribute for the form action. The method is similar to the previous one. See the method list.

3.2 form elements
ASP. net mvc provides helper for various form elements.

The options include Textbox (similar to input type = text), textarea, dropdownlist (select), checkboxhidden, ListBox, password, and radionbutton.

Note: Because <input type = "Submit"/> is generally not bound to data, ASP. net mvc does not provide this helper (previously provided before preview2 ).

If we want to provide an input type = text whose name is T1, the following code:

1: <% = html. Textbox ("T1") %>

3.3 form Element Binding
If we want to have a value at the beginning of T1, for example, "classic", we can do the following:

1: <% = html. Textbox ("T1", "classic") %>

If the data is read from the database, that is, the data is obtained from the action, we can use viewdata to pass in the action.

Action:

1: viewdata ["name"] = "classic ";

View:

1: <% = html. Textbox ("T1", viewdata ["name"]) %>

The above method seems simple. In fact, ASP. net mvc provides us with a simpler binding method-as long as the viewdata key is consistent with the name of the element generated by helper, it can be automatically bound:

Action:

1: viewdata ["T1"] = "classic ";

View:

1: <% = html. Textbox ("T1") %>

In this way, you can automatically bind

3.4 List data display and binding
A single value such as textbox is relatively easy, but there are a lot of data dropdownlist or ListBox, how should we bind the data and the initialization value? Let's take a look at the following example:

Action:

1: viewdata ["sel1"] = new selectlist (
2: New [] {1, 2, 3}
3:, 3
4 :);

View:

1: <% = html. dropdownlist ("sel1") %>

In this way, you can bind the list content, default value, and form elements together.

The contents of our list are not arrays in any case, but mostly key-value pairs.

You can use the following methods:

1: List <selectlistitem> List = new list <selectlistitem>
2 :{
3: New selectlistitem {text = "", value = "1 "},
4: New selectlistitem {text = "ZOU Jian", value = "2 "},
5 :};
6: viewdata ["sel1"] = new selectlist (
7: List
8:, "2"
9 :);

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.