struktura projektu ASP.NET Core Blazor

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 mocne elementy Blazor ServerBlazor WebAssembly i z renderowaniem po stronie serwera i po stronie klienta, renderowaniem przesyłanym strumieniowo, rozszerzoną obsługą nawigacji i formularzy oraz możliwością 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.
• MainLayout.razor.css to umieszczony obok komponentu arkusz stylów aplikacji służący do głównego układu.
• 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 powiązany arkusz stylów dla menu nawigacji aplikacji.
• Składnik ReconnectModal odzwierciedla stan połączenia po stronie serwera w interfejsie użytkownika i jest uwzględniany, gdy interaktywny tryb renderowania aplikacji jest interaktywnym serwerem lub interakcyjnym automatycznym. Aby uzyskać więcej informacji, zobacz wskazówki dotyczące platformy ASP.NET CoreBlazorSignalR.
• Jest ReconnectModal.razor.css to skojarzony arkusz stylów dla składnika ReconnectModal.
• ReconnectModal.razor.js jest współlokalizowanym plikiem JavaScript dla składnika ReconnectModal.

• Składnik MainLayout (MainLayout.razor) jest składnikiem układu aplikacji.
• MainLayout.razor.css to umieszczony obok komponentu arkusz stylów aplikacji służący do głównego układu.
• 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 powiązany arkusz stylów dla 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 .

moniker range=">= aspnetcore-10.0"

Składnik NotFound (NotFound.razor) implementuje stronę z komunikatem "Nie znaleziono", aby wyświetlić ją, gdy zawartość nie zostanie znaleziona dla ścieżki żądania. Aby uzyskać więcej informacji, zobacz nawigację ASP.NET CoreBlazor.

zakończenie monikera

Składnik App () jest składnikiem głównym aplikacji z adiustacjami HTMLApp.razor, <head> składnikiem i tagiemRoutesBlazor.<script> 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.

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 składników Razor są dodawane przez wywołanie AddRazorComponents. AddInteractiveServerComponents dodaje usługi do obsługi renderowania składników serwera interaktywnego. 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.

Blazor Server

Blazor Server szablony projektów: blazorserver, blazorserver-empty

Szablony Blazor Server tworzą początkowe pliki i strukturę katalogów dla Blazor Server aplikacji:

• blazorserver Jeśli szablon jest używany, aplikacja zostanie wypełniona następującymi elementami:
  • Kod demonstracyjny dla FetchData składnika, który ładuje dane z usługi prognozy pogody (WeatherForecastService) i interakcji użytkownika ze składnikiem Counter .
  • Zestaw narzędzi frontonu bootstrap .
• blazorserver-empty Jeśli szablon jest używany, aplikacja jest tworzona bez demonstracyjnego kodu i bootstrap.

Struktura projektu:

• Data folder: zawiera klasę WeatherForecast i implementację WeatherForecastService elementu , która dostarcza przykładowe dane pogodowe do składnika aplikacji FetchData .

• Pagesfolder: zawiera Blazor składniki routingu Razor aplikacji (.razor) i stronę Razor główną Blazor Server aplikacji. Trasa dla każdej strony jest określana przy użyciu @page dyrektywy . Szablon zawiera następujące elementy:

  • _Host.cshtml: strona główna aplikacji zaimplementowana jako Razor strona:
    • Gdy każda strona aplikacji jest początkowo żądana, ta strona jest renderowana i zwracana w odpowiedzi.
    • Strona Host określa, gdzie jest renderowany składnik główny App (App.razor).
  • Counter component (Counter.razor): implementuje stronę Licznik.
  • Error component (Error.razor): Renderowane, gdy w aplikacji wystąpi nieobsługiwany wyjątek.
  • FetchData component (FetchData.razor): implementuje stronę Pobierania danych.
  • Index component (Index.razor): implementuje Home stronę.

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

