BÁO cáo GIỮA kì CÔNG NGHỆ NET đề tài tìm hiểu blazor trong NET core 6 0

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐ HỒ CHÍ MINH
KHOA CƠNG NGHỆ THƠNG TIN

BÁO CÁO GIỮA KÌ
CƠNG NGHỆ NET
Đề tài:

Tìm hiểu Blazor trong .NET Core 6.0

Thành phố Hồ Chí Minh, ngày 20 tháng 11 năm 2022


TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐ HỒ CHÍ MINH
KHOA CƠNG NGHỆ THƠNG TIN

BÁO CÁO GIỮA KÌ
CƠNG NGHỆ NET
Đề tài:

Tìm hiểu Blazor trong .NET Core 6.0

Thành viên nhóm NET 5.0:
Nguyễn Thế Hoàng
46.01.104.057
Nguyễn Nhất Huy
46.01.104.072
Nguyễn Ngọc Yến Nhi
46.01.104.131
46.01.104.179
Mạc Đỉnh Thy

46.01.104.159
Trần Nhật Tân
Mã lớp: 2211COMP106401
Giáo viên hướng dẫn: Thầy Lương Trần Hy Hiến.

Thành phố Hồ Chí Minh, ngày 20 tháng 11 năm 2022


LỜI CẢM ƠN
"Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Sư Phạm đã đưa
môn học Cơng nghệ NET vào trương trình giảng dạy. Đặc biệt, em xin gửi lời cảm ơn
sâu sắc đến giảng viên bộ môn – Thầy Lương Trần Hy Hiến đã dạy dỗ, truyền đạt
những kiến thức quý báu cho em trong suốt thời gian học tập vừa qua. Trong thời
gian tham gia lớp học Công nghệ NET của thầy, em đã có thêm cho mình nhiều kiến
thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc. Đây chắc chắn sẽ là những kiến
thức quý báu, là hành trang để em có thể vững bước sau này.
Bộ mơn Cơng nghệ NET là mơn học thú vị, vơ cùng bổ ích. Đảm bảo cung cấp đủ kiến
thức, gắn liền với nhu cầu thực tiễn của sinh viên. Tuy nhiên, do vốn kiến thức còn
nhiều hạn chế và khả năng tiếp thu thực tế cịn nhiều bỡ ngỡ. Mặc dù nhóm em đã cố
gắng hết sức nhưng chắc chắn đồ án khó có thể tránh khỏi những thiếu sót và nhiều
chỗ cịn chưa chính xác, kính mong thầy xem xét và góp ý để bài tiểu luận của em
được hoàn thiện hơn.
Em xin chân thành cảm ơn!”


Mục lục
Chương 1. GIỚI THIỆU............................................................................................. 6
1.1

Blazor là gì ?.................................................................................................... 6

Blazor là mã nguồn mở............................................................................................. 6
1.2

Blazor khơng phải là gì.................................................................................... 7

1.3

Blazor cho phép:.............................................................................................. 8

1.4

Các thành phần:............................................................................................... 8

Chương 2. ỨNG DỤNG BLAZOR:........................................................................... 9
2.1

Blazor WebAssembly (client side blazor)........................................................

9

2.1.1

Điểm mạnh của Blazor WebAssembly: (Benefits).................................. 12

2.1.2

Điểm yếu của Blazor WebAssembly:(Downsides)................................. 12

Mơ hình lưu trữ....................................................................................................... 12

2.1.3
2.2

Một số file trong cấu trúc của project webAssembly.............................. 12

Blazor Server................................................................................................. 14

2.2.1

Điểm mạnh của Server-Side Blazor: (Benefits)...................................... 15

2.2.2

Điểm yếu của Server-Side Blazor:(Downsides)...................................... 15

2.2.3

Một số file trong cấu trúc của project Server-Side Blazor....................... 15

2.3

Blazor Hybrid:............................................................................................... 19

2.4

