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

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


BÁO CÁO GIỮA KÌ CƠNG NGHỆ NET Đề tài Tìm hiểu Blazor trong .NET Core 6.0

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:
46.01.104.057
Nguyễn Thế Hồng
46.01.104.072
Nguyễn Nhất Huy

46.01.104.131
Nguyễn Ngọc Yến Nhi
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

GIỚI THIỆU.............................................................................................
1.
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

ỨNG DỤNG BLAZOR:...........................................................................
2.
2.1
Blazor WebAssembly (client side blazor)........................................................
2.1.1

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

2.1.2

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

Mơ hình lưu trữ.......................................................................................................
2.1.3
2.2

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

2.2.1

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

2.2.2

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

2.2.3

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

2.3

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

2.4

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

Chương
XÂY DỰNG ỨNG DỤNG BLAZOR ĐẦU TIÊN.................................
3.
3.1
Tải xuống và cài đặt:......................................................................................
3.2

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

3.3

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

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

6

9
9
1
2

1
2
1
2
1
2
1
4
1
5
1
5
1
5
1
9
2
0
2
1
2
1
2
1
2
4
2
5

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

6
7
9
10
14
14
16
17
18
19

21
22
22
23
23
24
24
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ữ, khuôn 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 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

F
r
o

m


v
e
r

s
i
o
n

67
Android browser


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 quá 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)
Yê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 tồ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 ngun í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:

dụng.


MainLayout component (MainLayout.razor): Thành phần bố cục của ứ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