Blazor cho phép bạn liên kết các HTML control với các properties để các giá trị thay đổi được tự động hiển thị trong giao diện người dùng (UI). Trong bài này, bạn sẽ học cách sử dụng data binding trong Blazor để liên kết các phần tử giao diện người dùng với các giá trị dữ liệu, thuộc tính hoặc biểu thức.
Data binding là gì ?
Nếu bạn muốn một phần tử HTML hiển thị một giá trị, bạn có thể viết mã để thay đổi hiển thị. Bạn sẽ cần viết thêm mã để cập nhật màn hình khi giá trị thay đổi. Trong Blazor, bạn có thể sử dụng data binding để kết nối một phần tử HTML với một field, thuộc tính hoặc biểu thức. Bằng cách này, khi giá trị thay đổi, phần tử HTML sẽ tự động được cập nhật. Cập nhật thường diễn ra nhanh chóng sau khi thay đổi và bạn không phải viết bất kỳ mã cập nhật nào.
Để ràng buộc một điều khiển, hãy sử dụng chỉ thị @bind:
@page "/"
<p>
Your email address is:
<input @bind="customerEmail" />
</p>
@code {
private string customerEmail = "john.doe@contoso.com"
}
Trong trang trước, bất cứ khi nào biến customerEmail thay đổi giá trị của nó, giá trị <input> sẽ cập nhật.
Các control, chẳng hạn như <input>, chỉ cập nhật hiển thị của chúng khi thành phần được hiển thị chứ không phải khi giá trị của trường thay đổi. Vì các thành phần Blazor hiển thị sau khi thực thi bất kỳ mã trình xử lý sự kiện nào, nên trên thực tế, các bản cập nhật thường được hiển thị nhanh chóng.
Bind elements với specific events
Chỉ thị @bind thông minh và hiểu các control mà nó sử dụng. Ví dụ: khi bạn liên kết một giá trị với một textbox <input>, nó sẽ liên kết value attribute. HTML checkbox <input> có thuộc tính checked thay vì thuộc tính giá trị. Thay vào đó, thuộc tính @bind sẽ tự động sử dụng thuộc tính checked này. Theo mặc định, điều khiển bị ràng buộc với sự kiện DOM onchange. Ví dụ: hãy xem xét trang này:
@page "/"
<h1>My favorite pizza is: @favPizza</h1>
<p>
Enter your favorite pizza:
<input @bind="favPizza" />
</p>
@code {
private string favPizza { get; set; } = "Margherita"
}
Khi trang được hiển thị, giá trị mặc định Margherita được hiển thị trong cả phần tử <h1> và textbox. Khi bạn nhập một chiếc bánh pizza yêu thích mới vào textbox, phần tử <h1> sẽ không thay đổi cho đến khi bạn tab out ra khỏi textbox hoặc chọn Enter vì đó là khi sự kiện onchange DOM kích hoạt.
Thông thường, đó là hành vi bạn muốn. Nhưng giả sử bạn muốn phần tử <h1> cập nhật ngay khi bạn nhập bất kỳ ký tự nào vào textbox. Thay vào đó, bạn có thể đạt được kết quả này bằng cách liên kết với sự kiện DOM oninput . Để liên kết với sự kiện này, bạn phải sử dụng chỉ thị @bind-value và @bind-value: event:
@page "/"
<h1>My favorite pizza is: @favPizza</h1>
<p>
Enter your favorite pizza:
<input @bind-value="favPizza" @bind-value:event="oninput" />
</p>
@code {
private string favPizza { get; set; } = "Margherita"
}
Trong trường hợp này, tiêu đề sẽ thay đổi ngay khi bạn nhập bất kỳ ký tự nào vào textbox.
Format bound values
Nếu bạn hiển thị ngày tháng cho người dùng, bạn có thể muốn sử dụng định dạng dữ liệu được bản địa hóa. Ví dụ: giả sử bạn viết một trang dành riêng cho người dùng Vương quốc Anh, những người thích viết ngày tháng với ngày trước. Bạn có thể sử dụng chỉ thị @bind: format để chỉ định một chuỗi định dạng ngày:
@page "/ukbirthdaypizza"
<h1>Order a pizza for your birthday!</h1>
<p>
Enter your birth date:
<input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>
@code {
private DateTime birthdate { get; set; } = new(2000, 1, 1);
}
Để kiểm tra thông tin mới nhất về các định dạng ràng buộc, hãy xem Định dạng chuỗi trong tài liệu Blazor.
theo: https://docs.microsoft.com/en-us/learn/modules/interact-with-data-blazor-web-apps/8-bind-control-data-blazor-applications
Pingback: Tận dụng sức mạnh của Blazor forms | Phạm Duy Anh