Nên chọn mơ hình lưu trữ Blazor nào?.......................................................... 20

Chương 3. XÂY DỰNG ỨNG DỤNG BLAZOR ĐẦU TIÊN................................. 21
3.1

Tải xuống và cài đặt:...................................................................................... 21

3.2

Tạo ứng dụng................................................................................................. 21

3.3

Chạy ứng dụng:.............................................................................................. 24

TÀI LIỆU THAM KHẢO........................................................................................... 25


Mục lục hình ảnh theo chương
Hình 1-1 Giới thiệu blazor............................................................................................6
Hình 1-2 Số liệu về sự phát triển của blazor.................................................................7
Hình 2-1 Blazor WebAssembly....................................................................................9
Hình 2-2 Cách hoạt động của WebAssembly.............................................................. 10
Hình 2-3 Cấu trúc folder Pages................................................................................... 14
Hình 2-4 Blazor Server............................................................................................... 14
Hình 2-5 Cấu trúc Project Blazor Server.................................................................... 16
Hình 2-6 File Host...................................................................................................... 17
Hình 2-7 Cấu trúc File Pages...................................................................................... 18
Hình 2-8 Blazor Hybrid.............................................................................................. 19
Hình 3-1 Hướng dẫn cài đặt........................................................................................ 21
Hình 3-2 Hướng dẫn tạo project................................................................................. 22
Hình 3-3 Hướng dẫn tạo project Blazor Server........................................................... 22
Hình 3-4 Khởi tạo project hồn chỉnh......................................................................... 23
Hình 3-5 Cấu trúc của project vừa tạo........................................................................ 23
Hình 3-6 Chạy project................................................................................................. 24

Hình 3-7 Thay đổi mã đang chạy................................................................................ 24
Hình 3-8 Dừng chạy................................................................................................... 24
Hình 3-9 Hello World !!!............................................................................................. 25


Chương 1.

GIỚI THIỆU

1.1 Blazor là gì ?
Ngữ cảnh: trong dự án thường sẽ sử dụng nhiều ngôn ngữ như c#(.net core) để
làm việc ở phía backend và Javascript (các thư viện, framework như reactjs,
angular) để làm việc ở phía frontend Muốn làm việc, tương tác được với giao diện
bắt buộc phải biết kiến thức về ngôn ngữ Javascript.
Mong muốn: Sử dụng ngơn ngữ c# có thể lập trình ở cả backend và frontend. Có thể
thực hiện các tương tác UI bằng c# code. Vậy là Blazor ra đời để đáp ứng mong
muốn này.
Blazor là một web framework cho phép lập trình viên tương tác, làm việc với UI
bằng c# code.

Hình 1-1 Giới thiệu blazor

Blazor là mã nguồn mở
- Mã nguồn Blazor có sẵn:
/>- Mã nguồn thuộc sở hữu của The .NET Foundation , một tổ chức phi lợi nhuận
được tạo ra với mục đích hỗ trợ các dự án nguồn mở dựa trên .NET framework.
- Theo nền tảng .NET, tại thời điểm viết bài này, nó được hỗ trợ bởi 3.700 cơng

ty và có 61.000 người đóng góp.

Hình 1-2 Số liệu về sự phát triển của blazor

