Criar uma interface do usuário com componentes Blazor

Concluído

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

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

Nesta unidade, você aprenderá a criar componentes no Blazor e escrever códigos que renderizam conteúdo dinâmico nesses componentes.

Entender os componentes Blazor

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

Observação

Há dois modelos de hospedagem de código em aplicativos Blazor:

• Blazor Server: neste modelo, o aplicativo é executado no servidor Web dentro de um aplicativo ASP.NET Core. Atualizações de interface do usuário, eventos e chamadas JavaScript no lado do cliente são enviados por meio de uma conexão de SignalR entre o cliente e o servidor. Neste módulo, vamos discutir e codificar para esse modelo.
• Blazor WebAssembly: neste modelo, o aplicativo Blazor, suas dependências e o runtime do .NET são baixados e executados no navegador.

No Blazor, você compila a interface do usuário de partes autocontidas de código chamadas componentes. Cada componente pode conter uma combinação de código HTML e C#. Os componentes são escritos usando a sintaxe Razor, em que o código é marcado com a diretiva @code. Outras diretivas podem ser usadas para acessar variáveis, se 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 gravados como arquivos com uma extensão .razor.

Observação

A sintaxe Razor é usada para inserir código .NET em páginas da Web. Você pode usá-la em aplicativos MVC ASP.NET, em que os arquivos têm uma extensão .cshtml. A sintaxe Razor é usada no Blazor para gravar componentes. Em vez disso, esses componentes têm a extensão .razor e não há nenhuma separação estrita entre controladores e exibições.

Veja 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!";
}

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

Criar componentes do Blazor

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

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

Os componentes padrão incluem a página inicial Index.razor e o componente de demonstração 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 -f net6.0

• A opção -n especifica o nome do componente a ser adicionado. Esse exemplo adiciona um novo arquivo chamado PizzaBrowser.razor.
• A opção -o especifica a pasta que conterá o novo componente.
• A opção -f força o aplicativo a ser compilado com a versão de estrutura do .NET 6.

Importante

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

Depois de criar o componente, você poderá abri-lo para edição no Visual Studio Code:

code Pages/PizzaBrowser

Escrever código em um componente Blazor

Ao compilar uma interface do usuário no Blazor, você misturará a marcação HTML estática 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#, os parâmetros de roteamento, os dados vinculados, as classes importadas e outros recursos.

Vamos considerar esse exemplo de componente 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 as tags <h1> e <p>. Essa marcação é a estrutura estática da página, na qual seu código inserirá o conteúdo dinâmico. A marcação Razor consiste em:

• A diretiva @page: esta diretiva fornece um modelo de rota para o Blazor. Em runtime, o Blazor localiza uma página a ser renderizada por meio da correspondência desse modelo à URL solicitada pelo usuário. Nesse caso, ele pode corresponder a uma URL no formato http://yourdomain.com/index.
• A diretiva @code: esta diretiva declara que o texto no bloco a seguir é um código C#. Você pode colocar quantos blocos de código precisar em um componente. Você pode definir membros de classe de componente nesses blocos de código e definir seus valores de cálculo, operações de pesquisa de dados ou outras fontes. Nesse caso, o código define um único membro de 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>.

Continuar