Bài Viết này sẽ hướng dẫn các bạn thêm 1 component đơn giản trong Blazor Server. Chúng ta sẽ implement 1 Calculator component chức năng là máy tính đơn giản.
Thêm component trong Blazor Server
Trong cửa sổ Solution Explorer, click chuột phải ở Thư mục Page -> Add -> Razor Component…
đặt tên cho compoment là Calculator.razor -> Add
Lúc này chúng ta có code của Calculator.razor như bên dưới
<h3>Calculator</h3>
@code {
}
Chúng ta sẽ định nghĩa Route (@page “/calculator”) và thêm code html như sau vào Calculator.razor
@page "/calculator"
<PageTitle>Calculator</PageTitle>
<h1>Calculator</h1>
<p>
<span>A:<input type="number" /> </span>
</p>
<p>
<span>B:<input type="number" /> </span>
</p>
<p>
<span>= <input type="number" /> </span>
</p>
<p>
<button class="btn btn-primary" >A+B</button>
</p>
Kế tiếp chúng ta sẽ thêm liên kết vào NavMenu, mở file Shared/NavMenu.razor và thêm đoạn code sau vào dưới Fetch data
<div class="nav-item px-3">
<NavLink class="nav-link" href="calculator">
<span class="oi oi-list-rich" aria-hidden="true"></span>calculator
</NavLink>
</div>
trong đó href=”calculator” sẽ gọi route mà chúng ta đã định nghĩa ở @page “/calculator” của Calculator.razor
run thử web và chúng ta sẽ thấy Calculator component như bên dưới

Thêm code c# để xử lý trong component Blazor
ở bước tiếp theo chúng ta sẽ thêm code xử lý để khi click vào button A+B thì sẽ lấy A cộng B và hiển thị kết quả bên dưới.
chúng ta thêm code sao vào @code
@code {
private int numberA = 0;
private int numberB = 0;
private int numberAB = 0;
private void SumAB()
{
numberAB = numberA + numberB;
}
}
bind giá trị vào html input và gắn event onclick của button. lúc này toàn bộ code của Calculator.razor sẽ như sau
@page "/calculator"
<PageTitle>Calculator</PageTitle>
<h1>Calculator</h1>
<p>
<span>A:<input type="number" @bind="numberA" /> </span>
</p>
<p>
<span>B:<input type="number" @bind="numberB" /> </span>
</p>
<p>
<span>= <input type="number" @bind="numberAB" /> </span>
</p>
<p>
<button class="btn btn-primary" @onclick="SumAB">A+B</button>
</p>
@code {
private int numberA = 0;
private int numberB = 0;
private int numberAB = 0;
private void SumAB()
{
numberAB = numberA + numberB;
}
}
run thử web và chúng ta sẽ thấy Calculator component như bên dưới, khi click button A+B, kết quả phép tính cộng A và B sẽ được thực hiện

Như vậy chúng ta đã vừa thêm component đơn giản trong Blazor Server
Pingback: Cấu trúc project ASP.NET Core Blazor server | Phạm Duy Anh
Pingback: Data binding và events trong Blazor | Phạm Duy Anh