Input Tag Helper trong ASP.NET Core

Input Tag Helper tạo ra phần tử HTML tương ứng với thuộc tính của Model là input. Thuộc tính model được kết hợp với tag helper sử dụng thuộc tính asp-for. Input tag helper tạo ra các thuộc tính HTML tương ứng như type, name và id dựa trên các thông tin của thuộc tính model như kiểu dữ liệu và data annotation được áp dụng vào thuộc tính của ViewModel. ViewModel phải gắn vào một strongly typed view. Nó cũng cung cấp các validation cho thuộc tính giúp có thể hỗ trợ validate phía client. Thuộc tính asp-format giúp định dạng các dữ liệu nhập vào.

Input tag helper

Input tag helper áp dụng trên phần tử HTML là <input. Nó chỉ có 2 thuộc tính server-side là:

• asp-for
• asp-format

asp-for

Thuộc tính này kết hợp với thuộc tính tương ứng trong View Model và tạo ra HTML dựa trên thông tin thuộc tính đó như kiểu, tên, và data annotation (chỉ dẫn trên thuộc tính của ViewModel).

<input asp-for=”<Expression Name>” />

Ví dụ về asp-for

Bạn có một model có thuộc tính Name:

public string Name { get; set; }

Ở view sẽ có một phần tử input:

<input asp-for="Name" /><br />

Nó sẽ tạo ra một phần tử HTML như sau khi thực thi:

<input type="text" id="Name" name="Name" value="" /><br />

Các thuộc tính của HTML Input

Thuộc tính asp-for tự động tạo ra phần tử HTML dựa trên các thông số sau đây:

• Kiểu chỉ ra trong HTML
• Data annotation được áp dụng cho thuộc tính model
• Kiểu dữ liệu của thuộc tính đó trong .NET được dùng

Kiểu chỉ ra trong HTML

Type là thuộc tính được định nghĩa trong HTML và nó sẽ không bị ghi đè:

[EmailAddress]
public string Email { get; set; }

View sẽ là:

<input type=”text” asp-for="Email" /><br />

HTML sẽ tạo ra một input text vì cái data annotation là [EmailAddress] nó không ảnh hưởng đến kết quả HTML tạo ra. Nó vẫn tạo ra như sau:

<input type="text" id="Email" name="Email" value="" /><br />

Dựa trên thuộc tính Data Annotaion

Thuộc tính Data Annotation được áp dụng cho model để tạo ra thuộc tính type. Ví dụ ta có data annotation EmailAddress nó sẽ tự dịch ra type="email":

[EmailAddress]
public string Email { get; set; }

Code view:

<input asp-for="Email" /><br />

HTML tạo ra sẽ là:

<input type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." id="Email" name="Email" value="" /><br />

Đây là danh sách các Data Annotation và các kiểu của input tạo ra tương ứng nếu sử dụng chúng:

Dựa trên .NET Type

Nếu thuộc tính Data Annotation không được chỉ ra, thì Input Tag Helper sẽ sử dụng kiểu .NET của thộc tính đó để xác định kiểu của HTML tạo ra. Ví dụ:

Model:

public DateTime DateOfJoining { get; set; }

View 

<input asp-for="DateOfJoining" />

HTML:

<input type="datetime-local" data-val="true" data-val-required="The DateOfJoining field is required." id="DateOfJoining" name="DateOfJoining" value="0001-01-01T00:00:00.000" /><br />

Hoặc là kiểu boolean:

Model

public bool isActive { get; set; }

View:

<input asp-for="isActive" /><br />

HTML:

<input type="checkbox" data-val="true" data-val-required="The isActive field is required." id="isActive" name="isActive" value="true" /><br />

Đây là danh sách các kiểu .NET hay dùng và input tạo ra tương ứng:

Thuộc tính id và name trong HTML

Thuộc tính id và name trong HTML nhận từ biểu thức tên của thuộc tính qua asp-for

[EmailAddress]
public string Email { get; set; }

<input type=”text” asp-for="Email" /><br />