• Shared folder: zawiera następujące składniki udostępnione 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.
  • SurveyPrompt składnik (SurveyPrompt.razor): Blazor składnik ankiety.

• wwwroot folder: folder główny sieci Web dla aplikacji zawierającej publiczne zasoby statyczne aplikacji.

• _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.

• appsettings.json i pliki ustawień aplikacji środowiskowych: podaj ustawienia konfiguracji aplikacji.

• Program.cs: punkt wejścia aplikacji, który konfiguruje hosta ASP.NET Core i zawiera logikę uruchamiania aplikacji, w tym rejestracje usługi i konfigurację potoku przetwarzania żądań:

  • Określa usługi wstrzykiwania zależności aplikacji (DI). Usługi są dodawane przez wywołanie AddServerSideBlazormetody , a WeatherForecastService element jest dodawany do kontenera usługi do użycia przez przykładowy FetchData składnik.
  • Konfiguruje potok obsługi żądań aplikacji:
    • MapBlazorHub Jest wywoływana w celu skonfigurowania punktu końcowego dla połączenia w czasie rzeczywistym z przeglądarką. Połączenie jest tworzone za pomocą SignalRpolecenia , która jest strukturą umożliwiającą dodawanie funkcji internetowych w czasie rzeczywistym do aplikacji.
    • MapFallbackToPage("/_Host") Jest wywoływana w celu skonfigurowania strony głównej aplikacji (Pages/_Host.cshtml) i włączenia nawigacji.

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

Blazor Server szablon projektu: blazorserver

Szablon Blazor Server tworzy początkowe pliki i strukturę katalogów dla Blazor Server aplikacji. Aplikacja jest wypełniana kodem demonstracyjnym FetchData składnika, który ładuje dane z zarejestrowanej usługi, WeatherForecastServiceoraz interakcję użytkownika ze składnikiem Counter .

• Data folder: zawiera klasę WeatherForecast i implementację WeatherForecastService elementu , która dostarcza przykładowe dane pogodowe do składnika aplikacji FetchData .

• Pagesfolder: zawiera Blazor składniki routingu Razor aplikacji (.razor) i stronę Razor główną Blazor Server aplikacji. Trasa dla każdej strony jest określana przy użyciu @page dyrektywy . Szablon zawiera następujące elementy:

  • _Host.cshtml: strona główna aplikacji zaimplementowana jako Razor strona:
    • Gdy każda strona aplikacji jest początkowo żądana, ta strona jest renderowana i zwracana w odpowiedzi.
    • Strona Host określa, gdzie jest renderowany składnik główny App (App.razor).
  • _Layout.cshtml: strona układu strony głównej _Host.cshtml aplikacji.
  • Counter component (Counter.razor): implementuje stronę Licznik.
  • Error component (Error.razor): Renderowane, gdy w aplikacji wystąpi nieobsługiwany wyjątek.
  • FetchData component (FetchData.razor): implementuje stronę Pobierania danych.
  • Index component (Index.razor): implementuje Home stronę.

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

• Shared folder: zawiera następujące składniki udostępnione 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.
  • SurveyPrompt składnik (SurveyPrompt.razor): Blazor składnik ankiety.

• wwwroot folder: folder główny sieci Web dla aplikacji zawierającej publiczne zasoby statyczne aplikacji.

• _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.

• appsettings.json i pliki ustawień aplikacji środowiskowych: podaj ustawienia konfiguracji aplikacji.

