Estrutura do projeto do aplicativo Blazor do ASP.NET Core

Blazor Web App

Modelo de projeto do Blazor Web App: blazor

O modelo de projeto do Blazor Web App fornece um único ponto de partida para usar componentes Razor (.razor) para criar qualquer estilo de IU da Web, tanto renderizado no lado do servidor quanto no lado do cliente. Ele combina os pontos fortes dos modelos de hospedagem Blazor Server e Blazor WebAssembly existentes com renderização do lado do servidor, renderização de streaming, navegação aprimorada e manipulação de formulários e a capacidade de adicionar interatividade usando Blazor Server ou Blazor WebAssembly por componente.

Se a renderização do lado do cliente (CSR) e a renderização interativa do lado do servidor (SSR interativa) forem ambas selecionadas na criação do aplicativo, o modelo de projeto usará o modo de renderização automática interativa. O modo de renderização automática usa inicialmente o SSR interativo enquanto o pacote de aplicativos .NET e o runtime são baixados para o navegador. Depois que o runtime WebAssembly do .NET é ativado, a renderização muda para CSR.

O modelo do Blazor Web App habilita a renderização estática e a renderização interativa do lado do servidor usando um único projeto. Se você também habilitar a renderização do WebAssembly Interativo, o projeto incluirá um projeto de cliente adicional (.Client) para seus componentes baseados no WebAssembly. A saída interna do projeto cliente é baixada para o navegador e executada no cliente. Os componentes que usam os modos de renderização Interativa WebAssembly ou Interativa Automática devem estar localizados no projeto .Client.

A estrutura da pasta de componentes do projeto .Client difere da estrutura principal da pasta do projeto do Blazor Web App porque o projeto principal é um projeto padrão do ASP.NET Core. O projeto principal deve levar em conta outros ativos para projetos do ASP.NET Core que não estão relacionados ao Blazor. Fique à vontade para usar qualquer estrutura de pasta de componente que quiser no projeto .Client. Você é livre para espelhar o layout da pasta de componentes do projeto principal no projeto .Client, se desejar. Observe que os namespaces podem exigir ajustes para ativos como arquivos de layout se você mover componentes para pastas diferentes das que o modelo do projeto usa.

Você encontra mais informações sobre componentes e modos de renderização nos componentes Razor do ASP.NET Core e nos artigos sobre modos de renderização Blazor do ASP.NET Core.

Com base no modo de renderização interativo escolhido na criação do aplicativo, a pasta Layout estará no projeto do servidor na pasta Components ou na raiz do projeto .Client. A pasta contém os seguintes componentes de layout e folhas de estilo:

