ASP.NET - MVC - HTML Helpers là gì?

HTML Helpers là gì?

HMTLHelper giúp chúng ta viết phần tử HTML trong Razor sử dụng cú pháp thân thiện với HTML. Nó nhìn như là HTML chuẩn vậy nhưng code được xử lý bởi Razor Engine trên server và nó tận dụng đươc các ưu điểm của việc xử lý phía server.

Razor được tạo sử dụng HMTLHelper  nhìn như phần tử HTML thuần. Nó thao tác với các phần tử HTML như thêm mới phần tử HTML hay thay thế các nội dung có sẵn bằng một cái mới.

Ví dụ, sử dụng thẻ Form HMTLHelper, chúng ta có thể tạo ra thẻ <form> như dưới đây. Với các thuộc tính asp-action và asp-controller của Form HMTLHelper :

Hình dưới đây cho thấy việc sử dụng lớp HtmlHelper trong Razor.

html helpers

Như bạn có thể thấy trong hình trên, @Html là một đối tượng của lớp HtmlHelper. (Biểu tượng @ được sử dụng để truy cập đối tượng phía máy chủ theo cú pháp Razor). Html là một thuộc tính của đối tượng HtmlHelper được bao gồm trong lớp cơ sở của  Razor WebViewPage. ActionLink () và DisplayNameFor () là các phương thức mở rộng được chứa trong lớp HtmlHelper.

Lớp HtmlHelper tạo các phần tử html. Ví dụ:

tmlHelper class generates html elements. For example, @Html.ActionLink("Create New", "Create") 

Sẽ tạo ra thẻ HTML

<a href="/Student/Create">Create New</a>

Có nhiều phương thức mở rộng cho lớp HtmlHelper, tạo ra các điều khiển html khác nhau.

Bảng sau liệt kê các phương thức HtmlHelper và điều khiển html mỗi phương thức tạo ra.

HtmlHelper Strongly Typed HtmlHelpers Html Control
Html.ActionLink   Anchor link
Html.TextBox Html.TextBoxFor Textbox
Html.TextArea Html.TextAreaFor TextArea
Html.CheckBox Html.CheckBoxFor Checkbox
Html.RadioButton Html.RadioButtonFor Radio button
Html.DropDownList Html.DropDownListFor Dropdown, combobox
Html.ListBox Html.ListBoxFor multi-select list box
Html.Hidden Html.HiddenFor Hidden field
Password Html.PasswordFor Password textbox
Html.Display Html.DisplayFor Html text
Html.Label Html.LabelFor Label
Html.Editor Html.EditorFor Tạo các điều khiển Html dựa trên loại dữ liệu của thuộc tính .

 Sự khác biệt giữa việc gọi các phương thức HtmlHelper và sử dụng thẻ html là phương thức HtmlHelper được thiết kế để giúp dễ dàng liên kết dữ liệu giữa View Model.