Partilhar via

ASP.NET Core Estrutura do projeto Blazor

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.

Advertência

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e .NET Core. Para a versão atual, consulte a versão .NET 9 deste artigo.

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

Blazor Web App

Blazor Web App modelo de projeto: blazor

O modelo de projeto Blazor Web App fornece um único ponto de partida para o uso de componentes Razor (.razor) para criar qualquer estilo de interface do usuário da Web, tanto renderizada do lado do servidor quanto renderizada do lado do cliente. Ele combina os pontos fortes de e Blazor Server com renderização do lado do servidor e do lado do cliente, renderização de streaming, navegação aprimorada e manipulação de formulários, e a capacidade de Blazor WebAssembly adicionar interatividade usando uma ou Blazor ServerBlazor WebAssembly por componente.

Se a renderização do lado do cliente (CSR) e a renderização interativa do lado do servidor (SSR interativo) forem 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 SSR interativo enquanto o pacote e o runtime da aplicação .NET são baixados para o navegador. Depois que o tempo de execução do .NET WebAssembly for ativado, a renderização alternará para CSR.

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

A estrutura de pastas do componente do projeto .Client difere da estrutura de pastas do projeto principal do Blazor Web Appporque o projeto principal é um projeto padrão ASP.NET Core. O projeto principal deve levar em conta outros recursos para projetos ASP.NET Core que não estão relacionados com Blazor. Você é bem-vindo para usar qualquer estrutura de pasta de componente que desejar 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 esses ativos, como arquivos de layout, se você mover componentes para pastas diferentes das usadas pelo modelo de projeto.

Mais informações sobre componentes do ASP.NET Core e modos de renderização do ASP.NET Core podem ser encontradas nos artigos Razor e Blazor.

Com base no modo de renderização interativo selecionado na criação do aplicativo, a pasta Layout está 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.
  • A MainLayout.razor.css é a folha de estilo colocada (ao lado do componente) para o layout principal do aplicativo.
  • O componente NavMenu (NavMenu.razor) implementa a navegação na barra lateral. O componente inclui componentes NavLink (NavLink), que renderizam links de navegação para outros componentes Razor. O componente NavLink indica ao usuário qual componente é exibido no momento.
  • A NavMenu.razor.css é a folha de estilo associada para o menu de navegação da aplicação.
  • O componente ReconnectModal reflete o estado da conexão do lado do servidor na interface do utilizador e é incluído quando o modo de renderização interativo da aplicação é Servidor Interativo ou Automático Interativo. Para mais informações, consulte orientações do ASP.NET CoreBlazorSignalR.
  • O ReconnectModal.razor.css é a folha de estilo associada ao componente ReconnectModal.
  • O ReconnectModal.razor.js é o arquivo JavaScript colocado para o ReconnectModal componente.
  • O componente MainLayout (MainLayout.razor) é o componente de layout do aplicativo.
  • A MainLayout.razor.css é a folha de estilo colocada (ao lado do componente) para o layout principal do aplicativo.
  • O componente NavMenu (NavMenu.razor) implementa a navegação na barra lateral. O componente inclui componentes NavLink (NavLink), que renderizam links de navegação para outros componentes Razor. O componente NavLink indica ao usuário qual componente é exibido no momento.
  • A NavMenu.razor.css é a folha de estilo associada para o menu de navegação da aplicação.

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 interceta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

A pasta Components do projeto de servidor contém os componentes de 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 de servidor contém os componentes de Razor do lado do servidor roteáveis do aplicativo. A rota para cada página é especificada usando a diretiva @page.

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

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

A pasta Properties do projeto de servidor conté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 de perfil facilita a transição da adoção de HTTPS para usuários de Linux e macOS. Se você 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.

A pasta wwwroot do projeto de servidor é a pasta Web Root para o projeto de servidor que contém os ativos estáticos públicos do aplicativo.

O arquivo Program.cs do projeto de servidor é o ponto de entrada do projeto que configura o anfitrião da aplicação web ASP.NET Core e contém a lógica de inicialização da aplicação, incluindo registros de serviço, configuração, logging e pipeline de processamento de solicitações.

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

