Ler em inglês

Partilhar via


ASP.NET Core Blazor

Nota

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

Aviso

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.

Importante

Estas informações referem-se a um produto de pré-lançamento que pode ser substancialmente modificado antes de ser lançado comercialmente. A Microsoft não oferece garantias, expressas ou implícitas, em relação às informações fornecidas aqui.

Para a versão atual, consulte a versão .NET 9 deste artigo.

Bem-vindo ao Blazor!

Blazor é um .NET frontend web framework que suporta renderização do lado do servidor e interatividade do cliente em um único modelo de programação:

Blazor é uma estrutura para desenvolver interfaces de usuário web interativas do lado do cliente com .NET:

  • Crie interfaces de usuário interativas avançadas usando C#.
  • Partilhe a lógica da aplicação do lado do servidor e do lado do cliente escrita em .NET.
  • Renderize a interface do usuário como HTML e CSS para amplo suporte a navegadores, incluindo navegadores móveis.
  • Crie aplicativos móveis e de área de trabalho híbridos com .NET e Blazor.
  • Crie interfaces de usuário interativas avançadas usando C#.
  • Partilhe a lógica da aplicação do lado do servidor e do lado do cliente escrita em .NET.
  • Renderize a interface do usuário como HTML e CSS para amplo suporte a navegadores, incluindo navegadores móveis.

Usar o .NET para desenvolvimento web do lado do cliente oferece as seguintes vantagens:

  • Escreva código em C#, o que pode melhorar a produtividade no desenvolvimento e manutenção de aplicativos.
  • Tire partido do ecossistema .NET existente de bibliotecas .NET.
  • Beneficie do desempenho, fiabilidade e segurança do .NET.
  • Mantenha-se produtivo no Windows, Linux ou macOS com um ambiente de desenvolvimento, como Visual Studio ou Visual Studio Code. Integre com plataformas de hospedagem modernas, como Docker.
  • Desenvolva um conjunto comum de linguagens, estruturas e ferramentas que são estáveis, ricas em recursos e fáceis de usar.

Nota

Para um tutorial de início rápido Blazor, consulte Criar a sua primeira aplicação Blazor.

Componentes

Blazor aplicativos são baseados em componentes . Um componente no Blazor é um elemento da interface do usuário, como uma página, caixa de diálogo ou formulário de entrada de dados.

Os componentes são classes C# .NET incorporadas em assemblies .NET que:

  • Defina uma lógica de renderização flexível da interface do usuário.
  • Manipular eventos do usuário.
  • Pode ser aninhado e reutilizado.
  • Pode ser partilhado e distribuído como Razor bibliotecas de classes ou pacotes NuGet.

A classe de componente é geralmente escrita na forma de uma página de marcação Razor com uma extensão de arquivo .razor. Os componentes em Blazor são formalmente referidos como componentes Razor, informalmente como componentes Blazor. Razor é uma sintaxe para combinar marcação HTML com código C# projetado para produtividade do desenvolvedor. Razor permite alternar entre marcação HTML e C# no mesmo ficheiro, com suporte de programação IntelliSense no Visual Studio.

Blazor usa tags HTML naturais para a composição da interface do usuário. A marcação Razor a seguir demonstra um componente que incrementa um contador quando o usuário seleciona um botão.

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Os componentes são renderizados em uma representação na memória do DOM (Document Object Model) do navegador chamada de árvore de renderização , que é usada para atualizar a interface do usuário de forma flexível e eficiente.

Crie uma aplicação web full-stack com Blazor

Blazor Web Apps fornecem uma arquitetura baseada em componentes com renderização do lado do servidor e interatividade total do lado do cliente em uma única solução, onde você pode alternar entre os modos de renderização do lado do servidor e do lado do cliente e até mesmo misturá-los na mesma página.

Blazor Web Apps pode rapidamente entregar a interface do utilizador para o navegador ao renderizar estaticamente o conteúdo HTML do servidor em resposta a solicitações. A página é carregada rapidamente porque a renderização da interface do usuário é executada rapidamente no servidor sem a necessidade de baixar um grande pacote JavaScript. Blazor também pode melhorar ainda mais a experiência do usuário com vários aprimoramentos progressivos na renderização do servidor, como navegação aprimorada com postagens de formulário e renderização de streaming de conteúdo gerado de forma assíncrona.

