Đề tài tìm hiểu blazor trong NET core 6 0

Cácthànhphầnlàcáclớp.NETC#được tíchhợptrongcác tậphợp.NET:Razor là một cú pháp để kết hợp đánh dấu HTML với mã C# được thiết kế chonăngsuấtcủanhàpháttriển.. Không giống như Razor Pages v

BỘGIÁODỤCVÀĐÀOTẠO TRƯỜNGĐẠIHỌCSƯPHẠMTHÀNHPHỐHỒCHÍMINHKHO

"Đầ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 đã đưamô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 ơnsâ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 đạtnhữngkiế nt h ứ c q u ý b á u choemt r o n g s u ố t t h ờ i g i a n h ọc t ậ p vừaq u a T r o n g

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ếnthứ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ếnthứcquýbáu, làhành trangđểemcóthểvững bướcsaunà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ếnthứ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ònnhiề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ềuchỗ 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ànthiện hơn.

Emxinchânthànhcảmơn!”

Chương1 GIỚITHIỆU 6

1.1 Blazorlàgì ? 6

Blazorlàmãnguồnmở 6

1.2 Blazorkhông phải làgì 7

1.3 Blazorchophép: 8

1.4 Các thànhphần: 8

Chương2 ỨNGDỤNG BLAZOR 9

2.1 BlazorWebAssembly (clientsideblazor) 9

2.1.1 ĐiểmmạnhcủaBlazorWebAssembly:(Benefits) 12

2.1.2 Điểmyếucủa BlazorWebAssembly:(Downsides) 12

Môhìnhlưutrữ 12

2.1.3 Mộtsố filetrong cấutrúccủaprojectwebAssembly 12

2.2 BlazorServer 14

2.2.1 ĐiểmmạnhcủaServer-Side Blazor: (Benefits) 15

2.2.2 ĐiểmyếucủaServer-Side Blazor:(Downsides) 15

2.2.3 Mộtsố filetrong cấutrúccủaprojectServer-SideBlazor 15

2.3 BlazorHybrid: 19

2.4 Nênchọn môhình lưu trữBlazor nào? 20

Chương3 XÂY DỰNGỨNG DỤNGBLAZORĐẦUTIÊN 21

3.1 Tảixuốngvàcài đặt: 21

3.2 Tạoứng dụng 21

3.3 Chạyứng dụng: 24

TÀILIỆUTHAMKHẢO 25

Mụclụchình ảnhtheochương

Hình1-1Giớithiệublazor 6

Hình1-2Sốliệuvềsựpháttriểncủablazor 7

Hình2-1BlazorWebAssembly 9

Hình2-2CáchhoạtđộngcủaWebAssembly 10

Hình2-3CấutrúcfolderPages 14

Hình2-4BlazorServer 14

Hình2-5CấutrúcProjectBlazorServer 16

Hình2-6FileHost 17

Hình2-7CấutrúcFilePages 18

Hình2-8BlazorHybrid 19

Hình3-1Hướngdẫncàiđặt 21

Hình3-2Hướngdẫntạoproject 22

Hình3-3HướngdẫntạoprojectBlazorServer 22

Hình3-4Khởitạoprojecthoànchỉnh 23

Hình3-5Cấutrúccủaprojectvừa tạo 23

Hình3-6Chạyproject 24

Hình3-7Thayđổi mãđangchạy 24

Hình3-8Dừngchạy 24

Hình3-9HelloWorld!!! 25

Mong muốn:Sử dụng ngôn ngữ c# có thể lập trình ở cả backend và frontend Có

- Theonềntảng.NET,tạithờiđiểmviếtbàinày,nóđượchỗtrợbởi3.700côngtyvàcó61.000ngườiđónggóp

t r ê n ứngdụngkhách,điềunày đã ngăn khôngchonóchạytrênthiếtbị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ựcthibên trong trìnhd u y ệ t B l a z o r h o ặ c c h ạ y p h í a m á y c h ủ ,

t r o n g t r ư ờ n g h ợ p đ ó , n ó t h ự c thi trên máy chủ vàtrình duyệt hoạtđộng nhưmột thiết bị đầu cuốihoặcn ó c h ạ y trongchínhtrìnhduyệt bằngcáchsửdụngWebAssembly

Cácthànhphầnlàcáclớp.NETC#được tíchhợptrongcác tậphợp.NET:

Razor là một cú pháp để kết hợp đánh dấu HTML với mã C# được thiết kế chonăngsuấtcủanhàpháttriển

RazorchophépbạnchuyểnđổigiữađánhdấuHTMLvàC#trongcùngmộttệpvớihỗ trợlập trình IntelliSense trong Visual Studio Razor Pages và MVC cũng sử dụngRazor

Không giống như Razor Pages và MVC, được xây dựng xung quanh mô hình yêucầu/phản hồi, các thành phần được sử dụng riêng cho logic và thành phần giaodiệnngườidùng phíamáykhách

BlazorsửdụngcácthẻHTMLtựnhiênđểtạothànhphầngiaodiệnngườidùng.CácthànhphầnkếtxuấtthànhbiểudiễntrongbộnhớcủaMôhìnhđốitượngtàiliệ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ệnngườidùng theo cáchlinh hoạtvàhiệu quả

Chương2.Ứ NGDỤNGBLAZOR:

2.1 BlazorWebAssembly(clientsideblazor)

Hình2-3BlazorWebAssembly

WebAssembly(gọi tắt làWasm) là một dạng mã máy nhị phân (bytecode) Các

