struktura projektu ASP.NET Core Blazor

W tym artykule opisano pliki i foldery tworzące aplikację Blazor wygenerowaną Blazor na podstawie szablonu projektu.

Blazor Web App

Blazor Web App szablon projektu: blazor

Szablon Blazor Web App projektu zapewnia pojedynczy punkt wyjścia do używania Razor składników (.razor) do tworzenia dowolnego stylu internetowego interfejsu użytkownika, renderowanego po stronie serwera i renderowanego po stronie klienta. Łączy ona mocne strony istniejących Blazor Server i Blazor WebAssembly hostowania modeli z renderowaniem po stronie serwera, renderowaniem strumieniowym, rozszerzoną nawigacją i obsługą formularzy oraz możliwość dodawania interakcyjności przy użyciu Blazor Server metody lub Blazor WebAssembly na podstawie poszczególnych składników.

Jeśli podczas tworzenia aplikacji wybrano renderowanie po stronie klienta (CSR) i interaktywne renderowanie po stronie serwera (interakcyjne SSR), szablon projektu używa trybu renderowania interakcyjnego. Tryb automatycznego renderowania początkowo używa interakcyjnego przewodnika SSR, podczas gdy pakiet aplikacji platformy .NET i środowisko uruchomieniowe są pobierane do przeglądarki. Po aktywowaniu środowiska uruchomieniowego zestawu WebAssembly platformy .NET renderowanie przełącza się na csr.

Szablon Blazor Web App umożliwia renderowanie statyczne i interaktywne po stronie serwera przy użyciu jednego projektu. Jeśli włączysz również renderowanie interactive WebAssembly, projekt zawiera dodatkowy projekt klienta (.Client) dla składników opartych na zestawie WebAssembly. Skompilowane dane wyjściowe z projektu klienta są pobierane do przeglądarki i wykonywane na kliencie. Składniki korzystające z interakcyjnych trybów renderowania WebAssembly lub Interactive Auto muszą znajdować się w projekcie .Client .

Struktura folderów składników .Client projektu różni się od Blazor Web Appgłównej struktury folderów projektu, ponieważ głównym projektem jest standardowy projekt ASP.NET Core. Główny projekt musi uwzględniać inne zasoby dla projektów ASP.NET Core, które nie są powiązane z Blazor. Możesz użyć dowolnej struktury folderów składników, której chcesz użyć w projekcie .Client . Jeśli chcesz, możesz dublować układ folderu składnika głównego projektu w projekcie .Client . Należy pamiętać, że przestrzenie nazw mogą wymagać korekt dla takich zasobów, jak pliki układu, jeśli przenosisz składniki do różnych folderów niż szablon projektu.

Więcej informacji na temat składników i trybów renderowania znajduje się w artykułach ASP.NET Core Razor components and ASP.NET Core Blazor render tryby .

Na podstawie trybu renderowania interakcyjnego wybranego podczas tworzenia Layout aplikacji folder znajduje się w projekcie serwera w Components folderze lub w katalogu głównym .Client projektu. Folder zawiera następujące składniki układu i arkusze stylów:

• Składnik MainLayout (MainLayout.razor) jest składnikiem układu aplikacji.
• Jest MainLayout.razor.css to arkusz stylów głównego układu aplikacji.
• Składnik NavMenu (NavMenu.razor) implementuje nawigację na pasku bocznym. Składnik zawiera NavLink składniki (NavLink), które renderować łącza nawigacji do innych Razor składników. Składnik NavLink wskazuje użytkownikowi, który składnik jest aktualnie wyświetlany.
• Jest NavMenu.razor.css to arkusz stylów menu nawigacji aplikacji.

Składnik Routes (Routes.razor) znajduje się w projekcie serwera lub .Client projekcie i konfiguruje routing przy użyciu Router składnika. W przypadku składników Router interaktywnych po stronie klienta składnik przechwytuje nawigację przeglądarki i renderuje stronę zgodną z żądanym adresem.

Folder Components projektu serwera zawiera składniki po stronie Razor serwera aplikacji. Składniki udostępnione są często umieszczane w folderze głównym Components folderu, natomiast składniki układu i strony są zwykle umieszczane w folderach w folderze Components .

Folder Components/Pages projektu serwera zawiera składniki po stronie Razor serwera aplikacji. Trasa dla każdej strony jest określana przy użyciu @page dyrektywy .

Składnik App () jest składnikiem głównym aplikacji z adiustacjami HTML<head>, Routes składnikiem i tagiemBlazor<script>.App.razor Składnik główny jest pierwszym składnikiem ładowany przez aplikację.