• Program.cs: punkt wejścia aplikacji, który konfiguruje hosta ASP.NET Core i zawiera logikę uruchamiania aplikacji, w tym rejestracje usługi i konfigurację potoku przetwarzania żądań:

  • Określa usługi wstrzykiwania zależności aplikacji (DI). Usługi są dodawane przez wywołanie AddServerSideBlazormetody , a WeatherForecastService element jest dodawany do kontenera usługi do użycia przez przykładowy FetchData składnik.
  • Konfiguruje potok obsługi żądań aplikacji:
    • MapBlazorHub Jest wywoływana w celu skonfigurowania punktu końcowego dla połączenia w czasie rzeczywistym z przeglądarką. Połączenie jest tworzone za pomocą SignalRpolecenia , która jest strukturą umożliwiającą dodawanie funkcji internetowych w czasie rzeczywistym do aplikacji.
    • MapFallbackToPage("/_Host") Jest wywoływana w celu skonfigurowania strony głównej aplikacji (Pages/_Host.cshtml) i włączenia nawigacji.

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

Blazor Server szablon projektu: blazorserver

Szablon Blazor Server tworzy początkowe pliki i strukturę katalogów dla Blazor Server aplikacji. Aplikacja jest wypełniana kodem demonstracyjnym FetchData składnika, który ładuje dane z zarejestrowanej usługi, WeatherForecastServiceoraz interakcję użytkownika ze składnikiem Counter .

• Data folder: zawiera klasę WeatherForecast i implementację WeatherForecastService elementu , która dostarcza przykładowe dane pogodowe do składnika aplikacji FetchData .

• Pagesfolder: zawiera Blazor składniki routingu Razor aplikacji (.razor) i stronę Razor główną Blazor Server aplikacji. Trasa dla każdej strony jest określana przy użyciu @page dyrektywy . Szablon zawiera następujące elementy:

  • _Host.cshtml: strona główna aplikacji zaimplementowana jako Razor strona:
    • Gdy każda strona aplikacji jest początkowo żądana, ta strona jest renderowana i zwracana w odpowiedzi.
    • Strona Host określa, gdzie jest renderowany składnik główny App (App.razor).
  • Counter component (Counter.razor): implementuje stronę Licznik.
  • Error component (Error.razor): Renderowane, gdy w aplikacji wystąpi nieobsługiwany wyjątek.
  • FetchData component (FetchData.razor): implementuje stronę Pobierania danych.
  • Index component (Index.razor): implementuje Home stronę.

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

• Shared folder: zawiera następujące składniki udostępnione 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.
  • SurveyPrompt składnik (SurveyPrompt.razor): Blazor składnik ankiety.

• wwwroot folder: folder główny sieci Web dla aplikacji zawierającej publiczne zasoby statyczne aplikacji.

• _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.

• appsettings.json i pliki ustawień aplikacji środowiskowych: podaj ustawienia konfiguracji aplikacji.

• Program.cs: punkt wejścia aplikacji, który konfiguruje hosta ASP.NET Core.

• Startup.cs: zawiera logikę uruchamiania aplikacji. Klasa Startup definiuje dwie metody:

  • ConfigureServices: konfiguruje usługi wstrzykiwania zależności (DI) aplikacji. Usługi są dodawane przez wywołanie AddServerSideBlazormetody , a WeatherForecastService element jest dodawany do kontenera usługi do użycia przez przykładowy FetchData składnik.
  • Configure: Konfiguruje potok obsługi żądań aplikacji:
    • MapBlazorHub Jest wywoływana w celu skonfigurowania punktu końcowego dla połączenia w czasie rzeczywistym z przeglądarką. Połączenie jest tworzone za pomocą SignalRpolecenia , która jest strukturą umożliwiającą dodawanie funkcji internetowych w czasie rzeczywistym do aplikacji.
    • MapFallbackToPage("/_Host") Jest wywoływana w celu skonfigurowania strony głównej aplikacji (Pages/_Host.cshtml) i włączenia nawigacji.

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

Blazor Server szablon projektu: blazorserver

Szablon Blazor Server tworzy początkowe pliki i strukturę katalogów dla Blazor Server aplikacji. Aplikacja jest wypełniana kodem demonstracyjnym FetchData składnika, który ładuje dane z zarejestrowanej usługi, WeatherForecastServiceoraz interakcję użytkownika ze składnikiem Counter .