Blazor suporta renderização interativa do lado do servidor (SSR interativo), onde as interações da UI são geridas pelo servidor através de uma conexão em tempo real com o navegador. O SSR interativo permite uma experiência de usuário rica como seria de esperar de um aplicativo cliente, mas sem a necessidade de criar pontos de extremidade de API para acessar os recursos do servidor. O conteúdo da página para páginas interativas é pré-renderizado, onde o conteúdo no servidor é inicialmente gerado e enviado para o cliente sem habilitar manipuladores de eventos para controles renderizados. O servidor emite a interface do usuário HTML da página o mais rápido possível em resposta à solicitação inicial, o que faz com que o aplicativo se sinta mais responsivo aos usuários.

Blazor Web Appsuporta a interatividade com renderização do lado do cliente (CSR) que depende do tempo de execução .NET criado com WebAssembly que pode ser descarregado com a sua aplicação. Ao executar Blazor no WebAssembly, seu código .NET pode acessar todas as funcionalidades do navegador e interoperar com JavaScript. Seu código .NET é executado na área restrita de segurança do navegador com as proteções que a área restrita fornece contra ações maliciosas na máquina cliente.

Blazor aplicações podem ser executadas inteiramente no WebAssembly no navegador sem o envolvimento de um servidor. Para um aplicativo Blazor WebAssembly autônomo, os ativos são implantados como arquivos estáticos em um servidor Web ou serviço capaz de fornecer conteúdo estático aos clientes. Uma vez baixados, os aplicativos Blazor WebAssembly autônomos podem ser armazenados em cache e executados offline como um PWA (Progressive Web App).

Crie um aplicativo cliente nativo com Blazor Hybrid

Blazor Hybrid permite o uso de componentes Razor em um aplicativo cliente nativo com uma mistura de tecnologias nativas e da Web para plataformas Web, móveis e de desktop. O código é executado nativamente no processo .NET e processa a interface do usuário da Web para um controle de Web View incorporado usando um canal de interoperabilidade local. WebAssembly não é usado em aplicativos híbridos. Os aplicativos híbridos são criados com .NET Multi-platform App UI (.NET MAUI), que é uma estrutura multiplataforma para criar aplicativos móveis e de desktop nativos com C# e XAML.

O Blazor Hybrid oferece suporte a Windows Presentation Foundation (WPF) e Windows Forms para fazer a transição de aplicativos de tecnologia anterior para .NET MAUI.

Blazor Server

Blazor Server fornece suporte para hospedar componentes Razor no servidor em um aplicativo ASP.NET Core. As atualizações da interface do usuário são tratadas em uma conexão SignalR.

O runtime fica no servidor e gerencia:

  • Executando o código C# do aplicativo.
  • Envio de eventos da interface do usuário do navegador para o servidor.
  • Aplicação de atualizações da interface do usuário a um componente renderizado que é enviado de volta pelo servidor.

A conexão usada por Blazor Server para se comunicar com o navegador também é usada para lidar com chamadas de interoperabilidade JavaScript.

Blazor Server executa código .NET no servidor e interage com o Document Object Model no cliente através de uma conexão SignalR

Blazor Server apps renderizam conteúdo de forma diferente dos modelos tradicionais para renderizar a interface do usuário em apps ASP.NET Core usando views Razor ou Páginas Razor. Ambos os modelos usam a linguagem Razor para descrever o conteúdo HTML para renderização, mas diferem significativamente em como marcação é renderizada.

Quando uma página ou exibição de Razor é renderizada, cada linha de código Razor emite HTML em forma de texto. Após a renderização, o servidor descarta a instância da página ou vista, incluindo qualquer estado que tenha sido gerado. Quando ocorre outra solicitação para a página, a página inteira é reprocessada para HTML novamente e enviada para o cliente.

Blazor Server produz um gráfico de componentes para exibição semelhante a um HTML ou XML DOM. O gráfico de componentes inclui o estado mantido em propriedades e campos. Blazor avalia o gráfico de componentes para produzir uma representação binária da marcação, que é enviada ao cliente para renderização. Depois que a conexão é feita entre o cliente e o servidor, os elementos estáticos pré-renderizados do componente são substituídos por elementos interativos. A pré-renderização de conteúdo no servidor para carregar conteúdo HTML no cliente rapidamente faz com que o aplicativo se sinta mais responsivo ao cliente.

Depois que os componentes são interativos no cliente, as atualizações da interface do usuário são acionadas pela interação do usuário e eventos do aplicativo. Quando ocorre uma atualização, o gráfico do componente é rerenderizado e um UI diff (diferença) é calculado. Esse diff é o menor conjunto de edições DOM necessário para atualizar a interface do usuário no cliente. O diff é enviado para o cliente em um formato binário e aplicado pelo navegador.