No projeto .Client

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

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

  • O arquivo é o ponto de entrada do projeto que configura o host do WebAssembly e contém a lógica de inicialização do projeto, 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 Blazor Web App quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

Blazor Server

Blazor Server modelos de projeto: blazorserver, blazorserver-empty

Os modelos Blazor Server criam os arquivos iniciais e a estrutura de diretórios 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 do tempo (WeatherForecastService) e interação do usuário com um componente Counter.
    • Bootstrap kit de ferramentas de frontend.
  • Se o modelo blazorserver-empty for usado, o aplicativo será criado sem código de demonstração e Bootstrap.

Estrutura do projeto:

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

  • Pages pasta: contém os componentes de Blazor roteáveis da aplicação Razor (.razor) e a página de Razor raiz de uma aplicação Blazor Server. A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

    • _Host.cshtml: A página raiz da aplicação implementada como uma Página de Razor:
      • Quando qualquer página do aplicativo é solicitada inicialmente, essa página é renderizada e retornada na resposta.
      • A página do anfitrião especifica onde o componente raiz App (App.razor) é renderizado.
    • O componente Counter (Counter.razor): Implementa a página Contador.
    • Error componente (Error.razor): É exibido quando ocorre uma exceção sem tratamento na aplicação.
    • FetchData componente (FetchData.razor): Implementa a página Obter dados.
    • O componente Index (Index.razor) implementa a página Home.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.json.

  • Shared pasta: Contém os seguintes componentes compartilhados e folhas de estilo:

    • componente (): O componente de layoutdo aplicativo .
    • MainLayout.razor.css: Folha de estilo para o layout principal do aplicativo.
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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 estilo para o menu de navegação do aplicativo.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente de inquérito.

  • wwwroot pasta: A pasta Web Root para o aplicativo que contém os ativos estáticos públicos do aplicativo.

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

  • appsettings.json e arquivos de configurações ambientais da aplicação: fornecem definições de configuração para a aplicação.

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

    • Especifica os serviços de injeção de dependência (DI) do aplicativo . Os serviços são adicionados chamando AddServerSideBlazor, e o WeatherForecastService é adicionado ao contentor de serviço para uso pelo componente de exemplo FetchData.
    • Configura o pipeline de tratamento de solicitações do aplicativo:
      • MapBlazorHub é chamado para configurar um endpoint 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 aos 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 Blazor Server quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

Blazor Server modelo de projeto: blazorserver

O modelo Blazor Server cria os arquivos iniciais e a estrutura de diretórios 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, WeatherForecastServicee interação do usuário com um componente Counter.

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

  • Pages pasta: contém os componentes de Blazor roteáveis da aplicação Razor (.razor) e a página de Razor raiz de uma aplicação Blazor Server. A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

    • _Host.cshtml: A página raiz da aplicação implementada como uma Página de Razor:
      • Quando qualquer página do aplicativo é solicitada inicialmente, essa página é renderizada e retornada na resposta.
      • A página do anfitrião especifica onde o componente raiz App (App.razor) é renderizado.
    • _Layout.cshtml: A página de layout para a página raiz _Host.cshtml da aplicação.
    • O componente Counter (Counter.razor): Implementa a página Contador.
    • Error componente (Error.razor): É exibido quando ocorre uma exceção sem tratamento na aplicação.
    • FetchData componente (FetchData.razor): Implementa a página Obter dados.
    • O componente Index (Index.razor) implementa a página Home.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.json.

  • Shared pasta: Contém os seguintes componentes compartilhados e folhas de estilo:

    • componente (): O componente de layoutdo aplicativo .
    • MainLayout.razor.css: Folha de estilo para o layout principal do aplicativo.
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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 estilo para o menu de navegação do aplicativo.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente de inquérito.

  • wwwroot pasta: A pasta Web Root para o aplicativo que contém os ativos estáticos públicos do aplicativo.

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

  • appsettings.json e arquivos de configurações ambientais da aplicação: fornecem definições de configuração para a aplicação.

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

    • Especifica os serviços de injeção de dependência (DI) do aplicativo . Os serviços são adicionados chamando AddServerSideBlazor, e o WeatherForecastService é adicionado ao contentor de serviço para uso pelo componente de exemplo FetchData.
    • Configura o pipeline de tratamento de solicitações do aplicativo:
      • MapBlazorHub é chamado para configurar um endpoint 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 aos 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 Blazor Server quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