Plik _Imports.razor w każdym serwerze i .Client projektach zawiera wspólne Razor dyrektywy dla Razor składników każdego projektu, takie jak @using dyrektywy dla przestrzeni nazw.

Folder Properties projektu serwera zawiera konfigurację środowiska programistycznego launchSettings.json w pliku.

Uwaga

Profil http poprzedza https profil w launchSettings.json pliku . Po uruchomieniu aplikacji przy użyciu interfejsu wiersza polecenia platformy .NET aplikacja jest uruchamiana w punkcie końcowym HTTP, ponieważ pierwszy znaleziony profil to http. Kolejność profilów ułatwia przejście wdrażania protokołu HTTPS dla użytkowników systemów Linux i macOS. Jeśli wolisz uruchomić aplikację przy użyciu interfejsu wiersza polecenia platformy .NET bez konieczności przekazywania -lp https polecenia lub --launch-profile https do dotnet watch polecenia (lub dotnet run), wystarczy umieścić https profil nad profilem http w pliku.

Folderem wwwroot projektu serwera jest folder główny sieci Web dla projektu serwera, który zawiera publiczne zasoby statyczne aplikacji.

Program.cs Plik projektu serwera jest punktem wejścia projektu, który konfiguruje hosta aplikacji internetowej ASP.NET Core i zawiera logikę uruchamiania aplikacji, w tym rejestracje usług, konfigurację, rejestrowanie i potok przetwarzania żądań:

• Usługi dla Razor składników są dodawane przez wywołanie metody AddRazorComponents. AddInteractiveServerComponents dodaje usługi do obsługi renderowania składników interactive server. AddInteractiveWebAssemblyComponents dodaje usługi do obsługi renderowania składników Interactive WebAssembly.
• MapRazorComponents odnajduje dostępne składniki i określa składnik główny aplikacji (pierwszy załadowany składnik), który domyślnie jest składnikiem App (App.razor). AddInteractiveServerRenderMode Konfiguruje interaktywne renderowanie po stronie serwera (interakcyjne SSR) dla aplikacji. AddInteractiveWebAssemblyRenderMode Konfiguruje tryb renderowania Interactive WebAssembly dla aplikacji.

Pliki ustawień aplikacji (appsettings.Development.json, appsettings.json) na serwerze lub .Client projekcie zapewniają ustawienia konfiguracji. W projekcie serwera pliki ustawień znajdują się w katalogu głównym projektu. W projekcie .Client pliki ustawień są używane z folderu głównego sieci Web. wwwroot

W projekcie .Client :

• Folder Pages zawiera składniki po stronie klienta routingu Razor . Trasa dla każdej strony jest określana przy użyciu @page dyrektywy .

• Folder wwwroot jest folderem głównym sieci Web dla .Client projektu, który zawiera publiczne zasoby statyczne aplikacji.

• Plik Program.cs jest punktem wejścia projektu, który konfiguruje hosta zestawu WebAssembly i zawiera logikę uruchamiania projektu, w tym rejestracje usług, konfigurację, rejestrowanie i potok przetwarzania żądań.

Dodatkowe pliki i foldery mogą być wyświetlane w aplikacji utworzonej na podstawie szablonu projektu po skonfigurowaniu Blazor Web App dodatkowych opcji. Na przykład generowanie aplikacji z ASP.NET Core Identity obejmuje dodatkowe zasoby na potrzeby funkcji uwierzytelniania i autoryzacji.

Autonomiczna Blazor WebAssembly

Blazor WebAssembly Autonomiczny szablon projektu:blazorwasm

Szablon Blazor WebAssembly tworzy początkowe pliki i strukturę katalogów dla aplikacji autonomicznej Blazor WebAssembly :

• blazorwasm Jeśli szablon jest używany, aplikacja zostanie wypełniona następującymi elementami:
  • Kod demonstracyjny dla Weather składnika, który ładuje dane ze statycznego zasobu (weather.json) i interakcji użytkownika ze składnikiem Counter .
  • Zestaw narzędzi frontonu bootstrap .
• Szablon blazorwasm można również wygenerować bez przykładowych stron i stylów.

Struktura projektu:

• Layout folder: zawiera następujące składniki układu i arkusze stylów:

  • MainLayoutcomponent (MainLayout.razor): składnik układu aplikacji.
  • MainLayout.razor.css: arkusz stylów dla głównego układu aplikacji.
  • NavMenu component (NavMenu.razor): implementuje nawigację na pasku bocznym. NavLink Zawiera składnik (NavLink), który renderuje łącza nawigacji do innych Razor składników. Składnik NavLink automatycznie wskazuje wybrany stan po załadowaniu składnika, co pomaga użytkownikowi zrozumieć, który składnik jest aktualnie wyświetlany.
  • NavMenu.razor.css: arkusz stylów dla menu nawigacji aplikacji.

