Componentes de Razor en Blazor Hybrid

Completado

Ahora que ha configurado el entorno de desarrollo, explorará la estructura de un proyecto de Blazor Hybrid y aprenderá a agregar páginas nuevas.

¿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 suelen tener una extensión de archivo .cshtml (que se usa en el desarrollo del lado servidor con Razor Pages y MVC) o una extensión .razor cuando se usa 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 de contador. Para hacerlo, seleccione la pestaña Contador de la barra lateral de la izquierda. A continuación, se debe mostrar la página siguiente:

Seleccione el botón Click me (Hacer clic aquí) para aumentar el contador 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 componente Counter 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 aquí:

• 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.