đoạnmã code viết bằng các ngôn ngữ như (C/C++, Rust, C# ) sẽ biên dịch thànhdạng mãnhị phân nhờ vào Wasm mà trình duyệt (browser) có thể hiểu được Hầu hếtcác trìnhduyệthiệnđạiđều hỗtrợ Wasm Wasmgầngiốngvớitập lệnh chung( N g ô n

n g ữ trung gian chung) mà mã nguồn .NET biên dịch thành Cũng giống như .NET,Wasmcóthểđượctạotừcácngônngữ caohơn như C#

 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ụkhibạncósecretkeybạnlưuvàthứ2nhờcócơ chếcachenênsẽcảithiệntốcđộ hơnlần1)

< html >

< head >

< meta charset = "utf-8" />

< meta name = "viewport" content = scalable=no" />

"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-< title > BlazorWebAssembly </ title >

<base href = "/" />

< link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet" />

< link href = "css/app.css" rel = "stylesheet" />

Vídụ: Khiuserclickthêmkhóahọcbutton trênbrowsersẽgửidatatừclienttớiserver thông qua SignalR Sau khi Server nhận thông tin sẽ xử lý logic nghiệp vụ

(vídụlưuvàodatabase)vàtrảvềkếtquảtừservertớiclientthôngquasignalR,clientcậpnhậtkết quảvàoDOM

 Serverapplicationsẽgiữtrongmemorymọilúc.Khiclientcótươngtácsẽgửi1 request để tạo instance cho user đó Nhiều user tương tác thì sẽ tạo nhiềuinstance.Server-sideblazorcho

phépứngdụngchạytrênserver

 Serverblazorrấttốtchoclientcótàinguyênít,giớihạn(vìchạytoànbộtrênserver)hoặcbrowsekhông hỗtrợ WebAssembly

2.2.3 MộtsốfiletrongcấutrúccủaprojectServer-SideBlazor

Hình2-7CấutrúcProjectBlazorServer

 _Host.cshtmlsẽ chứa code để render html và thiết lập kết nối giữa client

vàserver(websocket)TranggốccủaứngdụngđượctriểnkhaidướidạngRazorPage:

 Khibấtkỳtrangnàocủaứngdụngđượcyêucầubanđầu,trangnàysẽđược hiển thị vàtrảlại trongphảnhồi

 Program.cs: entry point của ứng dụng thiết lập máy chủ ASP.NET Core

vàchứalogic khởiđộngcủa ứngdụng, baogồmđăngkýdịchvụvà cấuhìnhquytrìnhxử

lý yêu cầu của ứng dụng:

publicvoid ConfigureServices ( IServiceCollection services)

app UseEndpoints (endpoints =>

Hình2-10BlazorHybrid

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ềukhiển Chế độ xem web, trong đó Mô hình đối tượng tài liệu HTML (DOM)tương tácvớiBlazorvà NETcủaứngdụngdànhchomáytínhđểbànhoặcthiếtbịdiđộnggốc.

Cácứng dụngBlazorHybrid cóthểđược xâydựngbằngcácframeworkứngdụnggốc

.NETk h á c n h a u , b a o g ồ m N E T M A U I , W P F v à W i n d o w s F o r m s B

l a z o r c u n g 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âydựng bằng các frameworknày Sử dụng Blazor với .NET MAUI cung cấp mộtcáchthuậntiệnđểxâydựngcácứngdụngBlazorHybridđanềntảngchothiếtbịdiđộngvàmáy tính để bàn, trong khi tích hợp Blazor với WPF và Windows Forms có thểlàmộtcáchtuyệtvờiđểhiệnđạihóacácứngdụng hiệncó.BlazorWebView

VìcácứngdụngBlazorHybridlàứngdụnggốc,chúngcóthểhỗtrợchức năngkhôngchỉ khả dụng vớinền tảng web Các ứng dụng Blazor Hybrid có toàn quyền truy cậpvào các khả năng của nền tảng gốc thôngqua các API NET thông thường Các ứngdụ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 ứngdụng Blazor Server hoặc BlazorWebAssembly hiện có Các ứng dụng Blazor Hybridkếthợp cáclợiíchcủaweb,ứngdụng gốcvànềntảng.NET

Mãứngdụngantoànvàriêngtưtrênmáyc

‡ Blazor WebAssembly chỉ đạt được hiệu suất gần như nguyên bản vớitrình biêndịchtrước thờihạn (AOT).

Bước4:TrongcửasổĐịnhcấuhìnhdựánmớicủabạn,nhậpBlazorApplàmtêndựánvàchọn Tiếptheo

Bước5 : T r o n g c ử a s ổ T h ô n g t i n b ổ s u n g , s e l e c t N E T 7 0 ( S t a n d a r d T e r m Suport)trong danhsáchthả xuốngFrameworknếuchưa được chọnvàchọnTạo

Hình3-14Khởitạoprojecthoànchỉ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ủabạnbằngSolutionExplorer.

 Thefile bên trong thedirectory xác định các cài đặt hồ sơ khác nhau chomôitrường phát triển cục bộ Một số cổng được tự động gán khi tạo dự án vàđượclưutrên tệpnày.launchSettings.jsonProperties

HãychọnnútTiếptụcbêndướiđểchuyểnsangbướctiếptheo

3.3 Chạyứngdụng:.

NhấpvàonútBắtđầugỡlỗi(mũitênmàuxanhlácây)trongThanhcôngcụgỡlỗitrongVisual Studio đểchạy ứng dụngcủabạn

Hình3-16Chạyproject

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ứngchỉ 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áttriểnđịaphươngvàkhôngcónó,

< PageTitle > Index </ PageTitle >