Um componente é descartado depois que o usuário navega para longe do componente.

Blazor WebAssembly

Blazor WebAssembly é uma estrutura de aplicativo de página única (SPA) para criar aplicativos Web interativos do lado do cliente com .NET.

A execução de código .NET dentro de navegadores da Web é possível graças ao WebAssembly (abreviado wasm). WebAssembly é um formato de bytecode compacto otimizado para download rápido e velocidade máxima de execução. WebAssembly é um padrão web aberto e suportado em navegadores web sem plugins. WebAssembly funciona em todos os navegadores modernos, incluindo navegadores móveis.

O código WebAssembly pode acessar todas as funcionalidades do navegador via JavaScript, chamado de interoperabilidade JavaScript, muitas vezes abreviado para de interoperabilidade JavaScript ou JS interoperabilidade. O código .NET executado via WebAssembly no navegador é executado na sandbox JavaScript do navegador com as proteções que a sandbox fornece contra ações maliciosas na máquina cliente.

Blazor WebAssembly executa o código .NET no navegador com WebAssembly.

Quando um aplicativo Blazor WebAssembly é criado e executado:

  • Os arquivos de código C# e Razor são compilados em assemblies .NET.
  • Os assemblies e o de tempo de execução do .NET são baixados para o navegador.
  • Blazor WebAssembly inicializa o tempo de execução do .NET WebAssembly e configura o tempo de execução para carregar os assemblies da aplicação. O runtime usa integração de JavaScript para lidar com a manipulação do DOM e as chamadas de API do navegador.

O tamanho do aplicativo publicado, seu tamanho de carga útil , é um fator de desempenho crítico para a usabilidade de um aplicativo. Um aplicativo grande leva um tempo relativamente longo para ser baixado para um navegador, o que diminui a experiência do usuário. Blazor WebAssembly otimiza o tamanho da carga útil para reduzir os tempos de download:

  • O código não utilizado é removido da aplicação quando é publicada pelo Trimmer da Linguagem Intermediária (IL) .
  • As respostas HTTP são compactadas.
  • O tempo de execução e os assemblies do .NET são armazenados em cache no navegador.

Blazor Hybrid

Os aplicativos híbridos usam uma mistura de tecnologias nativas e da Web. Um aplicativo Blazor Hybrid usa Blazor em um aplicativo cliente nativo. Razor componentes são executados nativamente no processo .NET e renderizam a interface web para um controle incorporado Web View usando um canal de interoperabilidade local. WebAssembly não é usado em aplicativos híbridos. Os aplicativos híbridos englobam as seguintes tecnologias:

  • .NET Multi-platform App UI (.NET MAUI): Uma estrutura multiplataforma para criar aplicativos móveis e de desktop nativos com C# e XAML.
  • Windows Presentation Foundation (WPF): uma estrutura de interface do usuário que é independente de resolução e usa um mecanismo de renderização baseado em vetor, criado para tirar proveito do hardware gráfico moderno.
  • Windows Forms: uma estrutura de interface do usuário que cria aplicativos cliente de área de trabalho avançados para Windows. A plataforma de desenvolvimento Windows Forms oferece suporte a um amplo conjunto de recursos de desenvolvimento de aplicativos, incluindo controles, gráficos, vinculação de dados e entrada do usuário.

Interoperabilidade JavaScript

Para aplicativos que exigem bibliotecas JavaScript de terceiros e acesso a APIs do navegador, os componentes interoperam com JavaScript. Os componentes são capazes de usar qualquer biblioteca ou API que o JavaScript possa usar. O código C# pode chamar para o código JavaScripte o código JavaScript pode chamar para o código C#.

Compartilhamento de código e .NET Standard

Blazor implementa o .NET Standard, que permite que Blazor projetos façam referência a bibliotecas que estejam em conformidade com as especificações do .NET Standard. O .NET Standard é uma especificação formal de APIs do .NET que são comuns em implementações do .NET. As bibliotecas de classes do .NET Standard podem ser compartilhadas entre diferentes plataformas .NET, como Blazor, .NET Framework, .NET Core, .NET Multi-platform App UI (.NET MAUI), Mono e Unity.

APIs que não são aplicáveis dentro de um navegador da Web (por exemplo, acessar o sistema de arquivos, abrir um soquete e threading) lançam um PlatformNotSupportedException.

Próximos passos