Blazor là một khuôn khổ để xây dựng giao diện người dùng web phía máy khách
tương tác với.NET:
Tạo giao diện người dùng tương tác phong phú bằng C# thay vì JavaScript.
Chia sẻ logic ứng dụng phía máy chủ và phía máy khách được viết bằng .NET.
Hiển thị giao diện người dùng dưới dạng HTML và CSS để hỗ trợ trình duyệt
rộng rãi, bao gồm cả trình duyệt di động.
Tích hợp với các nền tảng lưu trữ hiện đại, chẳng hạn nhưDocker.
Xây dựng các ứng dụng kết hợp dành cho máy tính để bàn và thiết bị di động
với .NET và Blazor.
Sử dụng .NET để phát triển web phía máy khách mang lại những lợi thế sau:
Viết mã bằng C# thay vì JavaScript.
Tận dụng hệ sinh thái .NET hiện có của.NET thư viện.
Chia sẻ logic ứng dụng trên máy chủ và máy khách.
Hưởng lợi từ các tệp . Hiệu suất, độ tin cậy và bảo mật của NET.
Làm việc hiệu quả trên Windows, Linux hoặc macOS với môi trường phát
triển, chẳng hạn nhưVisualStudio hoặcVisual Studio Code.
Xây dựng dựa trên một bộ ngôn ngữ, khn khổ và cơng cụ chung ổn định,
giàu tính năng và dễ sử dụng.

1.2 Blazor so với Silverlight
Blazor không giống như Silverlight, nỗ lực trước đây của Microsoft trong việc lưu trữ
các ứng dụng trong trình duyệt. Silverlight yêu cầu plugin trình duyệt để chạy trên
ứng dụng khách, điều này đã ngăn khơng cho nó chạy trên thiết bị iOS.
Blazor không yêu cầu bất kỳ loại plugin nào được cài đặt trên máy khách để thực thi
bên trong trình duyệt. Blazor hoặc chạy phía máy chủ, trong trường hợp đó, nó thực
thi trên máy chủ và trình duyệt hoạt động như một thiết bị đầu cuối hoặc nó chạy
trong chính trình duyệt bằng cách sử dụng WebAssembly

Vì WebAssugging là một tiêu chuẩn web nên nó được hỗ trợ trên tất cả các trình duyệt
chính, điều đó có nghĩa là các ứng dụng Blazor phía máy khách cũng sẽ chạy bên
trong trình duyệt trên Windows/Linux/Mac/Android và iOS.

