Tin tức

Thiết kế web bằng ASP.NET MVC (Phần 10) – HTML Helper

04/03/2013

HTML Helpers được sử dụng để điều chỉnh đầu ra HTML


HTML Helpers

Đối với MVC, HTML helpers giống như là các control trong ASP.Net Web Form.

Cũng giống như các control trong ASP.NET, HTML helper được sử dụng để tùy chỉnh HTML đầu ra. Nhưng HTML Helper nhẹ nhàng hơn. Không giống Web Form control, một HTML Helper không có sự kiện và view state.

Trong nhiều trường hợp, một HTML Helper là các phương thức trả về chuỗi.

Với MVC, bạn có thể tạo ra các helper của mình hoặc sử dụng các HTML helper có sẵn.


HTML Helpers chuẩn

MVC bao gồm các helper chuẩn cho hầu hết các loại thẻ HTML, giống như là Link và các phần tử form.


HTML Links

Một cách dễ nhất để tạo ra thẻ HTMLLink là sử dụng helper HTML.ActionLink().

Với MVC, Html.ActionLink() không liên kết đến 1 view. Nó tạo ra đường dẫn đến một action trong controller

Cú pháp Razor:

@Html.ActionLink("About thisWebsite", "About")

Cú pháp ASP:

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

Tham số đầu tiên là văn bản hiển thị đường link, thứ 2 là tên của action trong controller.

Html.ActionLink() ở trên, đầu ra HTML sẽ như sau:

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

Html.ActionLink() helper có một số thuộc tính như sau:

Thuộc tính

Mô tả

.linkText

Văn bản hiển thị (nhãn)

.actionName

Action chỉ ra

.routeValues

Gía trị gửi đến action

.controllerName

Tên controller

.htmlAttributes

Các thuộc tính gửi đến link

.protocol

Phương thức liên kết

.hostname

Tên máy chủ

.fragment

Anchor của link

Chú ý: Bạn có thể gán giá trị cho action trong controller. Ví dụ, bạn có thể gán id bản ghi vào để sửa bản ghi.

Cú pháp Razor C#:

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

Cú pháp Razor VB:

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

Helper Html.ActionLink() trên đưa ra HTML:

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


Các phần tử HTML Form

Các HTML Helper dưới đây có thể được dùng để tạo ra form HTML như sau:

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

Cú pháp ASP.NET C#:

<%=Html.ValidationSummary("Create was unsuccessful. Please correct the errorsand 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>
<%}%>