Blazor Server modelo de projeto: blazorserver

O modelo Blazor Server cria os arquivos iniciais e a estrutura de diretórios 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, WeatherForecastServicee interação do usuário com um componente Counter.

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

  • Pages pasta: contém os componentes de Blazor roteáveis da aplicação Razor (.razor) e a página de Razor raiz de uma aplicação Blazor Server. A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

    • _Host.cshtml: A página raiz da aplicação implementada como uma Página de Razor:
      • Quando qualquer página do aplicativo é solicitada inicialmente, essa página é renderizada e retornada na resposta.
      • A página do anfitrião especifica onde o componente raiz App (App.razor) é renderizado.
    • O componente Counter (Counter.razor): Implementa a página Contador.
    • Error componente (Error.razor): É exibido quando ocorre uma exceção sem tratamento na aplicação.
    • FetchData componente (FetchData.razor): Implementa a página Obter dados.
    • O componente Index (Index.razor) implementa a página Home.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.json.

  • Shared pasta: Contém os seguintes componentes compartilhados e folhas de estilo:

    • componente (): O componente de layoutdo aplicativo .
    • MainLayout.razor.css: Folha de estilo para o layout principal do aplicativo.
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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 estilo para o menu de navegação do aplicativo.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente de inquérito.

  • wwwroot pasta: A pasta Web Root para o aplicativo que contém os ativos estáticos públicos do aplicativo.

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

  • appsettings.json e arquivos de configurações ambientais da aplicação: fornecem definições de configuração para a aplicação.

  • Program.cs: O ponto de entrada da aplicação 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:

    • : Configura os serviços de de injeção de dependência (DI) de do aplicativo. Os serviços são adicionados chamando AddServerSideBlazor, e o WeatherForecastService é adicionado ao contentor de serviço para uso pelo componente de exemplo FetchData.
    • Configure: Configura o pipeline de tratamento de solicitações do aplicativo:
      • MapBlazorHub é chamado para configurar um endpoint 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 aos 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 Blazor Server quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

Blazor Server modelo de projeto: blazorserver

O modelo Blazor Server cria os arquivos iniciais e a estrutura de diretórios 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, WeatherForecastServicee interação do usuário com um componente Counter.

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

  • Pages pasta: contém os componentes de Blazor roteáveis da aplicação Razor (.razor) e a página de Razor raiz de uma aplicação Blazor Server. A rota para cada página é especificada usando a diretiva @page. O modelo inclui o seguinte:

    • _Host.cshtml: A página raiz da aplicação implementada como uma Página de Razor:
      • Quando qualquer página do aplicativo é solicitada inicialmente, essa página é renderizada e retornada na resposta.
      • A página do anfitrião especifica onde o componente raiz App (App.razor) é renderizado.
    • O componente Counter (Counter.razor): Implementa a página Contador.
    • Error componente (Error.razor): É exibido quando ocorre uma exceção sem tratamento na aplicação.
    • FetchData componente (FetchData.razor): Implementa a página Obter dados.
    • O componente Index (Index.razor) implementa a página Home.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.json.

  • Shared pasta: Contém os seguintes componentes compartilhados:

    • componente (): O componente de layoutdo aplicativo .
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente de inquérito.

  • wwwroot pasta: A pasta Web Root para o aplicativo que contém os ativos estáticos públicos do aplicativo.

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

  • appsettings.json e arquivos de configurações ambientais da aplicação: fornecem definições de configuração para a aplicação.

  • Program.cs: O ponto de entrada da aplicação 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:

    • : Configura os serviços de de injeção de dependência (DI) de do aplicativo. Os serviços são adicionados chamando AddServerSideBlazor, e o WeatherForecastService é adicionado ao contentor de serviço para uso pelo componente de exemplo FetchData.
    • Configure: Configura o pipeline de tratamento de solicitações do aplicativo:
      • MapBlazorHub é chamado para configurar um endpoint 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 aos 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 Blazor Server quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

