Trong Blazor, cơ chế liên kết dữ liệu hai chiều được hỗ trợ qua hai chỉ thị chính:
@bind và
@bind-value. Mặc dù cả hai đều đạt mục tiêu chung là đồng bộ hóa giá trị giữa giao diện người dùng và mô hình dữ liệu, cách thức triển khai và phạm vi linh hoạt lại khác biệt rõ rệt.
1. @bind — Cú pháp rút gọn cho trường hợp phổ biến
Đây là cú pháp được khuyến nghị cho đa số tình huống, đặc biệt khi cần liên kết nhanh với thuộc tính
value của phần tử và phản ứng theo sự kiện mặc định (
onchange).
<input @bind="ProductName" />
<select @bind="CategoryCode">
<option value="">Chọn danh mục</option>
<option value="ELEC">Điện tử</option>
<option value="FASH">Thời trang</option>
</select>
Tính năng nổi bật:
- Tự động ánh xạ tới thuộc tính
value của phần tử HTML
- Kích hoạt cập nhật dữ liệu sau khi mất tiêu điểm hoặc khi người dùng chọn giá trị (ví dụ: chọn từ
<select>)
- Không yêu cầu khai báo tường minh sự kiện hay định dạng
2. @bind-value — Kiểm soát chi tiết hơn
Cú pháp này mở rộng khả năng tùy chỉnh bằng cách cho phép xác định rõ ràng sự kiện kích hoạt cập nhật và định dạng đầu ra — đặc biệt hữu ích khi làm việc với kiểu dữ liệu phức tạp như
DateTime hoặc nhu cầu cập nhật tức thì.
<!-- Cập nhật ngay khi gõ (không chờ mất tiêu điểm) -->
<input @bind-value="Query" @bind-value:event="oninput" />
<!-- Liên kết ngày tháng với định dạng cụ thể -->
<input type="text" @bind-value="HireDate" @bind-value:format="dd/MM/yyyy" />
So sánh trực quan
| Tính năng |
@bind |
@bind-value |
| Cú pháp |
Rút gọn, dễ đọc |
Chi tiết, tường minh |
| Sự kiện cập nhật |
Mặc định: onchange |
Có thể ghi đè bằng @bind-value:event |
| Hỗ trợ định dạng |
Không |
Có — thông qua @bind-value:format |
| Phù hợp khi |
Giao diện đơn giản, không yêu cầu hành vi đặc biệt |
Cần kiểm soát thời điểm cập nhật hoặc chuẩn hóa đầu vào |
Ví dụ thực tế
Liên kết tức thì cho ô tìm kiếm
<!-- Sử dụng @bind-value để cập nhật khi người dùng gõ -->
<input placeholder="Tìm sản phẩm..."
@bind-value="SearchKeyword"
@bind-value:event="oninput" />
Liên kết ngày tháng với định dạng hiển thị
<!-- Hiển thị dưới dạng dd/MM/yyyy, nhưng lưu dưới dạng DateTime -->
<input type="text"
@bind-value="StartDate"
@bind-value:format="dd/MM/yyyy" />
Liên kết với thành phần tùy chỉnh
<!-- Thành phần MyDatePicker tự xuất khẩu event ValueChanged -->
<MyDatePicker @bind-Value="TargetDate" />
<!-- Tương đương với việc khai báo tường minh sự kiện -->
<MyDatePicker @bind-Value="TargetDate"
@bind-Value:event="ValueChanged" />
Đổi mới trong .NET 7 trở lên
Từ phiên bản .NET 7,
@bind đã được mở rộng để hỗ trợ các tùy chọn nâng cao mà trước đây chỉ có ở
@bind-value:
<!-- Cập nhật tức thì với @bind + @bind:event -->
<input @bind="LiveInput" @bind:event="oninput" />
<!-- Tách logic lấy/gán giá trị -->
<input @bind:get="DisplayText" @bind:set="UpdateFromInput" />
<!-- Thực thi hàm sau khi liên kết hoàn tất -->
<input @bind="FormData.Email" @bind:after="ValidateEmail" />
Tóm lại,
@bind nên là lựa chọn mặc định trong thiết kế UI Blazor, trong khi
@bind-value đóng vai trò như công cụ chuyên biệt khi cần can thiệp sâu vào chu kỳ liên kết — ví dụ như điều chỉnh tần suất cập nhật hoặc xử lý định dạng đầu vào đầu ra.