Lớp HtmlHelper trong ASP.NET MVC

Trong phần này, bạn sẽ tìm hiểu HtmlHelper trong ASP.NET MVC là gì và cách sử dụng chúng trong Razor View.

Lớp HtmlHelper tạo các phần tử HTML bằng cách sử dụng đối tượng lớp Model trong Razor View.

Nó liên kết đối tượng Model với các phần tử HTML để hiển thị giá trị của các thuộc tính Model trong các phần tử HTML.

Nó cũng sẽ gán giá trị của các phần tử HTML cho các thuộc tính Model khi gửi biểu mẫu tới web server.

Vì vậy, luôn luôn sử dụng lớp HtmlHelper trong Razor View thay vì viết các thẻ html thủ công.

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

Như bạn có thể thấy trong hình trên, @Html là một đối tượng của lớp HtmlHelper. (Ký tự @ đượ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 kiểu HtmlHelper của lớp WebViewPage. ActionLink() và DisplayNameFor() là các phương thức mở rộng trong lớp HtmlHelper.

Lớp HtmlHelper sẽ tạo ra các phần tử HTML. Ví dụ, @Html.ActionLink("Create New", "Create") sẽ tạo thẻ link sau <a href="/Student/Create">Create New</a>

Có nhiều phương thức mở rộng trong lớp HtmlHelper để tạo ra các Control 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.

Sự khác biệt giữa việc sử dụng 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 Model với View.

Bây giờ chúng ta sẽ tìm hiểu về các phương thức của HtmlHelper trong ASP.NET MVC.

HtmlHelper – TextBox

Trong phần này bạn sẽ tìm hiểu cách tạo  phần tử textbox trong HTML bằng HtmlHelper trong Razor View.

Lớp HtmlHelper có hai phương thức mở rộng tạo ra một phần tử textbox trong HTML (<input type=”text”>) trong Razor View là: TextBox() và TextBoxFor().

Phương thức TextBox() là phương thức mở rộng được định kiểu lỏng lẻo trong khi TextBoxFor() là phương thức mở rộng được định kiểu mạnh.

Chúng tôi sẽ sử dụng lớp Model Student sau để minh họa cho phương thức TextBox() và TextBoxFor().

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public int Age { get; set; }
    public bool IsNewlyEnrolled { get; set; }
    public string Password { get; set; }
}

Html.TextBox()

Phương thức Html.TextBox() tạo phần tử <input type=”text”> với các tham số name, value và htmlAttributes.

Chữ ký phương thức Html.TextBox()

MvcHtmlString Html.TextBox(string name, string value, object htmlAttributes)

Phương thức TextBox() có nhiều phương thức quá tải. Vui lòng truy cập MSDN để biết tất cả các phương thức quá tải của phương thức Html.TextBox().

Phương thức TextBox() là một phương thức được định kiểu lỏng lẻo vì tham số name là một chuỗi. Tham số name có thể là tên thuộc tính của đối tượng Model.

Nó liên kết thuộc tính được chỉ định với textbox HTML. Vì vậy, nó tự động hiển thị một giá trị của thuộc tính Model trong một textbox và ngược lại.

@model Student

@Html.TextBox("StudentName", null, new { @class = "form-control" })

Kết quả HTML:

<input class="form-control" 
        id="StudentName" 
        name="StudentName" 
        type="text" 
        value="" />

Trong ví dụ trên, tham số đầu tiên là thuộc tính “StudentName” của lớp Model Student sẽ được đặt làm name và id của textbox.

Tham số thứ hai là một giá trị để hiển thị trong textbox, trong ví dụ trên là NULL. Nếu bạn muốn hiển thị giá trị của thuộc tính StudentName thì bạn chỉ cần thay null bằng Model.StudentName.

Tham số thứ ba sẽ được đặt làm thuộc tính class của textbox. Tham số htmlAttributes là kiểu object, vì vậy nó có thể là đối tượng ẩn danh.

Trong ví dụ trên, vì thuộc tính class của textbox trùng tên với từ khóa class trong C# nên bạn phải sử dụng ký tự @ ở đằng trước để trình biên dịch hiểu đây không phải là khai báo lớp trong C#.

Bạn cũng có thể chỉ định bất kỳ tên cho hộp văn bản. Tuy nhiên, nó sẽ không được liên kết với thuộc tính của lớp Model.

@Html.TextBox("myTextBox", "This is value", new { @class = "form-control" })

Kết quả HTML:

<input class="form-control" 
        id="myTextBox" 
        name="myTextBox" 
        type="text" 
        value="This is value" />

Html.TextBoxFor

Phương thức trợ giúp Html.TextBoxFor() là một phương thức mở rộng được định kiểu mạnh. Nó tạo ra một phần tử textbox cho thuộc tính Model được chỉ định bằng biểu thức lambda.

Phương thức Html.TextBoxFor() liên kết một thuộc tính đối tượng Model đã chỉ định với textbox. Vì vậy, nó tự động hiển thị giá trị của thuộc tính Model trong textbox và ngược lại.

Chữ ký phương thức Html.TextBoxFor()

MvcHtmlString TextBoxFor(Expression<Func<TModel,TValue>> expression, object htmlAttributes)

Phương thức Html.TextBoxFor() có nhiều phương thức quá tải. Truy cập MSDN để biết tất cả các phương thức quá tải của phương thức Html.TextBoxFor().

Ví dụ minh họa phương thức Html.TextBoxFor():

@model Student

@Html.TextBoxFor(m => m.StudentName, new { @class = "form-control" })

Kết quả HTML:

<input class="form-control" 
        id="StudentName" 
        name="StudentName" 
        type="text" 
        value="John" />

Trong ví dụ trên, tham số đầu tiên trong phương thức Html.TextBoxFor() là biểu thức lambda chỉ định thuộc tính StudentName để liên kết với textbox. Nó tạo ra một phần tử input với id và name được đặt thành tên thuộc tính

Thuộc tính value sẽ được gán giá trị của thuộc tính StudentName, ví dụ John. Hình dưới đây cho thấy phần tử input được tạo bởi ví dụ trên.

Sự khác biệt giữa @Html.TextBox() và @Html.TextBoxFor()

• @Html.TextBox() là phương thức mở rộng được định kiểu lỏng lẻo trong khi @Html.TextBoxFor() là phương thức mở rộng được định kiểu mạnh.
• @Html.TextBox() yêu cầu tên thuộc tính dưới dạng tham số chuỗi trong đó @Html.TextBoxFor() yêu cầu biểu thức lambda làm tham số.
• @Html.TextBox() không cung cấp cho bạn lỗi thời gian biên dịch nếu bạn chỉ định sai tên thuộc tính. Nó sẽ ném ngoại lệ lúc thực thi.
• @Html.TextBoxFor() là phương thức được định kiểu mạnh vì vậy nó sẽ cung cấp cho bạn lỗi lúc biên dịch nếu bạn chỉ định sai tên thuộc tính.
• @Html.TextBoxFor() giúp mã có khả năng duy trì tốt hơn, nhất là trong trường hợp thay đổi tên thuộc tính của lớp Model. Trong trường hợp này bạn không phải sửa lại tên thuộc tính trong view, nếu bạn sử dụng @Html.TextBox() hoặc thẻ HTML thì bạn sẽ phải sửa lại tên thuộc tính trong View.