Estrutura do projeto do aplicativo Blazor do ASP.NET Core

  • Artigo

Observação

Esta não é a versão mais recente deste artigo. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Importante

Essas informações relacionam-se ao produto de pré-lançamento, que poderá ser substancialmente modificado antes do lançamento comercial. A Microsoft não oferece nenhuma garantia, explícita ou implícita, quanto às informações fornecidas aqui.

Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Este artigo descreve os arquivos e pastas que compõem um aplicativo Blazor gerado a partir de um modelo de projeto do Blazor.

Aplicativo Web Blazor

Modelo de projeto do Aplicativo Web Blazor: blazor

O Blazormodelo de projeto Web App fornece um único ponto de partida para o uso de componentes Razor para criar qualquer estilo de UI 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.

Por padrão, o modelo do Aplicativo Web Blazor 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.

Para obter mais informações, consulte ASP.NET Core Blazor modos de renderização.

  • Projeto do servidor:

    • Pasta Components:

      • 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 ao usuário 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 de Razor do servidor roteável do aplicativo (.razor). A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

        • Componente Counter (Counter.razor): implementa a página Contador.
        • Componente Error (Error.razor): implementa a página Erro.
        • Componente Home (Home.razor): implementa a página Home.
        • Componente Weather (Weather.razor): implementa a página Previsão do tempo.

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

      • Componente Routes (Routes.razor): 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.

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

    • 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 run, basta colocar o perfil https acima do perfil http no arquivo.

    • Pasta wwwroot: a pasta raiz da Web para o projeto do servidor que contém os ativos estáticos públicos do aplicativo.

    • Arquivo Program.cs: o ponto de entrada do projeto do servidor que configura o hostdo 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.

    • Arquivos de configurações do aplicativo (appsettings.Development.json, appsettings.json): forneça configurações para o projeto do servidor.

  • Projeto do cliente (.Client):

    • Pasta Pages: contém os componentes Razor no lado do cliente roteável do aplicativo (.razor). A rota para cada página é especificada usando a diretiva @page. O modelo inclui o componente Counter (Counter.razor) que implementa a página Contador.

      A estrutura da pasta de componentes do projeto .Client difere da estrutura principal da pasta do projeto do aplicativo Web Blazor 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.

      O projeto .Client é puramente um projeto do Blazor e não tem a necessidade de se integrar tanto às especificações e recursos que não sejam do Blazor do ASP.NET Core, portanto, ele usa uma estrutura de pastas de componentes menos complexa. No entanto, você é bem-vindo a usar qualquer estrutura de pasta de componente desejada 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.

    • A pasta Raiz da Web do projeto no lado do cliente que contém os ativos estáticos públicos do aplicativo, incluindo os arquivos de configurações do aplicativo (appsettings.Development.json, appsettings.json) que fornece as configurações do projeto no lado do cliente.

    • Arquivo Program.cs: o ponto de entrada do projeto no lado do cliente que configura o host do WebAssembly e contém a lógica de inicialização do aplicativo, incluindo registros de serviço, registros em log e o pipeline de processamento de solicitações.

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

Arquivos e pastas adicionais podem aparecer em um aplicativo produzido a partir de um modelo de projeto do Aplicativo Web Blazor 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 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".

Localização do script Blazor

O script Blazor é fornecido com base em um recurso inserido na estrutura compartilhada do ASP.NET Core.

Em um aplicativo Web Blazor, 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 aplicativo Blazor WebAssembly, o conteúdo do script Blazor está localizado no arquivo wwwroot/index.html:

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

Localização do conteúdo de <head> e <body>

Em um Aplicativo Web Blazor, os conteúdos <head> e <body> estão localizados no arquivo Components/App.razor.

Em um aplicativo Blazor Server, o conteúdo <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.

Em um aplicativo Blazor WebAssembly, o conteúdo de <head> e <body> está localizado no arquivo wwwroot/index.html.

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.

Recursos adicionais