Autônomo Blazor WebAssembly

Modelo de projeto Blazor WebAssembly autônomo: 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.
    • Bootstrap kit de ferramentas de frontend.
  • O modelo blazorwasm também pode ser gerado sem páginas de exemplo e estilo.

Estrutura do projeto:

  • Layout Pasta: Contém os seguintes componentes de layout e folhas de estilo:
    • componente (): O componente de layoutdo aplicativo .
    • MainLayout.razor.css: Folha de estilo para o layout principal do aplicativo.
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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 estilo para o menu de navegação do aplicativo.
  • Pages pasta: contém os componentes de Blazor roteáveis do aplicativo Razor (.razor). A rota para cada página é especificada usando a diretiva @page. O modelo inclui os seguintes componentes:
    • O componente Counter (Counter.razor): Implementa a página Contador.
    • O componente Index (Index.razor) implementa a página Home.
    • Weather Componente (Weather.razor): Implementa a Página de Meteorologia.

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta a navegação do navegador e renderiza a página que corresponde ao endereço solicitado.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.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 de perfil facilita a transição da adoção de HTTPS para usuários de Linux e macOS. Se você 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.

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

    • Quando qualquer página do aplicativo é solicitada inicialmente, essa página é renderizada e retornada na resposta.
    • A página especifica onde é renderizado o componente raiz App. O componente é renderizado no local do elemento DOM div com uma 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 do componente raiz (builder.RootComponents.Add<App>("#app")).
    • 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 Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

Blazor WebAssembly

Blazor WebAssembly modelos de projeto: blazorwasm, blazorwasm-empty

Os modelos Blazor WebAssembly criam os arquivos iniciais e a estrutura de diretórios 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.
    • Bootstrap kit de ferramentas de frontend.
  • Se o modelo blazorwasm-empty for usado, o aplicativo será criado sem código de demonstração e Bootstrap.

Estrutura do projeto:

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

    • O componente Counter (Counter.razor): Implementa a página Contador.
    • FetchData componente (FetchData.razor): Implementa a página Obter dados.
    • O componente Index (Index.razor) implementa a página Home.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.json.

  • Shared pasta: Contém os seguintes componentes compartilhados e folhas de estilo:

    • componente (): O componente de layoutdo aplicativo .
    • MainLayout.razor.css: Folha de estilo para o layout principal do aplicativo.
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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 estilo para o menu de navegação do aplicativo.
    • SurveyPrompt componente (SurveyPrompt.razor) (ASP.NET Core no .NET 7 ou anterior): Blazor componente de pesquisa.

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

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

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta 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 do componente raiz (builder.RootComponents.Add<App>("#app")).
    • 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 Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

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

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

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

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

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

Blazor WebAssembly

Blazor WebAssembly modelo de projeto: blazorwasm

O modelo Blazor WebAssembly cria os arquivos iniciais e a estrutura de diretórios 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.jsone interação do usuário com um componente Counter.

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

    • O componente Counter (Counter.razor): Implementa a página Contador.
    • FetchData componente (FetchData.razor): Implementa a página Obter dados.
    • O componente Index (Index.razor) implementa a página Home.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.json.

  • Shared pasta: Contém os seguintes componentes compartilhados e folhas de estilo:

    • componente (): O componente de layoutdo aplicativo .
    • MainLayout.razor.css: Folha de estilo para o layout principal do aplicativo.
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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 estilo para o menu de navegação do aplicativo.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente de inquérito.

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

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

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta 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 do componente raiz (builder.RootComponents.Add<App>("#app")).
    • 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 Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

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

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

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

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

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

Blazor WebAssembly

Blazor WebAssembly modelo de projeto: blazorwasm