Nó sẽ tạo ra HTML như sau. Thuộc tính id và name giống như giá trị được điền trong asp-for

<input type="text" id="Email" name="Email" value="" /><br />

Các thuộc tính con

Hãy xem xét model person dưới đây có chứa thuộc tính Address và một mảng màu:

public class person
{
    public List<string> colors { get; set; }
    public Address Address { get; set; }
 
    public person()
    {
        Address = new Address();
        colors = new List<string>(){"red","blue"};
    }
}
 
public class Address
{
    public string address1 { get; set; }
}

Bạn có thể tham chiếu đến address1:

<input asp-for="Address.address1" /><br />

Đoạn code ở trên tạo ra HTML như bên dưới. Chú ý rằng thuộc tính name và id giống với biểu thức trong asp-for nhé. Thuộc tính id sử dụng dấu gạch dưới thay cho dấu chấm:

<input type="text" id="Address_address1" name="Address.address1" value="" /><br />

Danh sách màu:

<input asp-for="colors[0]" /><br />

Nó sẽ tạo ra HTML và chỉ ra tên của phần tử dựa trên dấu [] và chỉ số ở trong

<input type="text" id="colors_0_" name="colors[0]" value="red" /><br />

Các thuộc tính Validation

Input Tag Helper cũng tạo ra các thuộc tính validate dữ liệu trong HTML. Các thuộc tính validate dữ liệu bắt đầu bằng data-val-*. Chúng chứa các thông tin validation như giá trị lớn nhất nhỏ nhất, bắt buộc nhập hay không, miền giá trị cho phép, biểu thức quy tắc hay thông báo lỗi...

ASP.NET Core Unobtrusive Client Validation framework sử dụng các thuộc tính data-val-* này để validate dữ liệu trên phía client. Input tag helper xác định các thuộc tính validation bằng cách phân tích các kiểu trong .NET và data annotation áp dụng cho thuộc tính model.

Ví dụ áp dụng thuộc tính [Required] cho kiểu string, thuộc tính data-val và data-val-required sẽ được thêm vào thẻ input HTML:

[Required]
public string Name { get; set; }

HTML tạo ra:

<input asp-for="@Model.Name" /><br />
<input type="text" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" value="" /><br />

Thêm thuộc tính ErrorMessage vào Required:

[Required(ErrorMessage ="Please enter the name")]
public string Name { get; set; }

View:

<input asp-for="Name" /><br />

HTML tạo ra sẽ là:

<input type="text" data-val="true" data-val-required="Please enter the name" id="Name" name="Name" value="" /><br />

Kiểu DataTime tự động tạo ra data-val-required, ngay cả khi thuộc tính [Required] không được chỉ ra:

public DateTime DateOfJoining { get; set; }

<input asp-for="@Model.DateOfJoining" />

HTML tạo ra:

<input type="datetime-local" data-val="true" data-val-required="The DateOfJoining field is required." id="DateOfJoining" name="DateOfJoining" value="0001-01-01T00:00:00.000" /><br />

Bạn có thể bỏ việc này bằng cách đặt kiểu DateTime là nullable:

public DateTime? DateOfJoining { get; set; }

<label for="DateOfJoining">DateOfJoining</label>

HTML tạo ra:

<input type="datetime-local" id="DateOfJoining" name="DateOfJoining" value="" /><br />

Danh sách một số kiểu của data annotation sẽ tạo ra thuộc tính validation tương ứng:

asp-format

Thuộc tính asp-format định dạng chuỗi cho thuộc tính input. Ví dụ bạn format số với 2 số thập phân đằng sau:

public decimal Balance { get; set; }

<input asp-for="Balance" asp-format="{0:N2}" /><br />

HTML tạo ra:

<input type="text" data-val="true" data-val-number="The field Balance must be a number." data-val-required="The Balance field is required." id="Balance" name="Balance" value="0.00" /><br />

Đây là danh sách các format type dùng cho as-format

Trích nguồn từ: (https://www.tektutorialshub.com/)