• O componente MainLayout (MainLayout.razor) é o componente de layout do aplicativo.
• O MainLayout.razor.css é a folha de estilos do layout principal do aplicativo.
• O componente NavMenu (NavMenu.razor) implementa a navegação na barra lateral. O componente inclui o componente NavLink (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica ao usuário qual componente é exibido no momento.
• O NavMenu.razor.css É a folha de estilos do menu de navegação do aplicativo.

O componente Routes (Routes.razor) está no projeto do servidor ou no projeto .Client e configura o roteamento usando o componente Router. Para componentes interativos do lado do cliente, o componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

A pasta Components do projeto do servidor contém os componentes Razor do lado do servidor do aplicativo. Os componentes compartilhados geralmente são colocados na raiz da pasta Components, enquanto os componentes de layout e página geralmente são colocados em pastas dentro da pasta Components.

A pasta Components/Pages do projeto do servidor contém os componentes Razor do servidor roteável do aplicativo. A rota para cada página é especificada usando a diretiva @page.

O componente do App (App.razor) é o componente raiz do aplicativo com a marcação <head> HTML, o componente Routes e a tag Blazor<script>. O componente raiz é o primeiro componente que o aplicativo carrega.

Um arquivo _Imports.razor em cada um dos servidores e nos projetos .Client inclui diretivas Razor comuns para componentes Razor de qualquer um dos projetos, como diretivas @using para namespaces.

A pasta Properties do projeto do servidor mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

A pasta wwwroot do projeto do servidor é a pasta raiz da Web do projeto do servidor que contém os ativos estáticos públicos do aplicativo.

O arquivo Program.cs do projeto do servidor é o ponto de entrada do projeto que configura o host do aplicativo Web do ASP.NET Core e contém a lógica de inicialização do aplicativo, incluindo registros de serviço, configuração, registro em log e pipeline de processamento de solicitação:

• Os serviços para componentes Razor são adicionados chamando AddRazorComponents. AddInteractiveServerComponents adiciona serviços para dar suporte à renderização de componentes do Servidor Interativo. AddInteractiveWebAssemblyComponents adiciona serviços para dar suporte à renderização de componentes do WebAssembly Interativo.
• MapRazorComponents descobre os componentes disponíveis e especifica o componente raiz do aplicativo, que por padrão é o componente App (App.razor). AddInteractiveServerRenderMode configura a renderização interativa do lado do servidor (SSR interativa) para o aplicativo. AddInteractiveWebAssemblyRenderMode configura o modo de renderização interativa WebAssembly para o aplicativo.

Os arquivos de configurações do aplicativo (appsettings.Development.json, appsettings.json) no servidor ou no projeto .Client fornecem as configurações. No projeto do servidor, os arquivos de configurações estão na raiz do projeto. No projeto .Client, os arquivos de configurações são consumidos na pasta raiz da Web, wwwroot.

No projeto .Client:

• A pasta Pages contém os componentes Razor roteáveis do lado do cliente. A rota para cada página é especificada usando a diretiva @page.

• A pasta wwwroot é a pasta raiz da Web do projeto .Client que contém os ativos estáticos públicos do aplicativo.

• O arquivo Program.cs é o ponto de entrada do projeto que configura o host do WebAssembly e contém a lógica de inicialização do aplicativo, incluindo registros de serviço, configuração, registro em log e pipeline de processamento de solicitação.

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor Web App quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Blazor Server

Modelos de projeto do Blazor Server: blazorserver, blazorserver-empty

Os modelos do Blazor Server criam os arquivos iniciais e a estrutura de diretório para um aplicativo Blazor Server:

• Se o modelo blazorserver for usado, o aplicativo será preenchido com o seguinte:
  • Código de demonstração para um componente FetchData que carrega dados de um serviço de previsão de tempo (WeatherForecastService) e interação do usuário com um componente Counter.
  • Kit de ferramentas de front-end de Inicialização.
• Se o modelo blazorserver-empty for usado, o aplicativo será criado sem código de demonstração e inicialização.

Estrutura do projeto:

• Pasta Data: contém a classe WeatherForecast e a implementação WeatherForecastService, que fornece dados meteorológicos de exemplo para o componente do aplicativo FetchData.

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor e a página Razor raiz de um aplicativo Blazor Server. A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

  • _Host.cshtml: a página raiz do aplicativo implementada como uma Razor Page:
    • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
    • A página Host especifica onde o componente raiz App (App.razor) é renderizado.
  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente Error (Error.razor): renderizado quando ocorre uma exceção sem tratamento no aplicativo.
  • Componente FetchData (FetchData.razor): implementa a página Buscar dados.
  • Componente Index (Index.razor): implementa a página Home.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

• Pasta Shared: contém os seguintes componentes compartilhados e folhas de estilos:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • MainLayout.razor.css: folha de estilos para o layout principal do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • NavMenu.razor.css: folha de estilos para o menu de navegação do aplicativo.
  • Componente SurveyPrompt (SurveyPrompt.razor): componente de pesquisa do Blazor.

• Pasta wwwroot: a pasta Raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo.

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• appsettings.json e arquivos de configuração de aplicativos ambientais: fornecem definições de configuração para o aplicativo.

• Program.cs: o ponto de entrada do aplicativo que configura o host do ASP.NET Core e contém a lógica de inicialização do aplicativo, incluindo registros de serviço e configuração do pipeline de processamento de solicitações:

  • Especifica os serviços de DI (injeção de dependência) do aplicativo. Os serviços são adicionados chamando AddServerSideBlazor, e o WeatherForecastService é adicionado ao contêiner de serviço para uso pelo componente FetchData de exemplo.
  • Configura o pipeline de tratamento de solicitações do aplicativo:
    • MapBlazorHub é chamado para configurar um ponto de extremidade para a conexão em tempo real com o navegador. A conexão é criada com SignalR, que é uma estrutura para adicionar funcionalidade da Web em tempo real a aplicativos.
    • MapFallbackToPage("/_Host") é chamado para configurar a página raiz do aplicativo (Pages/_Host.cshtml) e habilitar a navegação.

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor Server quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Modelo de projeto do Blazor Server: blazorserver

O modelo do Blazor Server cria os arquivos iniciais e a estrutura de diretório para um aplicativo Blazor Server. O aplicativo é preenchido com código de demonstração para um componente FetchData, que carrega dados de um serviço registrado, WeatherForecastService e interação do usuário com um componente Counter.

• Pasta Data: contém a classe WeatherForecast e a implementação WeatherForecastService, que fornece dados meteorológicos de exemplo para o componente do aplicativo FetchData.

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor e a página Razor raiz de um aplicativo Blazor Server. A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

  • _Host.cshtml: a página raiz do aplicativo implementada como uma Razor Page:
    • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
    • A página Host especifica onde o componente raiz App (App.razor) é renderizado.
  • _Layout.cshtml: a página de layout da página raiz _Host.cshtml do aplicativo.
  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente Error (Error.razor): renderizado quando ocorre uma exceção sem tratamento no aplicativo.
  • Componente FetchData (FetchData.razor): implementa a página Buscar dados.
  • Componente Index (Index.razor): implementa a página Home.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

• Pasta Shared: contém os seguintes componentes compartilhados e folhas de estilos:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • MainLayout.razor.css: folha de estilos para o layout principal do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • NavMenu.razor.css: folha de estilos para o menu de navegação do aplicativo.
  • Componente SurveyPrompt (SurveyPrompt.razor): componente de pesquisa do Blazor.

• Pasta wwwroot: a pasta Raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo.

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• appsettings.json e arquivos de configuração de aplicativos ambientais: fornecem definições de configuração para o aplicativo.

• Program.cs: o ponto de entrada do aplicativo que configura o host do ASP.NET Core e contém a lógica de inicialização do aplicativo, incluindo registros de serviço e configuração do pipeline de processamento de solicitações:

  • Especifica os serviços de DI (injeção de dependência) do aplicativo. Os serviços são adicionados chamando AddServerSideBlazor, e o WeatherForecastService é adicionado ao contêiner de serviço para uso pelo componente FetchData de exemplo.
  • Configura o pipeline de tratamento de solicitações do aplicativo:
    • MapBlazorHub é chamado para configurar um ponto de extremidade para a conexão em tempo real com o navegador. A conexão é criada com SignalR, que é uma estrutura para adicionar funcionalidade da Web em tempo real a aplicativos.
    • MapFallbackToPage("/_Host") é chamado para configurar a página raiz do aplicativo (Pages/_Host.cshtml) e habilitar a navegação.

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor Server quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Modelo de projeto do Blazor Server: blazorserver

O modelo do Blazor Server cria os arquivos iniciais e a estrutura de diretório para um aplicativo Blazor Server. O aplicativo é preenchido com código de demonstração para um componente FetchData, que carrega dados de um serviço registrado, WeatherForecastService e interação do usuário com um componente Counter.

• Pasta Data: contém a classe WeatherForecast e a implementação WeatherForecastService, que fornece dados meteorológicos de exemplo para o componente do aplicativo FetchData.

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor e a página Razor raiz de um aplicativo Blazor Server. A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

  • _Host.cshtml: a página raiz do aplicativo implementada como uma Razor Page:
    • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
    • A página Host especifica onde o componente raiz App (App.razor) é renderizado.
  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente Error (Error.razor): renderizado quando ocorre uma exceção sem tratamento no aplicativo.
  • Componente FetchData (FetchData.razor): implementa a página Buscar dados.
  • Componente Index (Index.razor): implementa a página Home.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

• Pasta Shared: contém os seguintes componentes compartilhados e folhas de estilos:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • MainLayout.razor.css: folha de estilos para o layout principal do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • NavMenu.razor.css: folha de estilos para o menu de navegação do aplicativo.
  • Componente SurveyPrompt (SurveyPrompt.razor): componente de pesquisa do Blazor.

• Pasta wwwroot: a pasta Raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo.

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• appsettings.json e arquivos de configuração de aplicativos ambientais: fornecem definições de configuração para o aplicativo.

• Program.cs: o ponto de entrada do aplicativo que configura o host do ASP.NET Core.

• Startup.cs: contém a lógica de inicialização do aplicativo. A classe Startup define dois métodos:

  • ConfigureServices: configura os serviços de DI (injeção de dependência). Os serviços são adicionados chamando AddServerSideBlazor, e o WeatherForecastService é adicionado ao contêiner de serviço para uso pelo componente FetchData de exemplo.
  • Configure: configura o pipeline de tratamento de solicitações do aplicativo:
    • MapBlazorHub é chamado para configurar um ponto de extremidade para a conexão em tempo real com o navegador. A conexão é criada com SignalR, que é uma estrutura para adicionar funcionalidade da Web em tempo real a aplicativos.
    • MapFallbackToPage("/_Host") é chamado para configurar a página raiz do aplicativo (Pages/_Host.cshtml) e habilitar a navegação.

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor Server quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Modelo de projeto do Blazor Server: blazorserver

O modelo do Blazor Server cria os arquivos iniciais e a estrutura de diretório para um aplicativo Blazor Server. O aplicativo é preenchido com código de demonstração para um componente FetchData, que carrega dados de um serviço registrado, WeatherForecastService e interação do usuário com um componente Counter.

• Pasta Data: contém a classe WeatherForecast e a implementação WeatherForecastService, que fornece dados meteorológicos de exemplo para o componente do aplicativo FetchData.

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor e a página Razor raiz de um aplicativo Blazor Server. A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

  • _Host.cshtml: a página raiz do aplicativo implementada como uma Razor Page:
    • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
    • A página Host especifica onde o componente raiz App (App.razor) é renderizado.
  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente Error (Error.razor): renderizado quando ocorre uma exceção sem tratamento no aplicativo.
  • Componente FetchData (FetchData.razor): implementa a página Buscar dados.
  • Componente Index (Index.razor): implementa a página Home.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

• Pasta Shared: contém os seguintes componentes compartilhados:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • Componente SurveyPrompt (SurveyPrompt.razor): componente de pesquisa do Blazor.

• Pasta wwwroot: a pasta Raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo.

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• appsettings.json e arquivos de configuração de aplicativos ambientais: fornecem definições de configuração para o aplicativo.

• Program.cs: o ponto de entrada do aplicativo que configura o host do ASP.NET Core.

• Startup.cs: contém a lógica de inicialização do aplicativo. A classe Startup define dois métodos:

  • ConfigureServices: configura os serviços de DI (injeção de dependência). Os serviços são adicionados chamando AddServerSideBlazor, e o WeatherForecastService é adicionado ao contêiner de serviço para uso pelo componente FetchData de exemplo.
  • Configure: configura o pipeline de tratamento de solicitações do aplicativo:
    • MapBlazorHub é chamado para configurar um ponto de extremidade para a conexão em tempo real com o navegador. A conexão é criada com SignalR, que é uma estrutura para adicionar funcionalidade da Web em tempo real a aplicativos.
    • MapFallbackToPage("/_Host") é chamado para configurar a página raiz do aplicativo (Pages/_Host.cshtml) e habilitar a navegação.

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor Server quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Blazor WebAssembly autônomo

Modelo de projeto autônomo Blazor WebAssembly: blazorwasm

O modelo Blazor WebAssembly cria os arquivos iniciais e a estrutura de diretórios para um aplicativo Blazor WebAssembly autônomo:

• Se o modelo blazorwasm for usado, o aplicativo será preenchido com o seguinte:
  • Código de demonstração para um componente Weather, que carrega dados de um ativo estático (weather.json) e interação do usuário com um componente Counter.
  • Kit de ferramentas de front-end de Inicialização.
• O modelo blazorwasm também pode ser gerado sem páginas de exemplo e estilo.

Estrutura do projeto:

• Pasta Layout: contém os seguintes componentes de layout e folhas de estilo:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • MainLayout.razor.css: folha de estilos para o layout principal do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • NavMenu.razor.css: folha de estilos para o menu de navegação do aplicativo.

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor. A rota para cada página é especificada usando a diretiva @page. O modelo inclui os Componentes:componentes a seguir:

  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente Index (Index.razor): implementa a página Home.
  • Componente Weather (Weather.razor): implementa a página do Clima.

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

  Observação

  O perfil http precede o perfil https no arquivo launchSettings.json. Quando um aplicativo é executado com a CLI do .NET, o aplicativo é executado em um ponto de extremidade HTTP porque o primeiro perfil encontrado é http. A ordem do perfil facilita a transição da adoção do HTTPS para usuários do Linux e do macOS. Se preferir iniciar o aplicativo com a CLI do .NET sem ter que passar a opção -lp https ou --launch-profile https para o comando dotnet watch (ou dotnet run), basta colocar o perfil https acima do perfil http no arquivo.

• Pasta wwwroot: A pasta raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo, incluindo appsettings.json e arquivos de configurações do aplicativo ambiental para asdefinições de configuração e dados de amostra do clima (sample-data/weather.json). A página da Web index.html é a página raiz do aplicativo implementada como uma página HTML:

  • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
  • A página especifica onde o componente raiz App é renderizado. O componente é renderizado no local do elemento DOM div com um id de app (<div id="app">Loading...</div>).

• Program.cs: o ponto de entrada do aplicativo que configura o host WebAssembly:

  • O componente App é o componente raiz do aplicativo. O componente App é especificado como o elemento DOM div com um id de app (<div id="app">Loading...</div> em wwwroot/index.html) para a coleção de componentes raiz (builder.RootComponents.Add<App>("#app")).
  • Os serviços são adicionados e configurados (por exemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Blazor WebAssembly

Modelos de projeto do Blazor WebAssembly: blazorwasm, blazorwasm-empty

Os modelos do Blazor WebAssembly criam os arquivos iniciais e a estrutura de diretório para um aplicativo Blazor WebAssembly:

• Se o modelo blazorwasm for usado, o aplicativo será preenchido com o seguinte:
  • Código de demonstração para um componente FetchData, que carrega dados de um ativo estático (weather.json) e interação do usuário com um componente Counter.
  • Kit de ferramentas de front-end de Inicialização.
• Se o modelo blazorwasm-empty for usado, o aplicativo será criado sem código de demonstração e inicialização.

Estrutura do projeto:

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor. A rota para cada página é especificada usando a diretiva @page. O modelo inclui os Componentes:componentes a seguir:

  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente FetchData (FetchData.razor): implementa a página Buscar dados.
  • Componente Index (Index.razor): implementa a página Home.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

• Pasta Shared: contém os seguintes componentes compartilhados e folhas de estilos:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • MainLayout.razor.css: folha de estilos para o layout principal do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • NavMenu.razor.css: folha de estilos para o menu de navegação do aplicativo.
  • Componente SurveyPrompt (SurveyPrompt.razor) (ASP.NET Core no .NET 7 ou anterior): componente de pesquisa Blazor.

• Pasta wwwroot: a pasta Raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo, incluindo appsettings.json e arquivos de configuração de aplicativos ambientais para as configurações. A página da Web index.html é a página raiz do aplicativo implementada como uma página HTML:

  • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
  • A página especifica onde o componente raiz App é renderizado. O componente é renderizado no local do elemento DOM div com um id de app (<div id="app">Loading...</div>).

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• Program.cs: o ponto de entrada do aplicativo que configura o host WebAssembly:

  • O componente App é o componente raiz do aplicativo. O componente App é especificado como o elemento DOM div com um id de app (<div id="app">Loading...</div> em wwwroot/index.html) para a coleção de componentes raiz (builder.RootComponents.Add<App>("#app")).
  • Os serviços são adicionados e configurados (por exemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Uma solução hospedada do Blazor WebAssembly inclui os seguintes projetos do ASP.NET Core:

• "Client": o aplicativo Blazor WebAssembly.
• "Server": um aplicativo que atende o aplicativo Blazor WebAssembly e os dados meteorológicos aos clientes.
• "Shared": um projeto que mantém classes, métodos e recursos comuns.

A solução é gerada a partir do modelo de projeto do Blazor WebAssembly no Visual Studio com a caixa de seleção ASP.NET Core Hospedado selecionada ou com a opção -ho|--hosted usando o comando dotnet new blazorwasm da CLI do .NET. Para obter mais informações, confira Ferramentas para ASP.NET Core Blazor.

A estrutura do projeto do aplicativo do lado do cliente em uma solução hospedada no Blazor WebAssembly (projeto "Client") é a mesma que a estrutura do projeto para um aplicativo autônomo Blazor WebAssembly. Arquivos adicionais em uma solução hospedada no Blazor WebAssembly:

• O projeto "Server" inclui um controlador de previsão do tempo em Controllers/WeatherForecastController.cs que retorna dados meteorológicos para o componenteFetchData do projeto “Client”.
• O projeto "Shared" inclui uma classe de previsão do tempo em WeatherForecast.cs, que representa os dados meteorológicos para os projetos "Client" e "Server".

Blazor WebAssembly

Modelo de projeto do Blazor WebAssembly: blazorwasm

O modelo do Blazor WebAssembly cria os arquivos iniciais e a estrutura de diretório para um aplicativo Blazor WebAssembly. O aplicativo é preenchido com código de demonstração para um componente FetchData, que carrega dados de um ativo estático, weather.json e interação do usuário com um componente Counter.

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor. A rota para cada página é especificada usando a diretiva @page. O modelo inclui os Componentes:componentes a seguir:

  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente FetchData (FetchData.razor): implementa a página Buscar dados.
  • Componente Index (Index.razor): implementa a página Home.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

• Pasta Shared: contém os seguintes componentes compartilhados e folhas de estilos:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • MainLayout.razor.css: folha de estilos para o layout principal do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • NavMenu.razor.css: folha de estilos para o menu de navegação do aplicativo.
  • Componente SurveyPrompt (SurveyPrompt.razor): componente de pesquisa do Blazor.

• Pasta wwwroot: a pasta Raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo, incluindo appsettings.json e arquivos de configuração de aplicativos ambientais para as configurações. A página da Web index.html é a página raiz do aplicativo implementada como uma página HTML:

  • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
  • A página especifica onde o componente raiz App é renderizado. O componente é renderizado no local do elemento DOM div com um id de app (<div id="app">Loading...</div>).

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• Program.cs: o ponto de entrada do aplicativo que configura o host WebAssembly:

  • O componente App é o componente raiz do aplicativo. O componente App é especificado como o elemento DOM div com um id de app (<div id="app">Loading...</div> em wwwroot/index.html) para a coleção de componentes raiz (builder.RootComponents.Add<App>("#app")).
  • Os serviços são adicionados e configurados (por exemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Uma solução hospedada do Blazor WebAssembly inclui os seguintes projetos do ASP.NET Core:

• "Client": o aplicativo Blazor WebAssembly.
• "Server": um aplicativo que atende o aplicativo Blazor WebAssembly e os dados meteorológicos aos clientes.
• "Shared": um projeto que mantém classes, métodos e recursos comuns.

A solução é gerada a partir do modelo de projeto do Blazor WebAssembly no Visual Studio com a caixa de seleção ASP.NET Core Hospedado selecionada ou com a opção -ho|--hosted usando o comando dotnet new blazorwasm da CLI do .NET. Para obter mais informações, confira Ferramentas para ASP.NET Core Blazor.

A estrutura do projeto do aplicativo do lado do cliente em uma solução hospedada no Blazor WebAssembly (projeto "Client") é a mesma que a estrutura do projeto para um aplicativo autônomo Blazor WebAssembly. Arquivos adicionais em uma solução hospedada no Blazor WebAssembly:

• O projeto "Server" inclui um controlador de previsão do tempo em Controllers/WeatherForecastController.cs que retorna dados meteorológicos para o componenteFetchData do projeto “Client”.
• O projeto "Shared" inclui uma classe de previsão do tempo em WeatherForecast.cs, que representa os dados meteorológicos para os projetos "Client" e "Server".

Blazor WebAssembly

Modelo de projeto do Blazor WebAssembly: blazorwasm

O modelo do Blazor WebAssembly cria os arquivos iniciais e a estrutura de diretório para um aplicativo Blazor WebAssembly. O aplicativo é preenchido com código de demonstração para um componente FetchData, que carrega dados de um ativo estático, weather.json e interação do usuário com um componente Counter.

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor. A rota para cada página é especificada usando a diretiva @page. O modelo inclui os Componentes:componentes a seguir:

  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente FetchData (FetchData.razor): implementa a página Buscar dados.
  • Componente Index (Index.razor): implementa a página Home.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

• Pasta Shared: contém os seguintes componentes compartilhados e folhas de estilos:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • MainLayout.razor.css: folha de estilos para o layout principal do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • NavMenu.razor.css: folha de estilos para o menu de navegação do aplicativo.
  • Componente SurveyPrompt (SurveyPrompt.razor): componente de pesquisa do Blazor.

• Pasta wwwroot: a pasta Raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo, incluindo appsettings.json e arquivos de configuração de aplicativos ambientais para as configurações. A página da Web index.html é a página raiz do aplicativo implementada como uma página HTML:

  • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
  • A página especifica onde o componente raiz App é renderizado. O componente é renderizado no local do elemento DOM div com um id de app (<div id="app">Loading...</div>).

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• Program.cs: o ponto de entrada do aplicativo que configura o host WebAssembly:

  • O componente App é o componente raiz do aplicativo. O componente App é especificado como o elemento DOM div com um id de app (<div id="app">Loading...</div> em wwwroot/index.html) para a coleção de componentes raiz (builder.RootComponents.Add<App>("#app")).
  • Os serviços são adicionados e configurados (por exemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Uma solução hospedada do Blazor WebAssembly inclui os seguintes projetos do ASP.NET Core:

• "Client": o aplicativo Blazor WebAssembly.
• "Server": um aplicativo que atende o aplicativo Blazor WebAssembly e os dados meteorológicos aos clientes.
• "Shared": um projeto que mantém classes, métodos e recursos comuns.

A solução é gerada a partir do modelo de projeto do Blazor WebAssembly no Visual Studio com a caixa de seleção ASP.NET Core Hospedado selecionada ou com a opção -ho|--hosted usando o comando dotnet new blazorwasm da CLI do .NET. Para obter mais informações, confira Ferramentas para ASP.NET Core Blazor.

A estrutura do projeto do aplicativo do lado do cliente em uma solução hospedada no Blazor WebAssembly (projeto "Client") é a mesma que a estrutura do projeto para um aplicativo autônomo Blazor WebAssembly. Arquivos adicionais em uma solução hospedada no Blazor WebAssembly:

• O projeto "Server" inclui um controlador de previsão do tempo em Controllers/WeatherForecastController.cs que retorna dados meteorológicos para o componenteFetchData do projeto “Client”.
• O projeto "Shared" inclui uma classe de previsão do tempo em WeatherForecast.cs, que representa os dados meteorológicos para os projetos "Client" e "Server".

Blazor WebAssembly

Modelo de projeto do Blazor WebAssembly: blazorwasm

O modelo do Blazor WebAssembly cria os arquivos iniciais e a estrutura de diretório para um aplicativo Blazor WebAssembly. O aplicativo é preenchido com código de demonstração para um componente FetchData, que carrega dados de um ativo estático, weather.json e interação do usuário com um componente Counter.

• Pasta Pages: contém os componentes Razor (.razor) roteáveis do aplicativo Blazor. A rota para cada página é especificada usando a diretiva @page. O modelo inclui os Componentes:componentes a seguir:

  • Componente Counter (Counter.razor): implementa a página Contador.
  • Componente FetchData (FetchData.razor): implementa a página Buscar dados.
  • Componente Index (Index.razor): implementa a página Home.

• Pasta Properties: mantém a configuração do ambiente de desenvolvimento no arquivo launchSettings.json.

• Pasta Shared: contém os seguintes componentes compartilhados:

  • Componente MainLayout (MainLayout.razor): o componente de layout do aplicativo.
  • Componente NavMenu(NavMenu.razor): implementa a navegação na barra lateral. Inclui o NavLinkcomponente (NavLink), que renderiza links de navegação para outros componentes do Razor. O componente NavLink indica automaticamente um estado selecionado quando seu componente é carregado, o que ajuda o usuário a entender qual componente é exibido no momento.
  • Componente SurveyPrompt (SurveyPrompt.razor): componente de pesquisa do Blazor.

• Pasta wwwroot: a pasta Raiz da Web do aplicativo que contém os ativos estáticos públicos do aplicativo, incluindo appsettings.json e arquivos de configuração de aplicativos ambientais para as configurações. A página da Web index.html é a página raiz do aplicativo implementada como uma página HTML:

  • Quando qualquer página do aplicativo é inicialmente solicitada, ela é renderizada e retornada na resposta.
  • A página especifica onde o componente raiz App é renderizado. O componente é renderizado no local do elemento DOM app (<app>Loading...</app>).

• _Imports.razor: inclui diretivas comuns do Razor a serem incluídas nos componentes do aplicativo (.razor), como diretivas @using para namespaces.

• App.razor: o componente raiz do aplicativo que configura o roteamento do lado do cliente usando o componente Router. O componente Router intercepta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

• Program.cs: o ponto de entrada do aplicativo que configura o host WebAssembly:

  • O componente App é o componente raiz do aplicativo. O componente App é especificado como o elemento DOM app (<app>Loading...</app> em wwwroot/index.html na coleção de componentes raiz (builder.RootComponents.Add<App>("app")).
  • Os serviços são adicionados e configurados (por exemplo, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com a Identity do ASP.NET Core inclui ativos adicionais para recursos de autenticação e autorização.

Uma solução hospedada do Blazor WebAssembly inclui os seguintes projetos do ASP.NET Core:

• "Client": o aplicativo Blazor WebAssembly.
• "Server": um aplicativo que atende o aplicativo Blazor WebAssembly e os dados meteorológicos aos clientes.
• "Shared": um projeto que mantém classes, métodos e recursos comuns.

A solução é gerada a partir do modelo de projeto do Blazor WebAssembly no Visual Studio com a caixa de seleção ASP.NET Core Hospedado selecionada ou com a opção -ho|--hosted usando o comando dotnet new blazorwasm da CLI do .NET. Para obter mais informações, confira Ferramentas para ASP.NET Core Blazor.

A estrutura do projeto do aplicativo do lado do cliente em uma solução hospedada no Blazor WebAssembly (projeto "Client") é a mesma que a estrutura do projeto para um aplicativo autônomo Blazor WebAssembly. Arquivos adicionais em uma solução hospedada no Blazor WebAssembly:

• O projeto "Server" inclui um controlador de previsão do tempo em Controllers/WeatherForecastController.cs que retorna dados meteorológicos para o componenteFetchData do projeto “Client”.
• O projeto "Shared" inclui uma classe de previsão do tempo em WeatherForecast.cs, que representa os dados meteorológicos para os projetos "Client" e "Server".

Em um Blazor Web App, o script Blazor está localizado no arquivo Components/App.razor:

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

Em um aplicativo Blazor Server, o script Blazor está localizado no arquivo Pages/_Host.cshtml:

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

Em um aplicativo Blazor Server, o script Blazor está localizado no arquivo Pages/_Host.cshtml:

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

Em um aplicativo Blazor Server, o script Blazor está localizado no arquivo Pages/_Layout.cshtml:

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

Em um aplicativo Blazor Server, o script Blazor está localizado no arquivo Pages/_Host.cshtml:

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

Em um Blazor Web App, o conteúdo de <head> e <body> está localizado no arquivo Components/App.razor.

Em um aplicativo Blazor Server, o conteúdo de <head> e <body> está localizado no arquivo Pages/_Host.cshtml.

Em um aplicativo Blazor Server, o conteúdo de <head> e <body> está localizado no arquivo Pages/_Layout.cshtml.

Em um aplicativo Blazor Server, o conteúdo <head> e <body> está localizado no arquivo Pages/_Host.cshtml.

Aplicativo Blazor Server/Blazor WebAssembly duplo

Para criar um aplicativo que possa ser executado como um aplicativo Blazor Server ou Blazor WebAssembly, uma abordagem é colocar toda a lógica do aplicativo e componentes em uma RCL (biblioteca de classes) do Razor e referenciar a RCL de projetos do Blazor Server e Blazor WebAssembly separadamente. Para serviços comuns cujas implementações diferem com base no modelo de hospedagem, defina as interfaces de serviço na RCL e implemente os serviços nos projetos Blazor Server e Blazor WebAssembly.

• Ferramentas para ASP.NET Core Blazor
• Modelos de hospedagem do ASP.NET Core Blazor
• Visão geral das APIs mínimas
• Blazor amostras do repositório GitHub (dotnet/blazor-samples) (como baixar)

• Ferramentas para ASP.NET Core Blazor
• Modelos de hospedagem do ASP.NET Core Blazor
• Blazor amostras do repositório GitHub (dotnet/blazor-samples) (como baixar)