1.3 Blazor cho phép:
Tương tác với UI bằng c# code, không yêu cầu Javascript
Sử dụng Razor Component (razor cho phép trộn code c# và html)
Tận dụng sức mạnh của thư viện, framework .net trong ứng dụng Blazor
Có 2 loại ứng dụng Blazor: Blazor WebAssembly(client side) và Blazor
Server(server side)
 Blazor Server: Là ứng dụng Blazor được chạy trên server generate
và update DOM sử dụng SignalrR
 Blazor Web Assembly: Là ứng dụng Single Page Application client
generate như bất cứ SPA nào được xây dựng bằng các frontend
framework khác.

1.4 Các thành phần:
Các ứng dụng Blazor dựa trên các thành phần . Một thành phần trong Blazor là một
thành phần của giao diện người dùng, chẳng hạn như trang, hộp thoại hoặc biểu mẫu
nhập dữ liệu.
Các thành phần là các lớp .NET C# được tích hợp trong các tập hợp .NET :
Xác định logic hiển thị giao diện người dùng linh hoạt.
Xử lý các sự kiện của người dùng.
Có thể được lồng vào nhau và tái sử dụng.
Có thể được chia sẻ và phân phối dưới dạng thư viện lớp Razor hoặc gói NuGet
.
Lớp thành phần thường được viết dưới dạng trang đánh dấu Razor.razor với phần mở
rộng tệp. Các thành phần trong Blazor được gọi chính thức là các thành phần Razor ,

khơng chính thức là các thành phần Blazor .
Razor là một cú pháp để kết hợp đánh dấu HTML với mã C# được thiết kế cho năng
suất của nhà phát triển.
Razor cho phép bạn chuyển đổi giữa đánh dấu HTML và C# trong cùng một tệp với
hỗ trợ lập trình IntelliSense trong Visual Studio. Razor Pages và MVC cũng sử dụng
Razor.
Không giống như Razor Pages và MVC, được xây dựng xung quanh mơ hình u
cầu/phản hồi, các thành phần được sử dụng riêng cho logic và thành phần giao diện
người dùng phía máy khách.
Blazor sử dụng các thẻ HTML tự nhiên để tạo thành phần giao diện người dùng.
Các thành phần kết xuất thành biểu diễn trong bộ nhớ của Mơ hình đối tượng tài
liệu (DOM) của trình duyệt được gọi là cây kết xuất, được sử dụng để cập nhật giao
diện người dùng theo cách linh hoạt và hiệu quả.


Chương 2.

ỨNG DỤNG BLAZOR:

2.1 Blazor WebAssembly (client side blazor)

Hình 2-3 Blazor WebAssembly

WebAssembly (gọi tắt là Wasm) là một dạng mã máy nhị phân (bytecode). Các đoạn
mã code viết bằng các ngôn ngữ như (C/C++, Rust, C#...) sẽ biên dịch thành dạng mã
nhị phân nhờ vào Wasm mà trình duyệt (browser) có thể hiểu được. Hầu hết các trình
duyệt hiện đại đều hỗ trợ Wasm. Wasm gần giống với tập lệnh chung (Ngôn ngữ trung
gian chung) mà mã nguồn .NET biên dịch thành. Cũng giống như .NET, Wasm có thể
được tạo từ các ngôn ngữ cao hơn như C#.

Hình 2-4 Cách hoạt động của WebAssembly

Blazor WebAssembly hay cịn gọi là Client Side Blazor là một khung ứng
dụng một trang (SPA) để xây dựng các ứng dụng web tương tác phía máy khách
với .NET. Blazor WebAssembly sử dụng các tiêu chuẩn web mở mà không cần plugin
hoặc biên dịch lại mã sang các ngôn ngữ khác. Đúng như tên gọi Blazor
WebAssembly chạy tồn bộ ứng dụng ở phía client trên trình duyệt dựa trên
WebAssembly.
Blazor WebAssembly sẽ download tất cả mọi thứ về trình duyệt(Browse) bao gồm:
 HTML, CSS, Javascript
 Các .NET DLL
 .NET Runtime
Trình duyệt được hỗ trợ:

Browser

From
version

Android browser

67


Chrome

57

Chrome for Android

74

Edge

16

Firefox

52

Firefox for Android

66

iOS Safari

11

Opera

44

Opera mobile

46

Safari

11

Samsung Internet

7.2

2.1.1 Điểm mạnh của Blazor WebAssembly: (Benefits)
Tốc độ ứng dụng web rất nhanh bởi code c# được biên dịch thành các đoạn
mã nhị phân nhờ WebAssembly, rất gần với ngơn ngữ máy mà trình duyệt
hiểu được.
Website có thể hoạt động offline bởi toàn bộ mọi thứ đều được tải về trình
duyệt
Hỗ trợ hầu hết các trình duyệt hiện đại (trừ internet explorer) mà không cần
cài thêm bất kỳ plugin nào.
Tận dụng tài nguyên ở client nên không cần server q mạnh, có thể lấy
các file static mà khơng cần vào server.
Server không cần cài .net core.
2.1.2

Điểm yếu của Blazor WebAssembly:(Downsides)

Khơng chạy trên các trình duyệt cũ (internet explorer)
u cầu WebAssembly ở browse (các trình duyệt hiện đại đều hỗ trợ)
Quá nhiều file phải download như .net runtime, tốn thời gian tải trang. (Từ
lần hưa hỗ trợ full debugging
Bởi vì mọi thứ đều tải về client side nên vấn đề bảo mật cần cân nhắc. Ví dụ
khi bạn có secret key bạn lưu vàthứ 2 nhờ có cơ chế cache nên sẽ cải thiện
tốc độ hơn lần 1)
Co file và store nó ở client rất nguy hiểm. Có thể sử dụng các kỹ thuật để mã
hóa(encrypt secret) nhưng vẫn khơng an tồn.

Mơ hình lưu trữ
2.1.3 Một số file trong cấu trúc của project webAssembly
index.html chứa blazor.webassembly.js javascript file File này sẽ được
download tới browser và chịu trách nhiệm download toàn bộ app assets bao
gồm webAssembly byteCode và assembly của chính nó.
<!DOCTYPE html>


<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximumscale=1.0, user-scalable=no" />
<title>BlazorWebAssembly</title>
<base href="/" />
rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>

<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"> </a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

Tiếp theo ở folder Pages sẽ chưa các razor component


Hình 2-5 Cấu trúc folder Pages

2.2 Blazor Server

Hình 2-6 Blazor Server

Đúng như tên gọi Server-Side Blazor toàn bộ code của ứng dụng sẽ chạy ở
phía Server.
Balzor app xây dựng trên nền ASP.NET core và giao tiếp với browser client qua
SignalR - hỗ trợ realtime để server gửi request và update thông tin tới client.


Ví dụ: Khi user click thêm khóa học button trên browser sẽ gửi data từ client tới
server thông qua SignalR. Sau khi Server nhận thông tin sẽ xử lý logic nghiệp vụ (ví
dụ lưu vào database) và trả về kết quả từ server tới client thông qua signalR, client
cập nhật kết quả vào DOM.
Server application sẽ giữ trong memory mọi lúc. Khi client có tương tác sẽ
gửi 1 request để tạo instance cho user đó. Nhiều user tương tác thì sẽ tạo
nhiều instance. Server-side blazor cho phép ứng dụng chạy trên server.
Server blazor rất tốt cho client có tài nguyên ít, giới hạn(vì chạy tồn bộ
trên server) hoặc browse khơng hỗ trợ WebAssembly.
2.2.1 Điểm mạnh của Server-Side Blazor: (Benefits)
Số lượng file tải về browser rất ít vì tồn bộ chạy ở server
Tất cả chạy ở server nên có thể tận dụng sức mạnh của server-side
api(các framework, library ở server, api của .net)
Hỗ trợ full debugging

Hỗ trợ tất cả trình duyệt


2.2.2 Điểm yếu của Server-Side Blazor:(Downsides)
Khơng hỗ trợ offline vì phải giữ kết nối liên tục giữa client và server
qua SignalR
Nếu network chậm thì sẽ web sẽ chậm do server giao tiếp với client
qua signalR
Tính mở rộng, mặc dù khơng phải vấn đề lớn. Microsoft đưa ra hướng dẫn
blazor server side hỗ trợ đồng thời hàng ngàn user. Khi client có tương tác sẽ
gửi 1 request để tạo instance cho user đó. Server application sẽ giữ trong bộ
nhớ mọi lúc. Nhiều user tương tác thì sẽ tạo nhiều instance.
2.2.3 Một số file trong cấu trúc của project Server-Side Blazor

Hình 2-7 Cấu trúc Project Blazor Server


_Host.cshtml sẽ chứa code để render html và thiết lập kết nối giữa client và
server (websocket) Trang gốc của ứng dụng được triển khai dưới dạng Razor
Page:
 Khi bất kỳ trang nào của ứng dụng được yêu cầu ban đầu, trang này
sẽ được hiển thị và trả lại trong phản hồi.
 Trang Host chỉ định nơi hiển thị thành phần Ứng dụng gốc (App.razor).
Pages folder: chứa các components/pages (.razor) có thể định tuyến, tạo
nên ứng dụng Blazor và trang Razor gốc của ứng dụng Blazor Server. Route
cho mỗi trang được chỉ định bằng cách sử dụng chỉ thị @page.
_Layout.cshtml: Trang bố cục cho trang gốc _Host.cshtml của ứng dụng.
Counter component (Counter.razor): Triển khai trang Counter.
Error component (Error.razor)::Được hiển thị khi một ngoại lệ chưa được xử
lý xảy ra trong ứng dụng.

FetchData component (FetchData.razor): Triển khai trang Fetch data .
Index component (Index.razor): Triển khai Trang chủ.
Properties/launchSettings.json: Giữ cấu hình mơi trường phát triển.
Shared folder: Chứa các components và stylesheets được chia sẻ sau:
 MainLayout component (MainLayout.razor): Thành phần bố cục của
ứng dụng.
 MainLayout.razor.css: Stylesheet cho bố cục chính của ứng dụng.
 NavMenu component (NavMenu.razor): Triển khai sidebar
navigation. Bao gồm NavLink component (NavLink), kết xuất các liên
kết điều hướng đến các thành phần Razor khác. Thành phần NavLink tự
động chỉ ra trạng thái đã chọn khi component của nó được tải, điều này
giúp người dùng hiểu thành phần nào hiện đang được hiển thị.
 NavMenu.razor.css: Stylesheet cho navigation menu của ứng dụng.
 SurveyPrompt component (SurveyPrompt.razor): Blazor survey
component.
wwwroot: Thư mục gốc Web cho ứng dụng chứa public static assets của ứng
dụng.
_Imports.razor: Bao gồm Razor directives chung để đưa vào các components
của ứng dụng (.razor), chẳng hạn @using directives cho namespaces.
App.razor: component gốc của ứng dụng thiết lập định tuyến phía client-side
bằng Router component. Router component chặn điều hướng trình duyệt và
hiển thị trang khớp với địa chỉ được yêu cầu.
appsettings.json và các file cài đặt ứng dụng môi trường: Cung cấp cài đặt
cấu hình cho ứng dụng.
Program.cs: entry point của ứng dụng thiết lập máy chủ ASP.NET Core và
chứa logic khởi động của ứng dụng, bao gồm đăng ký dịch vụ và cấu hình
quy trình xử lý yêu cầu của ứng dụng:


Hình 2-8 File Host

Tương tự như ở WebAssembly ở folder Pages sẽ chứa các razor component

Hình 2-9 Cấu trúc File Pages

Trong startup.cs class
Chứa service để chạy được blazor server
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();


services.AddSingleton<WeatherForecastService>();
}

Tạo SingalR hub để có thể connect giữa server và client (websocket client)
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});

