Criar uma interface do 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ê deseja exibir ofertas especiais e pizzas populares nessa página.

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

Entender os componentes do Blazor

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

Note

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

• Servidor Blazor: neste modelo, o aplicativo é executado no servidor Web em um aplicativo ASP.NET Core. No lado do cliente, atualizações de interface do usuário, eventos e chamadas JavaScript são enviadas por meio de uma conexão SignalR entre o cliente e o servidor. Neste módulo, discutiremos e codificaremos 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ê cria a interface do usuário com base em partes independentes 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, na qual o código é marcado com a @code diretiva. Outras diretivas podem ser usadas para acessar variáveis, associar a valores e alcançar 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 .razor extensão.

Note

A sintaxe razor é usada para inserir código .NET em páginas da Web. Você pode usá-lo em aplicativos ASP.NET MVC (Model-View-Controller), em que os arquivos têm uma .cshtml extensão. A sintaxe Razor é utilizada no Blazor para escrever componentes. Em vez disso, esses componentes têm a .razor extensão e não há uma separação estrita entre controladores e exibiçõ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 tags <p> no HTML. Examinaremos exemplos mais complexos posteriormente nesta unidade.

Criar componentes do Blazor

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

dotnet new blazor -o BlazingPizzaSite

Os componentes padrão incluem a home page 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

• A -n opção 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 a marcação HTML e CSS estática com o código C#, muitas vezes 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 código C#, parâmetros de roteamento, dados associados, 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> marcas. Essa marcação é a estrutura estática da página, na qual seu código insere conteúdo dinâmico. A marcação do Razor consiste em:

• A diretiva @page: essa diretiva fornece um modelo de rota para o Blazor. Em runtime, o Blazor localiza uma página a ser renderizada correspondendo esse modelo à URL solicitada pelo usuário. Nesse caso, ele pode corresponder a uma URL do formulário http://yourdomain.com/index.
• A @code diretiva: Essa diretiva declara que o texto no bloco a seguir é 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álculos, operações de busca 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>.