Componentes da navalha em Blazor Hybrid

Agora que você tem seu ambiente de desenvolvimento configurado, vamos explorar a estrutura de um projeto Blazor Hybrid e aprender a adicionar novas páginas.

O que é o Razor?

Razor é uma sintaxe de marcação para incorporar código baseado em .NET em páginas da Web. A sintaxe Razor consiste em HTML, C# e sintaxe específica do Razor que normalmente começa com um @ caractere. Os arquivos que contêm Razor geralmente têm uma .cshtml extensão de arquivo (usado no desenvolvimento do lado do servidor com Razor Pages e MVC) ou uma .razor extensão quando usado em arquivos de componentes do Razor. A sintaxe do Razor é semelhante aos mecanismos de modelagem de várias estruturas de aplicativo de página única (SPA) JavaScript, como Angular, React, VueJs e Svelte.

O que são os componentes do Razor?

Um componente Razor define uma parte reutilizável da interface do usuário da Web. Os componentes Blazor são análogos aos componentes React e Angular em estruturas SPA.

Se você explorar o projeto, verá vários componentes do Razor definidos em arquivos .razor.

No tempo de compilação, cada componente do Razor é criado numa classe .NET. A classe inclui elementos comuns de IU, como estado, lógica de composição, métodos de ciclo de vida e processadores de eventos.

Experimente o Contador

No aplicativo em execução, navegue até a página do contador selecionando a guia Contador na barra lateral à esquerda. A seguinte página deve então ser exibida:

Selecione o botão Clique em mim para incrementar a contagem sem uma atualização de página. Incrementar um contador em uma página da Web normalmente requer escrever JavaScript, mas com Blazor você pode usar C#.

Pode encontrar a implementação do componente em Counter.

@page "/counter"

<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++;
    }
}

Uma solicitação para /counter no navegador, tal como especificado pela diretiva @page no topo, faz com que o componente Counter renderize seu conteúdo.

Sempre que selecionar o botão Clique em mim

• O onclick evento é disparado.
• O método IncrementCount é chamado.
• A currentCount variável é incrementada.
• O componente é renderizado para mostrar a contagem atualizada.