2.3 Blazor Hybrid:
Blazor cũng có thể được sử dụng để xây dựng các ứng dụng khách gốc bằng cách sử
dụng phương pháp kết hợp. Ứng dụng kết hợp là các ứng dụng gốc tận dụng công
nghệ web cho chức năng của chúng. Trong ứng dụng Blazor Hybrid, các thành phần
Razor chạy trực tiếp trong ứng dụng gốc (khơng có trên WebAssembly) cùng với bất
kỳ mã .NET nào khác và hiển thị giao diện người dùng web dựa trên HTML và CSS
cho điều khiển Chế độ xem web được nhúng thơng qua kênh interop cục bộ.

Hình 2-10 Blazor Hybrid


Các ứng dụng kết hợp với .NET và Blazor hiển thị giao diện người dùng trong điều
khiển Chế độ xem web, trong đó Mơ hình đối tượng tài liệu HTML (DOM) tương tác
với Blazor và .NET của ứng dụng dành cho máy tính để bàn hoặc thiết bị di động gốc.
Các ứng dụng Blazor Hybrid có thể được xây dựng bằng các framework ứng dụng gốc
.NET khác nhau, bao gồm .NET MAUI, WPF và Windows Forms. Blazor cung
cấpcác biện pháp kiểm soát để thêm các thành phần Razor vào các ứng dụng được xây
dựng bằng các framework này. Sử dụng Blazor với .NET MAUI cung cấp một cách
thuận tiện để xây dựng các ứng dụng Blazor Hybrid đa nền tảng cho thiết bị di động
và máy tính để bàn, trong khi tích hợp Blazor với WPF và Windows Forms có thể là
một cách tuyệt vời để hiện đại hóa các ứng dụng hiện có.BlazorWebView
Vì các ứng dụng Blazor Hybrid là ứng dụng gốc, chúng có thể hỗ trợ chức năng
khơng chỉ khả dụng với nền tảng web. Các ứng dụng Blazor Hybrid có tồn quyền
truy cập vào các khả năng của nền tảng gốc thông qua các API .NET thông thường.
Các ứng dụng Blazor Hybrid cũng có thể chia sẻ và sử dụng lại các thành phần với
các ứng dụng Blazor Server hoặc Blazor WebAssembly hiện có. Các ứng dụng Blazor
Hybrid kết hợp các lợi ích của web, ứng dụng gốc và nền tảng .NET.
Mơ hình lưu trữ Blazor Hybrid cung cấp một số lợi ích:
Sử dụng lại các thành phần hiện có có thể được chia sẻ trên thiết bị di động,
máy tính để bàn và web.
Tận dụng các kỹ năng, kinh nghiệm và tài nguyên phát triển web.
Các ứng dụng có tồn quyền truy cập vào các khả năng gốc của thiết bị.
Mơ hình lưu trữ Blazor Hybrid có những hạn chế sau:
Các ứng dụng khách gốc riêng biệt phải được xây dựng, triển khai và duy trì
cho từng nền tảng mục tiêu.
Các ứng dụng khách gốc thường mất nhiều thời gian hơn để tìm, tải xuống và
cài đặt so với việc truy cập ứng dụng web trong trình duyệt.

