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 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: 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 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ế cịn 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!” Chương 1.1 GIỚI THIỆU 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: Chương 2.1 ỨNG DỤNG B Blazor WebAssembly (client side blazor) 2.1.1 Điểm mạnh củ 2.1.2 Điểm yếu B Mơ hình lưu trữ 2.1.3 2.2 Một số file tron Blazor Server 2.2.1 Điểm mạnh củ 2.2.2 Điểm yếu S 2.2.3 Một số file tron 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 Ứ 3.1 Tải xuống cài đặt: 3.2 Tạo ứng dụng 3.3 Chạy ứng dụng: TÀI LIỆU THAM KHẢO 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 hồ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 Chương GIỚI THIỆU 1.1 Blazor ? Ngữ cảnh: 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 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 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 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 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) 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 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 Chương ỨNG DỤNG BLAZOR: 2.1 Blazor WebAssembly (client side blazor) Hình 2-3 Blazor WebAssembly WebAssembly (gọi tắt 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# Hình 2-4 Cách hoạt động WebAssembly Blazor WebAssembly hay gọi 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 secret) khơng an tồn Mơ hình lưu trữ 2.1.3 Một số file cấu trúc project webAssem bly index.htm l chứa blazor.we bassembly js javascript file File download tới browser chịu trách nhiệm download toàn app assets bao gồm webAssem bly byteCode assembly BlazorWebAssembly Loading An unhandled error has occurred Reload Tiếp theo folder Pages chưa razor component 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 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 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 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, 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 _Host.cshtml 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 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: Hình 2-8 File Host Tương tự WebAssembly folder Pages 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(); 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 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 Tính 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 đ Điều k Thời gian ho Kịch b 3.1 Tải xuống 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 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 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 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 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 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 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 "/" Index Hello, world! Welcome to your new app Nó chứa mã đặt làm trang chủ hiển thị dòng chữ "Xin chào, giới!" "Chào mừng bạn đến với ứng dụng bạn" Nó bao gồm acomponent hiển thị liên kết đến khảo sát phản hồi Blagor.SurveyPrompt TÀI LIỆU THAM KHẢO [1] https://viblo.asia/p/tong-quan-ve-blazor-trong-net-core-V3m5WkYy5O7 Hướng dẫn Blazor | Xây dựng ứng dụng bạn (microsoft.com) [2] https://viblo.asia/p/tong-quan-ve-blazor-trong-net-core-V3m5WkYy5O7\ [3] https://www.programmingwithwolfgang.com/blazor-server-vs-blazor-webassembly/ [4] https://www.zenesys.com/blog/blazor-server-vs-blazor-web-assembly ... 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: 46. 01 . 104 .05 7 Nguyễn Thế Hồng 46. 01 . 104 .07 2 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: 2211COMP1 06 4 01 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 202 2 LỜI CẢM... viết này, hỗ trợ 3. 700 cơng - ty có 61 .00 0 người đóng góp 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