Phạm Duy Anh

Bài viết này mô tả các file và thư mục tạo nên ứng dụng Blazor được tạo từ một Blazor project template. Bài viết được thực hiện trên ASP.NET core 6.0

Cấu trúc project Blazor server

Blazor Server project template: blazorserver

Blazor Server template khởi tạo các file và cấu trúc thư mục cho 1 Blazor server app. Ứng dụng là code demo cho một FetchData component nó load dữ liệu từ một service đã được đăng ký, WeatherForecastService , và tương tác người dùng với một Counter component.

Data folder: chứa WeatherForecast class and thực thi của WeatherForecastService mà nó sẽ cung cấp dữ liệu thời tiết cho FetchData component của ứng dụng.

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. Template gồm những điều sau:

• _Host.cshtml: 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).
• _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ủ.

Lưu ý:

JavaScript (JS) files được thêm vào Pages/_Layout.cshtml file nên được đặt trước  </body> tag. Thứ tự mà code JS tùy chỉnh được tải từ các tệp JS là quan trọng trong một số trường hợp. Ví dụ: đảm bảo rằng các file JS với các phương thức tương tác được bao gồm trước Blazor framework JS files.

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:

• Chỉ định các dependency injection (DI) services. của ứng dụng. Các Services được thêm vào bằng cách gọi AddServerSideBlazor và WeatherForecastService được thêm vào vùng chứa Services  để sử dụng trong ví dụ FetchData component.
• Định cấu hình quy trình xử lý yêu cầu của ứng dụng:
  • MapBlazorHub được gọi để thiết lập một điểm cuối cho kết nối thời gian thực với trình duyệt. Kết nối được tạo bằng SignalR, là một framework  để thêm chức năng web thời gian thực vào các ứng dụng.
  • MapFallbackToPage (“/ _ Host”) được gọi để thiết lập trang gốc của ứng dụng (Pages / _Host.cshtml) và cho phép điều hướng.

Bài viết liên quan với bài viết cấu trúc project ASP.NET Core Blazor
ASP.NET Core Blazor là gì ?

Thêm một component trong Blazor Server

nguồn
https://docs.microsoft.com/en-us/aspnet/core/blazor/project-structure?view=aspnetcore-6.0