• Data folder: zawiera klasę WeatherForecast i implementację WeatherForecastService elementu , która dostarcza przykładowe dane pogodowe do składnika aplikacji FetchData .

• Pagesfolder: zawiera Blazor składniki routingu Razor aplikacji (.razor) i stronę Razor główną Blazor Server aplikacji. Trasa dla każdej strony jest określana przy użyciu @page dyrektywy . Szablon zawiera następujące elementy:

  • _Host.cshtml: strona główna aplikacji zaimplementowana jako Razor strona:
    • Gdy każda strona aplikacji jest początkowo żądana, ta strona jest renderowana i zwracana w odpowiedzi.
    • Strona Host określa, gdzie jest renderowany składnik główny App (App.razor).
  • Counter component (Counter.razor): implementuje stronę Licznik.
  • Error component (Error.razor): Renderowane, gdy w aplikacji wystąpi nieobsługiwany wyjątek.
  • FetchData component (FetchData.razor): implementuje stronę Pobierania danych.
  • Index component (Index.razor): implementuje Home stronę.

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

• Shared folder: zawiera następujące składniki udostępnione:

  • MainLayoutcomponent (MainLayout.razor): składnik 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.
  • SurveyPrompt składnik (SurveyPrompt.razor): Blazor składnik ankiety.

• wwwroot folder: folder główny sieci Web dla aplikacji zawierającej publiczne zasoby statyczne aplikacji.

• _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.

• appsettings.json i pliki ustawień aplikacji środowiskowych: podaj ustawienia konfiguracji aplikacji.

• Program.cs: punkt wejścia aplikacji, który konfiguruje hosta ASP.NET Core.

• Startup.cs: zawiera logikę uruchamiania aplikacji. Klasa Startup definiuje dwie metody:

  • ConfigureServices: konfiguruje usługi wstrzykiwania zależności (DI) aplikacji. Usługi są dodawane przez wywołanie AddServerSideBlazormetody , a WeatherForecastService element jest dodawany do kontenera usługi do użycia przez przykładowy FetchData składnik.
  • Configure: Konfiguruje potok obsługi żądań aplikacji:
    • MapBlazorHub Jest wywoływana w celu skonfigurowania punktu końcowego dla połączenia w czasie rzeczywistym z przeglądarką. Połączenie jest tworzone za pomocą SignalRpolecenia , która jest strukturą umożliwiającą dodawanie funkcji internetowych w czasie rzeczywistym do aplikacji.
    • MapFallbackToPage("/_Host") Jest wywoływana w celu skonfigurowania strony głównej aplikacji (Pages/_Host.cshtml) i włączenia nawigacji.

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

Samodzielny 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.

koniec identyfikatora

moniker range=">= aspnetcore-10.0"

• Pages folder: zawiera składniki routingu BlazorRazor 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.
  • NotFound komponent (NotFound.razor): Implementuje stronę błędu 'Nie znaleziono' do wyświetlania, gdy zawartość nie jest znaleziona dla ścieżki żądania. Aby uzyskać więcej informacji, zobacz nawigację ASP.NET CoreBlazor.

moniker-end

moniker range=">= aspnetcore-8.0 < aspnetcore-10.0"

• Pages folder: zawiera składniki routingu BlazorRazor 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.

koniec-monikera

moniker range=">= aspnetcore-8.0"