2.4 Nên chọn mơ hình lưu trữ Blazor nào?
Tính năng
Hồn thành khả năng tương thích
với .NET API
Truy cập trực tiếp vào tài nguyên máy
chủ và mạng
Kích thước tải trọng nhỏ với thời gian
tải ban đầu nhanh
Tốc độ thực hiện gần như gốc

Server
Blazor
✔

WebAssembly Blazor
(WASM)

Blazor
Hybrid
✔

✔

†

†

✔‡

✔

✔
✔


Tính năng

Server WebAssembly Blazor
Blazor
(WASM)
✔
†

Blazor
Hybrid
†

Mã ứng dụng an tồn và riêng tư trên
máy chủ
Chạy ứng dụng ngoại tuyến sau khi tải
✔
✔
xuống
Lưu trữ trang web tĩnh
✔
Giảm tải xử lý cho khách hàng
✔
✔
Toàn quyền truy cập vào các khả năng

✔
của khách hàng gốc
Triển khai dựa trên web
✔
✔
†Các ứng dụng Blazor WebAssembly và Blazor Hybrid có thể sử dụng API dựa trên
máy chủ để truy cập tài nguyên máy chủ / mạng và truy cập mã ứng dụng riêng tư và
an toàn.
‡ Blazor WebAssembly chỉ đạt được hiệu suất gần như nguyên bản vớitrình biên dịch
trước thời hạn (AOT).

