Trong bài viết https://ngocminhtran.com/2020/04/22/blazor-viet-ma-c-tren-trinh-duyet-web/ chúng ta đã có dịp làm quen với Blazor WebAssembly và trong bài này chúng ta sẽ tạo một ứng dụng Blazor WebAssembly đầu tiên.

Cài đặt Blazor WebAssembly Template

Vì Blazor WebAssembly chỉ là bản Preview (và theo thông báo sẽ có bản chính thức trong tháng 5/2020) nên chúng ta cần cài đặt bản Preview này nếu trước đó chưa từng cài đặt. Để cài đặt chúng ta truy cập trang https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Templates/ để lấy bản Preview mới nhất

Tạo ứng dụng Blazor WebAssembly

Mở Visual Studio 2019 và tạo ứng dụng Blazor App

Nhấn Next. Đặt tên dự án là BlazorFirstApp và vị trí lưu dự án trong hộp thoại Configure your new project. Nhấn Create. Trong hộp thoại Create a new Blazor app chọn Blazor WebAssembly App và các tùy chọn khác mặc định

Nhấn Create. Nếu gặp lỗi

Thì cần cập nhật lại Visual Studio 2019 Community lên phiên bản mới nhất

Mở lại dự án và chọn tập tin index.razor trong thư mục Pages từ cửa sổ Solution Explorer:

Kết quả:

Đóng ứng dụng. Thay đổi tiêu đề nội dung của <h1> trong tập tin index.razor

Thực thi lại

Làm việc với Blazor tức là làm việc với các thành phần razor (razor component) nên nếu ai đã quen thuộc với cú pháp Razor thì có thể dùng trong Blazor. Nếu chưa biết thì chúng ta sẽ tìm hiểu qua các bài sau.

Trước khi kết thúc bài viết chúng ta sẽ tạo một trang mới gọi là MyPage.razor bằng cách nhấn chuột phải vào thư mục Pages > Add > New Item…

Trong hộp thoại Add New Item chọn Razor Component

Và gõ MyPage.razor trong mục Name. Nhấn nút Add. Thay đổi nội dung mặc định trong trang MyPage.razor bằng nội dung như sau:


<h3>Welcome to my page.</h3>

<p>I am @Intro</p>

@code {

  string Intro = "Ngoc Minh Tran";

}

Lưu và đóng trang MyPage.razor. Mở trang Index.razor và thêm <MyPage /> đến cuối trang


@page "/"

...

<MyPage />

Thực thi trang Index.razor

Mở lại trang MyPage.razor và thay đổi nội dung biến Intro thành Albert Einstein. Thực thi lại Index.razor:

Lời cuối

Trong bài viết này chúng ta đã làm tìm hiểu cách cài đặt Blazor WebAssembly Template và cũng đã tạo một ứng dụng đầu tiên. Chi tiết hơn về các khái niệm trong Blazor chúng ta sẽ tìm hiểu trong các bài sau.