O modelo Blazor WebAssembly cria os arquivos iniciais e a estrutura de diretórios 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.jsone interação do usuário com um componente Counter.

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

    • O componente Counter (Counter.razor): Implementa a página Contador.
    • FetchData componente (FetchData.razor): Implementa a página Obter dados.
    • O componente Index (Index.razor) implementa a página Home.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.json.

  • Shared pasta: Contém os seguintes componentes compartilhados e folhas de estilo:

    • componente (): O componente de layoutdo aplicativo .
    • MainLayout.razor.css: Folha de estilo para o layout principal do aplicativo.
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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 estilo para o menu de navegação do aplicativo.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente de inquérito.

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

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

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta 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 do componente raiz (builder.RootComponents.Add<App>("#app")).
    • 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 Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

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

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

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

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

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

Blazor WebAssembly

Blazor WebAssembly modelo de projeto: blazorwasm

O modelo Blazor WebAssembly cria os arquivos iniciais e a estrutura de diretórios 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.jsone interação do usuário com um componente Counter.

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

    • O componente Counter (Counter.razor): Implementa a página Contador.
    • FetchData componente (FetchData.razor): Implementa a página Obter dados.
    • O componente Index (Index.razor) implementa a página Home.

  • Properties pasta: Contém a configuração do ambiente de desenvolvimento no ficheirolaunchSettings.json.

  • Shared pasta: Contém os seguintes componentes compartilhados:

    • componente (): O componente de layoutdo aplicativo .
    • O componente NavMenu (NavMenu.razor): Implementa a navegação na barra lateral. Inclui o componente NavLink (NavLink), que apresenta links de navegação para outros componentes 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.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente de inquérito.

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

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

  • _Imports.razor: Inclui diretivas Razor comuns 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 interceta 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) para a coleção de componentes raiz (builder.RootComponents.Add<App>("app")).
    • 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 Blazor WebAssembly quando opções adicionais são configuradas. Por exemplo, gerar um aplicativo com ASP.NET Core Identity inclui ativos adicionais para recursos de autenticação e autorização.

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

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

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

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

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

Localização do script Blazor

O script Blazor é servido como um ativo web estático com compressão automática e impressão digital. Para mais informações, consulte ASP.NET Core Blazor ficheiros estáticos.

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

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

O script Blazor é servido a partir de um recurso incorporado na estrutura compartilhada do ASP.NET Core.

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>

O script Blazor é servido a partir de um recurso incorporado na estrutura compartilhada do ASP.NET Core.

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

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

O script Blazor é servido a partir de um recurso incorporado na estrutura compartilhada do ASP.NET Core.

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

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

O script Blazor é servido a partir de um recurso incorporado na estrutura compartilhada do ASP.NET Core.

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

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

Para um Blazor Web App ou um Blazor Server aplicativo, o projeto deve conter pelo menos um Razor arquivo de componente (.razor) para incluir automaticamente o Blazor script quando o aplicativo for publicado. Se o projeto não contiver pelo menos um Razor componente, defina a RequiresAspNetWebAssets propriedade MSBuild como true no arquivo de projeto do aplicativo para incluir o Blazor script:

<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

Em um aplicativo Blazor WebAssembly, o conteúdo do script Blazor está localizado no arquivo wwwroot/index.html:

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

Quando o aplicativo é publicado, o espaço reservado {fingerprint} é automaticamente substituído por um hash exclusivo para quebra de cache.

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

Localização dos conteúdos <head> e <body>

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

O conteúdo Blazor Server e <head> de um aplicativo <body> está localizado no ficheiro Pages/_Host.cshtml.

O conteúdo Blazor Server e <head> de um aplicativo <body> está localizado no ficheiro Pages/_Layout.cshtml.

O conteúdo Blazor Server e <head> de um aplicativo <body> está localizado no ficheiro Pages/_Host.cshtml.

O conteúdo Blazor WebAssembly e <head> de um aplicativo <body> está localizado no ficheiro wwwroot/index.html.

Aplicação Dual Blazor Server/Blazor WebAssembly

Para criar um aplicativo que possa ser executado como um aplicativo Blazor Server ou um aplicativo Blazor WebAssembly, uma abordagem é colocar toda a lógica e os componentes do aplicativo em uma biblioteca de classe Razor (RCL) e fazer referência à RCL a partir de projetos Blazor Server e Blazor WebAssembly separados. 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

  • Last updated on