Componentes de Razor en Blazor Hybrid

Ahora que tiene configurado el entorno de desarrollo, vamos a explorar la estructura de un proyecto híbrido de Blazor y a aprender a agregar nuevas páginas.

¿Qué es Razor?

Razor es una sintaxis de marcado para insertar código basado en .NET en páginas web. La sintaxis de Razor consta de una sintaxis específica de HTML, C# y Razor que, por lo general, comienza con un carácter @. Los archivos que contienen Razor generalmente tienen una .cshtml extensión de archivo (que se usa en el desarrollo del lado servidor con Razor Pages y MVC) o una .razor extensión cuando se usan en archivos de componentes de Razor . La sintaxis de Razor es similar a los motores de plantillas de varios marcos de aplicación de página única (SPA) de JavaScript, como Angular, React, VueJs y Svelte.

¿Cuáles son los componentes de Razor?

Un componente de Razor define una parte reutilizable de la UI web. Los componentes de Blazor son análogos a los componentes de React y Angular en marcos de SPA.

Si explora el proyecto, verá varios componentes de Razor definidos en archivos .razor.

En tiempo de compilación, cada componente de Razor se integra en una clase de .NET. La clase incluye elementos de interfaz de usuario comunes como el estado, la lógica de representación, los métodos de ciclo de vida y los controladores de eventos.

Prueba del contador

En la aplicación en ejecución, vaya a la página contador seleccionando la pestaña Contador en la barra lateral de la izquierda. A continuación, se debe mostrar la página siguiente:

Seleccione el botón Hacer clic en mí para incrementar el recuento sin una actualización de página. Para incrementar un contador en una página web normalmente es necesario escribir JavaScript, pero con Blazor se puede usar C#.

Puede encontrar la implementación del Counter componente en Components/Pages/Counter.razor.

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

Una solicitud de /counter en el explorador, tal y como se especifica en la directiva de @page en la parte superior, hace que el componente Counter represente su contenido.

Cada vez que seleccione el botón Hacer clic en mí :

• Se desencadena el evento onclick.
• Se llama al método IncrementCount .
• La variable currentCount se incrementa.
• Se representa el componente para mostrar el recuento actualizado.