Chương 3.

XÂY DỰNG ỨNG DỤNG BLAZOR ĐẦU TIÊN

STT
Mục đích
Điều kiện
Thời gian hồn thành
Kịch bản

Ghi chú
Xây dựng ứng dụng web đầu tiên của bạn với Blazor.
Không
10-15 phút + thời gian tải xuống / cài đặt
Tạo, sử dụng và sửa đổi một thành phần truy cập đơn
giản.

3.1 Tải xuống và cài đặt:

Hình 3-11 Hướng dẫn cài đặt


Bước 1: Tải Visual Studio
Bước 2: Cài ASP.NET and web development
Chọn phím Windows, nhậpVisual Studio Installer và nhấn Enter.
Nếu được nhắc, hãy cho phép trình cài đặt tự cập nhật.
Nếu có bản Cập Nhật cho Visual Studio 2022, nút Cập nhật sẽ được hiển thị.
Chọn nó để cập nhật trước khi sửa đổi cài đặt.
Tìm bản cài đặt Visual Studio 2022 của bạn và chọn nút Sửa đổi.
Nếu chưa được chọn, hãy chọn khối lượng công việc ASP.NET và web
development và chọn nút Sửa đổi. Nếu khơng, chỉ cần đóng cửa sổ hộp thoại.

