Latest web development tutorials

ASP.NET MVC HTML helper

HTML Help is used to modify the HTML output.


HTML Helper

By MVC, HTML Help is similar to a traditional ASP.NET Web Form controls.

Like in ASP.NET Web Form Controls, HTML Help is used to modify HTML. However, HTML Help is more lightweight. Web Form with different controls, HTML Help does not view state and event model.

In most cases, HTML helper is just a method that returns a string.

By MVC, you can create your own helper, or directly using the built-in HTML helper.


Standard HTML helper

MVC includes the most common types of standard HTML elements helper, such as HTML links and HTML form elements.


HTML links

The easiest way is to use the rendered HTML link HTML.ActionLink () helper.

By MVC, Html.ActionLink () is not connected to view. It creates a connection to the controller operation.

Razor syntax:

@Html.ActionLink("About this Website", "About")

ASP syntax:

<%=Html.ActionLink("About this Website", "About")%>

The first parameter is the link text, and the second parameter is the name of the controller operation.

The above Html.ActionLink () helper, outputs the following HTML:

<a href="/Home/About">About this Website</a>

Html.ActionLink () to help some of the properties:

属性 描述
.linkText URL 文本(标签),定位点元素的内部文本。
.actionName 操作(action)的名称。
.routeValues 传递给操作(action)的值,是一个包含路由参数的对象。
.controllerName 控制器的名称。
.htmlAttributes URL 的属性设置,是一个包含要为该元素设置的 HTML 特性的对象。
.protocol URL 协议,如 "http" 或 "https"。
.hostname URL 的主机名。
.fragment URL 片段名称(定位点名称)。

Note: You can pass a value to the controller. For example, you can transfer operations to the database Edit database records id:

Razor syntax of C #:

@Html.ActionLink("Edit Record", "Edit", new {Id=3})

Razor syntax VB:

@Html.ActionLink("Edit Record", "Edit", New With{.Id=3})

The above Html.ActionLink () helper, outputs the following HTML:

<a href="/Home/Edit/3">Edit Record</a>

HTML form elements

The following can be used to render HTML Help (modification and output) HTML form elements:

  • BeginForm ()
  • EndForm ()
  • TextArea ()
  • TextBox ()
  • CheckBox ()
  • RadioButton ()
  • ListBox ()
  • DropDownList ()
  • Hidden ()
  • Password ()

ASP.NET Syntax C #:

<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm()){%>
<p>
<label for="FirstName">First Name:</label>
<%= Html.TextBox("FirstName") %>
<%= Html.ValidationMessage("FirstName", "*") %>
</p>
<p>
<label for="LastName">Last Name:</label>
<%= Html.TextBox("LastName") %>
<%= Html.ValidationMessage("LastName", "*") %>
</p>
<p>
<label for="Password">Password:</label>
<%= Html.Password("Password") %>
<%= Html.ValidationMessage("Password", "*") %>
</p>
<p>
<label for="Password">Confirm Password:</label>
<%= Html.Password("ConfirmPassword") %>
<%= Html.ValidationMessage("ConfirmPassword", "*") %>
</p>
<p>
<label for="Profile">Profile:</label>
<%= Html.TextArea("Profile", new {cols=60, rows=10})%>
</p>
<p>
<%= Html.CheckBox("ReceiveNewsletter") %>
<label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>
</p>
<p>
<input type="submit" value="Register" />
</p>
<%}%>