Binding
Kết nối dữ liệu C# với giao diện. Thử trực tiếp cách hiển thị một chiều, nhập liệu hai chiều và xử lý sự kiện.
Thao tác ở mỗi ví dụ, quan sát giá trị bên dưới rồi mở Xem code để đối chiếu. Dùng nút đặt lại ở cuối bài khi muốn bắt đầu lại.
01 · One-way binding — C# → giao diện
Input chỉ hiển thị giá trị từ biến. Gõ trong input không làm đổi biến. Khi bấm nút, C# đổi biến → UI đổi theo.
Message: Hello Blazor!
Xem code
<input class="form-control" value="@Message" />
<p><b>Message:</b> @Message</p>
<button class="btn btn-primary" @onclick="ChangeMessage">Đổi Message từ C#</button>
private string Message = "Hello Blazor!";
private void ChangeMessage() => Message = $"Updated at {DateTime.Now:HH:mm:ss}";
02 · Two-way binding — giao diện ↔ C#
Dùng @bind="Name" để đồng bộ 2 chiều.
Mặc định cập nhật theo event onchange (blur / Enter).
Name:
Xem code
<input class="form-control" @bind="Name" />
<p><b>Name:</b> @Name</p>
private string Name = "";
03 · Thời điểm cập nhật: onchange và oninput
onchange (mặc định): cập nhật khi blur / Enter.
oninput: cập nhật realtime khi gõ (dùng @bind:event="oninput").
TypingOnChange:
TypingOnInput:
Xem code
<!-- Mặc định: onchange -->
<input class="form-control" @bind="TypingOnChange" />
<!-- Realtime: oninput -->
<input class="form-control"
@bind="TypingOnInput"
@bind:event="oninput" />
private string TypingOnChange = "";
private string TypingOnInput = "";
04 · Nhập giá trị số
Bind với int. Nhập số → biến cập nhật.
Age: 18
Xem code
<input type="number" class="form-control" @bind="Age" />
private int Age = 18;
05 · Lựa chọn với Select và Checkbox
Blazor tự suy ra thuộc tính bind:
Select → value, Checkbox → checked.
Role:
Agree: False
Xem code
<select class="form-select" @bind="Role">
<option value="">-- chọn --</option>
<option>Admin</option>
<option>User</option>
<option>Guest</option>
</select>
<input type="checkbox" class="form-check-input" @bind="Agree" />
private string Role = "";
private bool Agree = false;
06 · Chủ động xử lý onchange
Dùng value="..." để hiển thị (one-way), và tự xử lý @onchange
khi muốn kiểm soát validate/logic.
ManualValue: manual initial
Xem code
<input class="form-control"
value="@ManualValue"
@onchange="OnManualChange" />
private string ManualValue = "manual initial";
private void OnManualChange(ChangeEventArgs e)
{
ManualValue = e.Value?.ToString() ?? "";
}
07 · Event binding với @onclick
Event binding xử lý sự kiện UI. Có 2 trường hợp: không đối số và có đối số.
7.1 @onclick không đối số
Method không có tham số → truyền trực tiếp tên method.
Result:
Xem code
<button class="btn btn-success" @onclick="OnClickNoParam">
Click (no param)
</button>
private string ClickResultNoParam = "";
private void OnClickNoParam()
{
ClickResultNoParam = $"Clicked at {DateTime.Now:HH:mm:ss}";
}
7.2 @onclick có đối số
Method có tham số → dùng lambda để truyền đối số.
Result:
Xem code
<button class="btn btn-warning" @onclick="() => OnClickWithParam(1)">
Click (param = 1)
</button>
private string ClickResultWithParam = "";
private void OnClickWithParam(int value)
{
ClickResultWithParam = $"Clicked with param = {value}";
}
7.3 Truyền biến vào event
Có thể truyền biến; giá trị được lấy tại thời điểm click.
Result:
Xem code
<input type="number" class="form-control" @bind="CurrentStep" />
<button class="btn btn-info"
@onclick="() => OnClickWithParam(CurrentStep)">
Click
</button>
private int CurrentStep = 1;