The Textarea Tag Helper

Để nhập đoạn text nói chung thì HTML cho hai element: Input làm việc với mọi đầu vào từ dạng text cho tới nút radio hay cjeck. Một điều nữa là input dạng text dùng để nhập dòng ngắn, đơn dòng nhưng không cho đoạn text dài. Với mục đích này, chúng ta có Textarea. Nó cho phép nhập nhiều dòn và có scrollbar. ASP.NET Core hỗ trợ Tag Helper cho Textarea và chúng ta sẽ xem cụ thể.

The for property

Giống nhiều Tag Helper khác, liên kết với Model thông qua thuộc tính "for" và chúng có mào đầu. Mào đầu luôn là "asp", trừ phi bạn thay đổi. Hay nói cách khác, Tag Helper có Textarea như sau:

<textarea asp-for="Description"></textarea>

HTML có dang như sau:

<textarea id="Description" name="Description"></textarea>

Do không có kích thước hay gì được định nghĩa nên khi hiển thị trình duyệt sẽ xác định. Nếu bạn muốn điều khiển nó thì bạn có thể dùng các thuộc tính HTML liên quan - cả "cols" và "rows" hay thuộc tính Style dùng CSS. Đây là một ví dụ của Tag Helper với thuộc tính HTML thông thường:

<textarea asp-for="Description" cols="25" rows="3"></textarea>

<textarea asp-for="Description" style="height: 40px; width: 200px;"></textarea>

Có nhiều lựa chọn dùng CSS nhưng ở bài khác.

Controlling minimum and maximum lengths

Cả Input và Textarea đều cho phép ta dùng thuộc tính maxlength để điều khiển lượng ký tự lớn nhất được phép nhập vào. Tuy nhiên khi dùng Tag Helper, không cần dùng trong markup mà định nghĩa trong Model. Nó cho phép bạn định nghĩa tại một chỗ và tái sử dụng. Ví dụ với lớp Movie, ta định nghĩa MaxLength cho thuộc tính Description:

public class Movie
{
    [MaxLength(50)]
    public string Title { get; set; }

    public DateTime ReleaseDate { get; set; }

    [MaxLength(250)]
    public string Description { get; set; }
}

Data Annotaions được dùng để sinh ra HTML cho Model của bạn - hay nói cách khác, Tag Helper sau sẽ tự động dùng MaxLength trong Data Annotations. Ví dụ:

<input asp-for="Title" /><br />
<textarea asp-for="Description"></textarea>

And the result:

<input type="text" data-val="true" data-val-maxlength="The field Title must be a string or array type with a maximum length of &#x27;50&#x27;." data-val-maxlength-max="50" id="Title" maxlength="50" name="Title" value="" /><br />
<textarea data-val="true" data-val-maxlength="The field Description must be a string or array type with a maximum length of &#x27;250&#x27;." data-val-maxlength-max="250" id="Description" maxlength="250" name="Description">

Chú ý cách mà maxlenght được đưa vào markup nhưng trên hết thuộc tính dữ liệu sinh ra để hỗ trợ Client-side Model Validation. Nếu bạn kiểm tra FORM trong một trình duyể thì bạn sẽ thấy không thể thêm chuỗi có chiều dài lớn hơn maxlength.

Vậy chiều dài nhỏ nhất thì sao? Đó không thực sự là một phần của HTML, nên không có thuộc tính mà trình duyệt liên quan tới. Tuy nhiên, nó có thể định nghĩa trong Model nếu ta dùng Model Validation:

public class Movie
{
    [MinLength(2)]
    [MaxLength(50)]
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }

    [MinLength(10)]
    [MaxLength(250)]
    public string Description { get; set; }
}

Kết quả trả về cho ta thấy chỉ chiều dài tối đa mới là thành phần HTML nhưng chiều dài tối thiểu chỉ là thuộc tính dữ liệu, dùng bởi client-side Model Validation:

<input type="text" 
    data-val="true" 
    data-val-maxlength="The field Title must be a string or array type with a maximum length of &#x27;50&#x27;." 
    data-val-maxlength-max="50" 
    data-val-minlength="The field Title must be a string or array type with a minimum length of &#x27;2&#x27;." 
    data-val-minlength-min="2" 
    id="Title" 
    maxlength="50" 
    name="Title" 
    value="" /><br />
<textarea data-val="true" 
    data-val-maxlength="The field Description must be a string or array type with a maximum length of &#x27;250&#x27;." 
    data-val-maxlength-max="250" 
    data-val-minlength="The field Description must be a string or array type with a minimum length of &#x27;10&#x27;." 
    data-val-minlength-min="10" 
    id="Description" 
    maxlength="250" 
    name="Description">

Summary

Giống Tag Helper cho Input, thì Textarea Tag Helper cho chúng ta dễ dàng liên kết giữa Model và Textarea trong View.