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 NET Core 6.0 Thành phố Hồ Chí Minh, ngày 20 tháng 11 năm 2022 Tieu luan 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 NET Core 6.0 Thành viên nhóm NET 5.0: Nguyễn Thế Hồ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 Mạc Đỉnh Thy 46.01.104.179 Trần Nhật Tân 46.01.104.159 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 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 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 môn – Thầy Lương Trần Hy Hiến dạy dỗ, truyền đạt kiến thức quý báu cho em 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 thầy, em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Đây chắn kiến thức quý báu, hành trang để em vững bước sau Bộ mơn Cơng nghệ NET môn học thú vị, vô 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 sinh viên Tuy nhiên, vốn kiến thức nhiều hạn chế khả tiếp thu thực tế nhiều bỡ ngỡ Mặc dù nhóm em cố gắng chắn đồ án khó tránh khỏi thiếu sót nhiều chỗ cịn chưa xác, kính mong thầy xem xét góp ý để tiểu luận em hoàn thiện Em xin chân thành cảm ơn!” BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Mục lục Chương GIỚI THIỆU 1.1 Blazor ? Blazor mã nguồn mở 1.2 Blazor khơng phải 1.3 Blazor cho phép: 1.4 Các thành phần: .8 Chương ỨNG DỤNG BLAZOR: 2.1 Blazor WebAssembly (client side blazor) 2.1.1 Điểm mạnh Blazor WebAssembly: (Benefits) 12 2.1.2 Điểm yếu Blazor WebAssembly:(Downsides) .12 Mơ hình lưu trữ .12 2.1.3 2.2 Một số file cấu trúc project webAssembly 12 Blazor Server .14 2.2.1 Điểm mạnh Server-Side Blazor: (Benefits) 15 2.2.2 Điểm yếu Server-Side Blazor:(Downsides) 15 2.2.3 Một số file cấu trúc 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 XÂY DỰNG ỨNG DỤNG BLAZOR ĐẦU TIÊN .21 3.1 Tải xuống 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 BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 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 phát triển blazor .7 Hình 2-1 Blazor WebAssembly Hình 2-2 Cách hoạt động 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 hoàn chỉnh .23 Hình 3-5 Cấu trúc project vừa tạo .23 Hình 3-6 Chạy project .24 Hình 3-7 Thay đổi mã chạy 24 Hình 3-8 Dừng chạy 24 Hình 3-9 Hello World !!! 25 BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Chương GIỚI THIỆU 1.1 Blazor ? Ngữ cảnh: trong dự án thường sử dụng nhiều ngôn ngữ c#(.net core) để làm việc phía backend Javascript (các thư viện, framework reactjs, angular) để làm việc phía frontend Muốn làm việc, tương tác với giao diện bắt buộc phải biết kiến thức ngôn ngữ Javascript Mong muốn: Sử dụng ngơn ngữ c# lập trình backend frontend Có thể thực tương tác UI c# code Vậy Blazor đời để đáp ứng mong muốn Blazor là web framework cho phép lập trình viên tương tác, làm việc với UI c# code Hình 1-1 Giới thiệu blazor Blazor mã nguồn mở - Mã nguồn Blazor có sẵn: https://github.com/dotnet/aspnetcore/tree/main/src/Components - Mã nguồn thuộc sở hữu The NET Foundation , tổ chức phi lợi nhuận tạo với mục đích hỗ trợ dự án nguồn mở dựa NET framework - Theo tảng NET, thời điểm viết này, hỗ trợ 3.700 cơng ty có 61.000 người đóng góp BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Hình 1-2 Số liệu phát triển blazor Blazor 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ú C# thay JavaScript  Chia sẻ logic ứng dụng phía máy chủ phía máy khách viết NET  Hiển thị giao diện người dùng dạng HTML CSS để hỗ trợ trình duyệt rộng rãi, bao gồm trình duyệt di động  Tích hợp với tảng lưu trữ đại, chẳng hạn nhưDocker  Xây dựng ứng dụng kết hợp dành cho máy tính để bàn thiết bị di động với NET Blazor Sử dụng NET để phát triển web phía máy khách mang lại lợi sau:  Viết mã C# thay JavaScript  Tận dụng hệ sinh thái NET có của.NET thư viện  Chia sẻ logic ứng dụng máy chủ máy khách  Hưởng lợi từ tệp Hiệu suất, độ tin cậy bảo mật NET  Làm việc hiệu Windows, Linux 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 ngôn ngữ, khuôn khổ công cụ chung ổn định, giàu tính dễ sử dụng 1.2 Blazor so với Silverlight Blazor không giống Silverlight, nỗ lực trước Microsoft việc lưu trữ ứng dụng trình duyệt. Silverlight yêu cầu plugin trình duyệt để chạy ứng dụng khách, điều ngăn khơng cho chạy thiết bị iOS Blazor khơng yêu cầu loại plugin cài đặt máy khách để thực thi bên trình duyệt. Blazor chạy phía máy chủ, trường hợp đó, thực thi máy chủ trình duyệt hoạt động thiết bị đầu cuối chạy trình duyệt cách sử dụng WebAssembly BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Vì WebAssugging tiêu chuẩn web nên hỗ trợ tất trình duyệt chính, điều có nghĩa ứng dụng Blazor phía máy khách chạy bên trình duyệt Windows/Linux/Mac/Android iOS     1.3 Blazor cho phép: Tương tác với UI c# code, không yêu cầu Javascript Sử dụng Razor Component (razor cho phép trộn code c# html) Tận dụng sức mạnh thư viện, framework net ứng dụng Blazor Có loại ứng dụng Blazor: Blazor WebAssembly(client side) và Blazor Server(server side)  Blazor Server: Là ứng dụng Blazor chạy server generate update DOM sử dụng SignalrR  Blazor Web Assembly: Là ứng dụng Single Page Application client generate SPA xây dựng frontend framework khác 1.4 Các thành phần: Các ứng dụng Blazor dựa thành phần Một thành phần Blazor thành phần giao diện người dùng, chẳng hạn trang, hộp thoại biểu mẫu nhập liệu Các thành phần lớp NET C# tích hợp tập hợp NET :  Xác định logic hiển thị giao diện người dùng linh hoạt  Xử lý kiện người dùng  Có thể lồng vào tái sử dụng  Có thể chia sẻ phân phối dạng thư viện lớp Razor gói NuGet Lớp thành phần thường viết dạng trang đánh dấu Razor.razor với phần mở rộng tệp Các thành phần Blazor gọi thức thành phần Razor , khơng thức thành phần Blazor Razor cú pháp để kết hợp đánh dấu HTML với mã C# thiết kế cho suất nhà phát triển Razor cho phép bạn chuyển đổi đánh dấu HTML C# tệp với hỗ trợ lập trình IntelliSense Visual Studio Razor Pages MVC sử dụng Razor Không giống Razor Pages MVC, xây dựng xung quanh mô hình yêu cầu/phản hồi, thành phần sử dụng riêng cho logic thành phần giao diện người dùng phía máy khách Blazor sử dụng 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 nhớ Mơ hình đối tượng tài liệu (DOM) trình duyệt gọi kết xuất, sử dụng để cập nhật giao diện người dùng theo cách linh hoạt hiệu BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Chương  ỨNG DỤNG BLAZOR: 2.1 Blazor WebAssembly (client side blazor) Hình 2-3 Blazor WebAssembly WebAssembly (gọi tắt là Wasm) dạng mã máy nhị phân (bytecode) Các đoạn mã code viết ngôn ngữ (C/C++, Rust, C# ) biên dịch thành dạng mã nhị phân nhờ vào Wasm mà trình duyệt (browser) hiểu Hầu hết trình duyệt đại 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 NET, Wasm tạo từ ngơn ngữ cao C# BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Hình 2-4 Cách hoạt động WebAssembly Blazor WebAssembly hay gọi là Client Side Blazor khung ứng dụng trang (SPA) để xây dựng ứng dụng web tương tác phía máy khách với NET Blazor WebAssembly sử dụng tiêu chuẩn web mở mà không cần plugin biên dịch lại mã sang ngôn ngữ khác Đúng tên gọi Blazor WebAssembly chạy tồn ứng dụng phía client trình duyệt dựa WebAssembly Blazor WebAssembly download tất thứ trình duyệt(Browse) bao gồm:  HTML, CSS, Javascript  Các NET DLL  NET Runtime Trình duyệt hỗ trợ: Browser From version Android browser 67 BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Samsung Internet 7.2 2.1.1 Điểm mạnh Blazor WebAssembly: (Benefits)  Tốc độ ứng dụng web nhanh code c# biên dịch thành đoạn mã nhị phân nhờ WebAssembly, gần với ngơn ngữ máy mà trình duyệt hiểu  Website hoạt động offline tồn thứ tải trình duyệt  Hỗ trợ hầu hết trình duyệt đại (trừ internet explorer) mà không cần cài thêm plugin  Tận dụng tài nguyên client nên không cần server q mạnh, lấy 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 Blazor WebAssembly:(Downsides)  Không chạy trình duyệt cũ (internet explorer)  Yêu cầu WebAssembly browse (các trình duyệt đại hỗ trợ)  Quá nhiều file phải download net runtime, tốn thời gian tải trang (Từ lần  hưa hỗ trợ full debugging  Bởi thứ tải client side nên vấn đề bảo mật cần cân nhắc Ví dụ bạn có secret key bạn lưu vàthứ nhờ có chế cache nên cải thiện tốc độ lần 1)  Co file store client nguy hiểm Có thể sử dụng kỹ thuật để mã hóa(encrypt secret) khơng an tồn Mơ hình lưu trữ 2.1.3 Một số file cấu trúc project webAssembly  index.html chứa blazor.webassembly.js javascript file File download tới browser chịu trách nhiệm download toàn app assets bao gồm webAssembly byteCode assembly BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 BlazorWebAssembly Loading An unhandled error has occurred Reload 🗙  Tiếp theo folder Pages sẽ chưa các razor component BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Hình 2-5 Cấu trúc folder Pages 2.2 Blazor Server Hình 2-6 Blazor Server Đúng tên gọi Server-Side Blazor toàn code ứng dụng chạy phía Server Balzor app xây dựng nền ASP.NET core giao tiếp với browser client qua SignalR - hỗ trợ realtime để server gửi request update thông tin tới client BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Ví dụ: Khi user click thêm khóa học button browser gửi data từ client tới server thông qua SignalR Sau Server nhận thơng tin xử lý logic nghiệp vụ (ví dụ lưu vào database) trả kết từ server tới client thông qua signalR, client cập nhật kết vào DOM       Server application giữ memory lúc Khi client có tương tác gửi request để tạo instance cho user Nhiều user tương tác tạo nhiều instance Server-side blazor cho phép ứng dụng chạy server Server blazor tốt cho client có tài ngun ít, giới hạn(vì chạy tồn server) browse khơng hỗ trợ WebAssembly 2.2.1 Điểm mạnh Server-Side Blazor: (Benefits) Số lượng file tải browser tồn chạy server Tất chạy server nên tận dụng sức mạnh server-side api(các framework, library server, api net) Hỗ trợ full debugging Hỗ trợ tất trình duyệt BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 2.2.2 Điểm yếu Server-Side Blazor:(Downsides)    Không hỗ trợ offline phải giữ kết nối liên tục client server qua SignalR Nếu network chậm web chậm server giao tiếp với client qua signalR Tính mở rộng, khơng phải vấn đề lớn Microsoft đưa hướng dẫn blazor server side hỗ trợ đồng thời hàng ngàn user Khi client có tương tác gửi request để tạo instance cho user Server application giữ nhớ lúc Nhiều user tương tác tạo nhiều instance 2.2.3 Một số file cấu trúc project Server-Side Blazor Hình 2-7 Cấu trúc Project Blazor Server BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0  _Host.cshtml sẽ chứa code để render html thiết lập kết nối client server (websocket) Trang gốc ứng dụng triển khai dạng Razor Page:  Khi trang ứng dụng yêu cầu ban đầu, trang hiển thị trả lại phản hồi  Trang Host định nơi hiển thị thành phần Ứng dụng gốc (App.razor)  Pages folder: chứa components/pages (.razor) định tuyến, tạo nên ứng dụng Blazor trang Razor gốc ứng dụng Blazor Server Route cho trang định cách sử dụng thị @page  _Layout.cshtml: Trang bố cục cho trang gốc _Host.cshtml ứng dụng  Counter component (Counter.razor): Triển khai trang Counter  Error component (Error.razor)::Được hiển thị ngoại lệ chưa xử lý xảy ứ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 components stylesheets chia sẻ sau:  MainLayout component  (MainLayout.razor): Thành phần bố cục ứng dụng  MainLayout.razor.css: Stylesheet cho bố cục ứng dụng  NavMenu component  (NavMenu.razor): Triển khai sidebar navigation Bao gồm  NavLink component (NavLink), kết xuất liên kết điều hướng đến thành phần Razor khác Thành phần NavLink tự động trạng thái chọn component tải, điều giúp người dùng hiểu thành phần hiển thị  NavMenu.razor.css: Stylesheet  cho navigation menu ứ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 ứng dụng  _Imports.razor: Bao gồm Razor directives chung để đưa vào components ứng dụng (.razor), chẳng hạn @using directives cho namespaces  App.razor: component gốc ứng dụng thiết lập định tuyến phía client-side Router component Router component chặn điều hướng trình duyệt hiển thị trang khớp với địa yêu cầu  appsettings.json và 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 ứng dụng thiết lập máy chủ ASP.NET Core chứa logic khởi động ứng dụng, bao gồm đăng ký dịch vụ cấu hình quy trình xử lý yêu cầu ứng dụng: BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Hình 2-8 File Host Tương tự WebAssembly folder Pages sẽ chứa razor component  Hình 2-9 Cấu trúc File Pages  Trong startup.cs class  Chứa service để chạy blazor server public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServerSideBlazor(); BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 services.AddSingleton(); }  Tạo SingalR hub để connect server client (websocket client) app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); }); 2.3 Blazor Hybrid: Blazor sử dụng để xây dựng ứng dụng khách gốc cách sử dụng phương pháp kết hợp Ứng dụng kết hợp ứng dụng gốc tận dụng công nghệ web cho chức chúng Trong ứng dụng Blazor Hybrid, thành phần Razor chạy trực tiếp ứng dụng gốc (không có WebAssembly) với mã NET khác hiển thị giao diện người dùng web dựa HTML CSS cho điều khiển Chế độ xem web nhúng thơng qua kênh interop cục Hình 2-10 Blazor Hybrid BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Các ứng dụng kết hợp với NET Blazor hiển thị giao diện người dùng điều khiển Chế độ xem web, Mơ hình đối tượng tài liệu HTML (DOM) tương tác với Blazor NET ứng dụng dành cho máy tính để bàn thiết bị di động gốc Các ứng dụng Blazor Hybrid xây dựng framework ứng dụng gốc NET khác nhau, bao gồm NET MAUI, WPF Windows Forms Blazor cung cấpcác biện pháp kiểm soát để thêm thành phần Razor vào ứng dụng xây dựng framework Sử dụng Blazor với NET MAUI cung cấp cách thuận tiện để xây dựng ứng dụng Blazor Hybrid đa tảng cho thiết bị di động máy tính để bàn, tích hợp Blazor với WPF Windows Forms cách tuyệt vời để đại hóa ứng dụng có.BlazorWebView Vì ứng dụng Blazor Hybrid ứng dụng gốc, chúng hỗ trợ chức khơng khả dụng với tảng web Các ứng dụng Blazor Hybrid có tồn quyền truy cập vào khả tảng gốc thông qua API NET thông thường Các ứng dụng Blazor Hybrid chia sẻ sử dụng lại thành phần với ứng dụng Blazor Server Blazor WebAssembly có Các ứng dụng Blazor Hybrid kết hợp lợi ích web, ứng dụng gốc tảng NET Mơ hình lưu trữ Blazor Hybrid cung cấp số lợi ích:  Sử dụng lại thành phần có chia sẻ thiết bị di động, máy tính để bàn web  Tận dụng kỹ năng, kinh nghiệm tài nguyên phát triển web  Các ứng dụng có tồn quyền truy cập vào khả gốc thiết bị Mơ hình lưu trữ Blazor Hybrid có hạn chế sau:  Các ứng dụng khách gốc riêng biệt phải xây dựng, triển khai trì cho tảng mục tiêu  Các ứng dụng khách gốc thường nhiều thời gian để tìm, tải xuống cài đặt so với việc truy cập ứng dụng web trình duyệt 2.4 Nên chọn mơ hình lưu trữ Blazor nào? Tính Hồn thành khả tương thích với NET API Truy cập trực tiếp vào tài nguyên máy chủ 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 gần gốc Server WebAssembly Blazor Blazor (WASM) ✔️ ❌ Blazor Hybrid ✔️ ✔️ ❌† ❌† ✔️ ❌ ❌ ✔️ ✔️‡ ✔️ BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tính Server WebAssembly Blazor Blazor (WASM) ✔️ ❌† Blazor Hybrid ❌† Mã ứng dụng an toàn riêng tư máy chủ Chạy ứng dụng ngoại tuyến sau 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 khả ❌ ❌ ✔️ khách hàng gốc Triển khai dựa web ✔️ ✔️ ❌ †Các ứng dụng Blazor WebAssembly Blazor Hybrid sử dụng API dựa máy chủ để truy cập tài nguyên máy chủ / mạng truy cập mã ứng dụng riêng tư an toàn ‡ Blazor WebAssembly đạt hiệu suất gần nguyên vớitrình biên dịch trước thời hạn (AOT) Chương XÂY DỰNG ỨNG DỤNG BLAZOR ĐẦU TIÊN STT Mục đích Điều kiện Thời gian hoàn thành Kịch Ghi Xây dựng ứng dụng web 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 sửa đổi thành phần truy cập đơn giản 3.1 Tải xuống cài đặt: Hình 3-11 Hướng dẫn cài đặt BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 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 nhấn Enter  Nếu nhắc, cho phép trình cài đặt tự cập nhật  Nếu có Cập Nhật cho Visual Studio 2022, nút Cập nhật hiển thị Chọn để cập nhật trước sửa đổi cài đặt  Tìm cài đặt Visual Studio 2022 bạn chọn nút Sửa đổi  Nếu chưa chọn, chọn khối lượng công việc ASP.NET web development chọn nút Sửa đổi Nếu khơng, 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 chọnTạo dự án 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 nhấn Enter Bước 3: Chọn mẫu Ứng dụng Blazor Server chọn Tiếp theo BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 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 bạn, nhập Blazor App làm tên dự án 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 chưa chọn chọn Tạo Hình 3-14 Khởi tạo project hoàn chỉnh BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Dự án bạn tạo tải Visual Studio Hãy xem nội dung dự án bạn Solution Explorer Hình 3-15 Cấu trúc project vừa tạo Một số tệp tạo để cung cấp cho bạn ứ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ủ nơi bạn định cấu hình dịch vụ ứng dụng phần mềm trung gian  App.razorlà thành phần gốc cho ứng dụng  Thedirectory chứa số trang web ví dụ cho ứng dụng.Pages  BlazorApp.csprojxác định dự án ứng dụng phần phụ thuộc xem cách nhấp đúp vào nút dự án BlazorApp Trình khám phá giải pháp  Thefile bên thedirectory xác định cài đặt hồ sơ khác cho môi trường phát triển cục Một số cổng tự động gán tạo dự án lưu tệp này.launchSettings.jsonProperties Hãy chọn nútTiếp tục bên để chuyển sang bước 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 cây) Thanh công cụ gỡ lỗi Visual Studio để chạy ứng dụng bạn Hình 3-16 Chạy project BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Khi ứng dụng chạy, bạn áp dụng thay đổi mã cho ứng dụng chạy cách nhấp vào Tải lại nóng nút Hình 3-17 Thay đổi mã chạy Bạn dừng ứng dụng lúc cách nhấp vào Dừng lại cơng cụ Hình 3-18 Dừng chạy Lần bạn chạy ứng dụng web Visual Studio, thiết lập chứng phát triển để lưu trữ ứng dụng qua HTTPS sau nhắc bạn tin cậy chứng Chúng tơi khuyên bạn nên đồng ý tin tưởng vào chứng Chứng sử dụng để phát triển địa phương khơng có nó, hầu hết trình duyệt phàn nàn tính bảo mật trang web Đợi ứng dụng khởi chạy trình duyệt Khi bạn đến trang sau, bạn chạy thành công ứng dụng Blazor mình! Hình 3-19 Hello World !!! Trang hiển thị xác định thefile nằm bên thedirectory Đây nội dung trơng giống như:Index.razorPages Trang/Index.razor @page "/" BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 Tieu luan BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0 BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0BAO.cao.GIUA.ki.CONG.NGHE.NET.de.tai.tim.hieu.blazor.trong.NET.core.6.0