• Pages folder: zawiera składniki routingu Blazor Razor aplikacji (.razor). Trasa dla każdej strony jest określana przy użyciu @page dyrektywy . Szablon zawiera następujące składniki:

  • Counter component (Counter.razor): implementuje stronę Licznik.
  • Index component (Index.razor): implementuje Home stronę.
  • Weather component (Weather.razor): implementuje stronę Pogoda.

• _Imports.razor: zawiera wspólne Razor dyrektywy, które mają być uwzględniane w składnikach aplikacji (.razor), takich jak @using dyrektywy dla przestrzeni nazw.

• App.razor: składnik główny aplikacji, który konfiguruje routing po stronie klienta przy użyciu Router składnika. Składnik Router przechwytuje nawigację przeglądarki i renderuje stronę zgodną z żądanym adresem.

• Properties folder: przechowuje konfigurację środowiska programistycznego launchSettings.json w pliku.

  Uwaga

  Profil http poprzedza https profil w launchSettings.json pliku . Po uruchomieniu aplikacji przy użyciu interfejsu wiersza polecenia platformy .NET aplikacja jest uruchamiana w punkcie końcowym HTTP, ponieważ pierwszy znaleziony profil to http. Kolejność profilów ułatwia przejście wdrażania protokołu HTTPS dla użytkowników systemów Linux i macOS. Jeśli wolisz uruchomić aplikację przy użyciu interfejsu wiersza polecenia platformy .NET bez konieczności przekazywania -lp https polecenia lub --launch-profile https do dotnet watch polecenia (lub dotnet run), wystarczy umieścić https profil nad profilem http w pliku.

• wwwroot folder: folder główny sieci Web dla aplikacji zawierający publiczne zasoby statyczne aplikacji, w tym appsettings.json pliki ustawień aplikacji środowiskowych dla ustawień konfiguracji i przykładowych danych pogodowych (sample-data/weather.json). Strona index.html internetowa to strona główna aplikacji zaimplementowana jako strona HTML:

  • Gdy każda strona aplikacji jest początkowo żądana, ta strona jest renderowana i zwracana w odpowiedzi.
  • Strona określa, gdzie jest renderowany składnik główny App . Składnik jest renderowany w lokalizacji div elementu DOM z wartością id app (<div id="app">Loading...</div>).

• Program.cs: punkt wejścia aplikacji, który konfiguruje hosta zestawu WebAssembly:

  • Składnik App jest głównym składnikiem aplikacji. Składnik App jest określony jako div element DOM z wartością id (<div id="app">Loading...</div> w wwwroot/index.html) do kolekcji składników app głównych (builder.RootComponents.Add<App>("#app")).
  • Usługi są dodawane i konfigurowane (na przykład builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Dodatkowe pliki i foldery mogą być wyświetlane w aplikacji utworzonej na podstawie szablonu projektu po skonfigurowaniu Blazor WebAssembly dodatkowych opcji. Na przykład generowanie aplikacji z ASP.NET Core Identity obejmuje dodatkowe zasoby na potrzeby funkcji uwierzytelniania i autoryzacji.

Lokalizacja skryptu Blazor

Skrypt Blazor jest obsługiwany z zasobu osadzonego w strukturze udostępnionej ASP.NET Core.

W pliku Blazor Web AppBlazor skrypt znajduje się w Components/App.razor pliku :

<script src="_framework/blazor.web.js"></script>

Blazor Server W aplikacji Blazor skrypt znajduje się w Pages/_Host.cshtml pliku:

<script src="_framework/blazor.server.js"></script>

Blazor WebAssembly W aplikacji zawartość skryptu Blazor wwwroot/index.html znajduje się w pliku:

<script src="_framework/blazor.webassembly.js"></script>

<head> Lokalizacja i <body> zawartość

W pliku znajduje się element , <head> a Blazor Web App<body> zawartość znajduje się w Components/App.razor pliku .

Blazor WebAssembly W aplikacji <head> i <body> zawartość znajduje się w wwwroot/index.html pliku.

Dodatkowe zasoby

• Narzędzia dla platformy ASP.NET Core Blazor
• Modele hostingu ASP.NET Core Blazor
• Przegląd minimalnych interfejsów API
• Blazorprzykładowe repozytorium GitHub () (dotnet/blazor-samplesjak pobrać)