Phạm Duy Anh

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