3.2 Tạo ứng dụng
Bước 1: Khởi động Visual Studio và chọnTạo dự án mới.

Hình 3-12 Hướng dẫn tạo project

Bước 2: Trong cửa sổ Tạo dự án mới, nhập Blazor vào hộp tìm kiếm và nhấn Enter.
Bước 3: Chọn mẫu Ứng dụng Blazor Server và chọn Tiếp theo.


Hình 3-13 Hướng dẫn tạo project Blazor Server

Bước 4: Trong cửa sổ Định cấu hình dự án mới của bạn, nhập Blazor App làm tên dự
án và chọn Tiếp theo.
Bước 5: Trong cửa sổ Thông tin bổ sung, select .NET 7.0 (Standard Term
Suport)trong danh sách thả xuống Framework nếu chưa được chọn và chọn Tạo.

Hình 3-14 Khởi tạo project hồn chỉnh

Dự án của bạn được tạo và tải trong Visual Studio. Hãy xem nội dung dự án của bạn
bằng Solution Explorer.

Hình 3-15 Cấu trúc của project vừa tạo

Một số tệp đã được tạo để cung cấp cho bạn một ứng dụng Blazor đơn giản đã sẵn
sàng để chạy.
Program.cslà điểm vào cho ứng dụng khởi động máy chủ và nơi bạn định cấu
hình các dịch vụ ứng dụng và phần mềm trung gian.
App.razorlà thành phần gốc cho ứng dụng.
Thedirectory chứa một số trang web ví dụ cho ứng dụng.Pages
BlazorApp.csprojxác định dự án ứng dụng và các phần phụ thuộc của nó và có
thể được xem bằng cách nhấp đúp vào nút dự án BlazorApp trong Trình khám
phá giải pháp.
Thefile bên trong thedirectory xác định các cài đặt hồ sơ khác nhau cho môi
trường phát triển cục bộ. Một số cổng được tự động gán khi tạo dự án và được
lưu trên tệp này.launchSettings.jsonProperties
Hãy chọn nútTiếp tục bên dưới để chuyển sang bước tiếp theo.

3.3 Chạy ứng dụng:.
Nhấp vào nút Bắt đầu gỡ lỗi (mũi tên màu xanh lá cây) trong Thanh công cụ gỡ lỗi
trong Visual Studio để chạy ứng dụng của bạn.

Hình 3-16 Chạy project


Khi ứng dụng đang chạy, bạn có thể áp dụng các thay đổi mã cho ứng dụng đang chạy
bằng cách nhấp vào Tải lại nóng cái nút.

Hình 3-17 Thay đổi mã đang chạy

Bạn có thể dừng ứng dụng bất kỳ lúc nào bằng cách nhấp vào Dừng lại ở thanh
công cụ trên cùng.

Hình 3-18 Dừng chạy

Lần đầu tiên bạn chạy một ứng dụng web trong Visual Studio, nó sẽ thiết lập chứng
chỉ phát triển để lưu trữ ứng dụng qua HTTPS và sau đó nhắc bạn tin cậy chứng chỉ.
Chúng tôi khuyên bạn nên đồng ý tin tưởng vào chứng chỉ. Chứng chỉ sẽ chỉ được sử
dụng để phát triển địa phương và khơng có nó, hầu hết các trình duyệt sẽ phàn nàn
về tính bảo mật của trang web.
Đợi ứng dụng khởi chạy trong trình duyệt. Khi bạn đến trang sau, bạn đã chạy thành
công ứng dụng Blazor đầu tiên của mình!

Hình 3-19 Hello World !!!

Trang được hiển thị được xác định bởi thefile nằm bên trong thedirectory. Đây là
những gì nội dung của nó trơng giống như:Index.razorPages
Trang/Index.razor
@page "/"