• _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ą idapp (<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 (app w <div id="app">Loading...</div>) do kolekcji składników wwwroot/index.html 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.

Blazor WebAssembly

Blazor WebAssembly szablony projektów: blazorwasm, blazorwasm-empty

Szablony Blazor WebAssembly tworzą początkowe pliki i strukturę katalogów dla Blazor WebAssembly aplikacji:

• blazorwasm Jeśli szablon jest używany, aplikacja zostanie wypełniona następującymi elementami:
  • Kod demonstracyjny dla FetchData składnika, który ładuje dane ze statycznego zasobu (weather.json) i interakcji użytkownika ze składnikiem Counter .
  • Zestaw narzędzi frontonu bootstrap .
• blazorwasm-empty Jeśli szablon jest używany, aplikacja jest tworzona bez demonstracyjnego kodu i bootstrap.

Struktura projektu:

• Pages folder: zawiera składniki routingu BlazorRazor 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.
  • FetchData component (FetchData.razor): implementuje stronę Pobierania danych.
  • Index component (Index.razor): implementuje Home stronę.

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

• Shared folder: zawiera następujące składniki udostępnione 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.
  • SurveyPromptcomponent () (SurveyPrompt.razorASP.NET Core na platformie .NET 7 lub starszym): Blazor składnik ankiety.

• 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. 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ą idapp (<div id="app">Loading...</div>).

• _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.

• 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 (app w <div id="app">Loading...</div>) do kolekcji składników wwwroot/index.html 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.

Blazor WebAssembly Hostowane rozwiązanie obejmuje następujące projekty ASP.NET Core:

• "Client": Blazor WebAssembly Aplikacja.
• "Server": Aplikacja, która obsługuje Blazor WebAssembly dane dotyczące aplikacji i pogody dla klientów.
• "Shared": Projekt, który obsługuje typowe klasy, metody i zasoby.

Rozwiązanie jest generowane na podstawie Blazor WebAssembly szablonu projektu w programie Visual Studio z zaznaczonym polem wyboru ASP.NET Core Hosted lub z -ho|--hosted opcją przy użyciu polecenia interfejsu wiersza polecenia platformy dotnet new blazorwasm .NET. Aby uzyskać więcej informacji, zobacz Tooling for ASP.NET Core Blazor.

Struktura projektu aplikacji po stronie klienta w hostowanym Blazor rozwiązaniu Webassembly ("Client" projektu) jest taka sama jak struktura projektu dla autonomicznej Blazor WebAssembly aplikacji. Dodatkowe pliki w rozwiązaniu hostowanym Blazor WebAssembly :

• Projekt "Server" zawiera kontroler prognozy pogody, Controllers/WeatherForecastController.cs który zwraca dane pogodowe do składnika projektu Client "FetchData".
• Projekt "Shared" zawiera klasę prognozy pogody, WeatherForecast.cs która reprezentuje dane pogodowe dla projektów "Client" i "Server".

Blazor WebAssembly

Blazor WebAssembly szablon projektu: blazorwasm

Szablon Blazor WebAssembly tworzy początkowe pliki i strukturę katalogów dla Blazor WebAssembly aplikacji. Aplikacja jest wypełniana kodem demonstracyjnym FetchData dla składnika, który ładuje dane ze statycznego zasobu, weather.jsonoraz interakcję użytkownika z składnikiem Counter .

• Pages folder: zawiera składniki routingu BlazorRazor 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.
  • FetchData component (FetchData.razor): implementuje stronę Pobierania danych.
  • Index component (Index.razor): implementuje Home stronę.

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

• Shared folder: zawiera następujące składniki udostępnione 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.
  • SurveyPrompt składnik (SurveyPrompt.razor): Blazor składnik ankiety.

• 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. 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ą idapp (<div id="app">Loading...</div>).

• _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.

• 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 (app w <div id="app">Loading...</div>) do kolekcji składników wwwroot/index.html 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.

Blazor WebAssembly Hostowane rozwiązanie obejmuje następujące projekty ASP.NET Core:

• "Client": Blazor WebAssembly Aplikacja.
• "Server": Aplikacja, która obsługuje Blazor WebAssembly dane dotyczące aplikacji i pogody dla klientów.
• "Shared": Projekt, który obsługuje typowe klasy, metody i zasoby.

Rozwiązanie jest generowane na podstawie Blazor WebAssembly szablonu projektu w programie Visual Studio z zaznaczonym polem wyboru ASP.NET Core Hosted lub z -ho|--hosted opcją przy użyciu polecenia interfejsu wiersza polecenia platformy dotnet new blazorwasm .NET. Aby uzyskać więcej informacji, zobacz Tooling for ASP.NET Core Blazor.

Struktura projektu aplikacji po stronie klienta w hostowanym Blazor rozwiązaniu Webassembly ("Client" projektu) jest taka sama jak struktura projektu dla autonomicznej Blazor WebAssembly aplikacji. Dodatkowe pliki w rozwiązaniu hostowanym Blazor WebAssembly :

• Projekt "Server" zawiera kontroler prognozy pogody, Controllers/WeatherForecastController.cs który zwraca dane pogodowe do składnika projektu Client "FetchData".
• Projekt "Shared" zawiera klasę prognozy pogody, WeatherForecast.cs która reprezentuje dane pogodowe dla projektów "Client" i "Server".

Blazor WebAssembly

Blazor WebAssembly szablon projektu: blazorwasm

Szablon Blazor WebAssembly tworzy początkowe pliki i strukturę katalogów dla Blazor WebAssembly aplikacji. Aplikacja jest wypełniana kodem demonstracyjnym FetchData dla składnika, który ładuje dane ze statycznego zasobu, weather.jsonoraz interakcję użytkownika z składnikiem Counter .

• Pages folder: zawiera składniki routingu BlazorRazor 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.
  • FetchData component (FetchData.razor): implementuje stronę Pobierania danych.
  • Index component (Index.razor): implementuje Home stronę.

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

• Shared folder: zawiera następujące składniki udostępnione 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.
  • SurveyPrompt składnik (SurveyPrompt.razor): Blazor składnik ankiety.

• 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. 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ą idapp (<div id="app">Loading...</div>).

• _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.

• 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 (app w <div id="app">Loading...</div>) do kolekcji składników wwwroot/index.html 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.

Blazor WebAssembly Hostowane rozwiązanie obejmuje następujące projekty ASP.NET Core:

• "Client": Blazor WebAssembly Aplikacja.
• "Server": Aplikacja, która obsługuje Blazor WebAssembly dane dotyczące aplikacji i pogody dla klientów.
• "Shared": Projekt, który obsługuje typowe klasy, metody i zasoby.

Rozwiązanie jest generowane na podstawie Blazor WebAssembly szablonu projektu w programie Visual Studio z zaznaczonym polem wyboru ASP.NET Core Hosted lub z -ho|--hosted opcją przy użyciu polecenia interfejsu wiersza polecenia platformy dotnet new blazorwasm .NET. Aby uzyskać więcej informacji, zobacz Tooling for ASP.NET Core Blazor.

Struktura projektu aplikacji po stronie klienta w hostowanym Blazor rozwiązaniu Webassembly ("Client" projektu) jest taka sama jak struktura projektu dla autonomicznej Blazor WebAssembly aplikacji. Dodatkowe pliki w rozwiązaniu hostowanym Blazor WebAssembly :

• Projekt "Server" zawiera kontroler prognozy pogody, Controllers/WeatherForecastController.cs który zwraca dane pogodowe do składnika projektu Client "FetchData".
• Projekt "Shared" zawiera klasę prognozy pogody, WeatherForecast.cs która reprezentuje dane pogodowe dla projektów "Client" i "Server".

Blazor WebAssembly

Blazor WebAssembly szablon projektu: blazorwasm

Szablon Blazor WebAssembly tworzy początkowe pliki i strukturę katalogów dla Blazor WebAssembly aplikacji. Aplikacja jest wypełniana kodem demonstracyjnym FetchData dla składnika, który ładuje dane ze statycznego zasobu, weather.jsonoraz interakcję użytkownika z składnikiem Counter .

• Pages folder: zawiera składniki routingu BlazorRazor 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.
  • FetchData component (FetchData.razor): implementuje stronę Pobierania danych.
  • Index component (Index.razor): implementuje Home stronę.

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

• Shared folder: zawiera następujące składniki udostępnione:

  • MainLayoutcomponent (MainLayout.razor): składnik 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.
  • SurveyPrompt składnik (SurveyPrompt.razor): Blazor składnik ankiety.

• 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. 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 app elementu DOM (<app>Loading...</app>).

• _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.

• 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 app element DOM (<app>Loading...</app> w wwwroot/index.html) do kolekcji składników 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.

Blazor WebAssembly Hostowane rozwiązanie obejmuje następujące projekty ASP.NET Core:

• "Client": Blazor WebAssembly Aplikacja.
• "Server": Aplikacja, która obsługuje Blazor WebAssembly dane dotyczące aplikacji i pogody dla klientów.
• "Shared": Projekt, który obsługuje typowe klasy, metody i zasoby.

Rozwiązanie jest generowane na podstawie Blazor WebAssembly szablonu projektu w programie Visual Studio z zaznaczonym polem wyboru ASP.NET Core Hosted lub z -ho|--hosted opcją przy użyciu polecenia interfejsu wiersza polecenia platformy dotnet new blazorwasm .NET. Aby uzyskać więcej informacji, zobacz Tooling for ASP.NET Core Blazor.

Struktura projektu aplikacji po stronie klienta w hostowanym Blazor rozwiązaniu Webassembly ("Client" projektu) jest taka sama jak struktura projektu dla autonomicznej Blazor WebAssembly aplikacji. Dodatkowe pliki w rozwiązaniu hostowanym Blazor WebAssembly :

• Projekt "Server" zawiera kontroler prognozy pogody, Controllers/WeatherForecastController.cs który zwraca dane pogodowe do składnika projektu Client "FetchData".
• Projekt "Shared" zawiera klasę prognozy pogody, WeatherForecast.cs która reprezentuje dane pogodowe dla projektów "Client" i "Server".

Skrypt Blazor jest obsługiwany jako statyczny zasób internetowy z automatyczną kompresją i odciskiem palca. Aby uzyskać więcej informacji, zobacz ASP.NET Core Blazor plików statycznych.

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

<script src="@Assets["_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>

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>

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

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

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

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

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

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

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

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

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

<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>

Po opublikowaniu aplikacji symbol zastępczy {fingerprint} zostanie automatycznie zastąpiony unikatowym skrótem w celu przełamania pamięci podręcznej.

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

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

Blazor Server W aplikacji <head> i <body> zawartość znajduje się w Pages/_Host.cshtml pliku.

Blazor Server W aplikacji <head> i <body> zawartość znajduje się w Pages/_Layout.cshtml pliku.

Blazor Server W aplikacji <head> i <body> zawartość znajduje się w Pages/_Host.cshtml pliku.

Podwójna Blazor Server/Blazor WebAssembly aplikacja

Aby utworzyć aplikację, która może działać jako Blazor Server aplikacja lub Blazor WebAssembly aplikacja, jednym z podejść jest umieszczenie całej logiki i składników aplikacji w Razor bibliotece klas (RCL) i odwołowanie się do listy RCL z oddzielnych Blazor Server i Blazor WebAssembly projektów. W przypadku typowych usług, których implementacje różnią się w zależności od modelu hostingu, zdefiniuj interfejsy usług na liście RCL i zaimplementuj usługi w Blazor Server projektach i Blazor WebAssembly .

• Narzędzia dla platformy ASP.NET Core Blazor
• Modele hostingu ASP.NET Core Blazor
• Omówienie interfejsów API
• Blazor przykłady repozytoriów GitHub (dotnet/blazor-samples) (jak pobrać)

• Narzędzia dla platformy ASP.NET Core Blazor
• Modele hostingu ASP.NET Core Blazor
• Blazor przykłady repozytoriów GitHub (dotnet/blazor-samples) (jak pobrać)