Criar uma interface de usuário com componentes Blazor

Concluído

Os componentes Blazor permitem definir páginas da Web ou partes de HTML que incluem conteúdo dinâmico usando o código .NET. No Blazor, você pode formular conteúdo dinâmico usando C#, em vez de usar JavaScript.

Suponha que você esteja trabalhando para uma empresa de entrega de pizza para criar um novo site moderno. Você está começando com uma página de boas-vindas que se tornará a página de destino para a maioria dos usuários do site. Você quer exibir ofertas especiais e pizzas populares nessa página.

Nesta unidade, você aprende a criar componentes no Blazor e escrever código que renderiza conteúdo dinâmico nesses componentes.

Compreender os componentes do Blazor

Blazor é uma estrutura que os desenvolvedores podem usar para criar uma interface de usuário (UI) interativa avançada escrevendo código C#. Com Blazor, você pode usar a mesma linguagem para todo o seu código, tanto do lado do servidor quanto do lado do cliente. Você pode renderizá-lo para exibição em muitos navegadores diferentes, incluindo navegadores em dispositivos móveis.

Note

Existem dois modelos de hospedagem para código em aplicativos Blazor:

• Blazor Server: Neste modelo, o aplicativo é executado no servidor web dentro de um aplicativo ASP.NET Core. No lado do cliente, atualizações da interface do usuário, eventos e chamadas JavaScript são enviados por meio de uma conexão SignalR entre o cliente e o servidor. Neste módulo, discutimos e codificamos este modelo.
• Blazor WebAssembly: Neste modelo, o aplicativo Blazor, suas dependências e o tempo de execução do .NET são baixados e executados no navegador.

No Blazor, você cria a interface do usuário a partir de partes independentes do código chamadas componentes . Cada componente pode conter uma mistura de código HTML e C#. Os componentes são escritos usando a sintaxe Razor, na qual o código é marcado com a @code diretiva. Outras diretivas podem ser usadas para acessar variáveis, vincular a valores e realizar outras tarefas de renderização. Quando o aplicativo é compilado, o HTML e o código são compilados em uma classe de componente. Os componentes são escritos como arquivos com uma .razor extensão.

Note

A sintaxe Razor é usada para incorporar código .NET em páginas da Web. Você pode usá-lo em aplicações MVC (Model-View-Controller) do ASP.NET, onde os ficheiros têm a extensão .cshtml. A sintaxe Razor é usada em Blazor para escrever componentes. Em vez disso, esses componentes têm a .razor extensão e não há separação estrita entre controladores e visualizações.

Aqui está um exemplo simples de um componente Blazor:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

Neste exemplo, o código define o valor de uma variável de cadeia de caracteres, chamada welcomeMessage. Essa variável é renderizada dentro de <p> tags no HTML. Examinaremos exemplos mais complexos mais adiante nesta unidade.

Criar componentes Blazor

Quando você cria um aplicativo Blazor usando o blazor modelo na interface de linha de comando (CLI) dotnet , vários componentes são incluídos por padrão:

dotnet new blazor -o BlazingPizzaSite

Os componentes padrão incluem a página inicial do Index.razor e o componente de demonstração do Counter.razor . Ambos os componentes são colocados na pasta Páginas . Você pode modificar essas exibições para atender às suas necessidades ou excluí-las e substituí-las por novos componentes.

Para adicionar um novo componente a um aplicativo Web existente, use este comando:

dotnet new razorcomponent -n PizzaBrowser -o Pages

• A opção -n especifica o nome do componente a ser adicionado. Este exemplo adiciona um novo arquivo chamado PizzaBrowser.razor.
• A -o opção especifica a pasta que você deseja conter o novo componente.

Important

O nome de um componente Blazor deve começar com um caractere maiúsculo.

Depois de criar o componente, você pode abri-lo para ser editado com o Visual Studio Code:

code Pages/PizzaBrowser

Escrever código em um componente Blazor

Ao criar uma interface do usuário no Blazor, você mistura marcação estática HTML e CSS com código C#, geralmente no mesmo arquivo. Para diferenciar esses tipos de código, use a sintaxe Razor. A sintaxe Razor inclui diretivas, prefixadas com o símbolo @, que delimitam o código C#, parâmetros de roteamento, dados acoplados, classes importadas e outros recursos.

Vamos considerar este componente de exemplo novamente:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

Você pode reconhecer a marcação HTML com <h1> e <p> tags. Essa marcação é a estrutura estática da página, na qual seu código insere conteúdo dinâmico. A marcação Razor consiste em:

• A @page diretiva: Esta diretiva fornece um modelo de rota para Blazor. No tempo de execução, Blazor localiza uma página para renderizar, combinando esse modelo com a URL que o usuário solicitou. Nesse caso, ele pode corresponder a uma URL do formulário http://yourdomain.com/index.
• A @code diretiva: Esta diretiva declara que o texto do bloco a seguir é o código C#. Você pode colocar quantos blocos de código precisar em um componente. Você pode definir membros da classe de componente nesses blocos de código e definir seus valores a partir de cálculo, operações de pesquisa de dados ou outras fontes. Nesse caso, o código define um único membro do componente chamado welcomeMessage e define seu valor de cadeia de caracteres.
• Diretivas de acesso de membro: se você quiser incluir o valor de um membro em sua lógica de renderização, use o @ símbolo seguido por uma expressão C#, como o nome do membro. Nesse caso, a diretiva @welcomeMessage é usada para renderizar o valor do membro welcomeMessage nas tags <p>.