Binding Test (One-way, Two-way & Event binding)
1- One-way binding với input (C# → UI)
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}";
2- Two-way binding với input (UI ↔ 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 = "";
3- Two-way binding: onchange vs 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 = "";
4- Two-way binding với số (type="number")
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;
5- Two-way binding với Select + 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;
6- One-way + tự xử lý onchange (manual control)
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() ?? "";
}
7- Event binding (@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;