Anterior

Siguientes

Componentes de Razor

Completado

Ahora que ha configurado el entorno de desarrollo, vamos a explorar la estructura de un proyecto de Blazor y a aprender cómo funcionan los componentes Blazor.

Página principal

La página principal de la aplicación se define mediante el archivo Home.razor ubicado dentro del directorio Components/Pages. Home.razor contiene el código siguiente:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

La directiva @page de la parte superior especifica la ruta de esta página, de modo que el componente Home se muestre cuando el usuario navega a la raíz de la aplicación. La etiqueta PageTitle es un componente Blazor que define el título de la página actual para que aparezca en la pestaña del explorador. El resto del archivo es HTML normal que define el contenido de la página.

¿Qué es Razor?

Razor es una sintaxis de marcado basada en HTML y C#. Un archivo Razor (.razor) contiene HTML sin formato y luego C# para definir cualquier lógica de representación, como para condicionales, flujo de control y evaluación de expresiones. A continuación, los archivos Razor se compilan en clases C# que encapsulan la lógica de representación del componente.

¿Cuáles son los componentes de Razor?

Si explora los archivos en el proyecto Blazor, puede ver que la mayoría de los archivos que componen el proyecto son archivos .razor. En Blazor, un archivo Razor define un componente reutilizable que constituye una parte de la interfaz de usuario de la aplicación. Los componentes definen qué HTML se va a representar y cómo controlar eventos de usuario.

En tiempo de compilación, cada componente de Razor se integra en una clase C#. La clase puede incluir 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. Dado que los componentes Blazor creados en Razor son solo clases C#, puede usar código .NET arbitrario de los componentes.

Utilizar componentes

Para usar un componente de otro componente, agregue una etiqueta de estilo HTML con un nombre que coincida con el nombre del componente. Por ejemplo, si tiene un componente denominado MyButton.razor, puede agregar un componente MyButton a otro componente agregando una etiqueta <MyButton />.

Parámetros del componente

Los componentes también pueden tener parámetros, lo que le permite pasar datos al componente cuando se usa. Los parámetros de componente se definen agregando una propiedad C# pública al componente que también tiene un atributo [Parameter]. A continuación, puede especificar un valor para un parámetro de componente mediante un atributo de estilo HTML que coincida con el nombre de la propiedad. El valor del parámetro puede ser cualquier expresión C#.

El bloque @code

El bloque @code en un archivo Razor se usa para agregar miembros de clase C# (campos, propiedades y métodos) a un componente. Puede usar @code para realizar un seguimiento del estado del componente, agregar parámetros de componente, implementar eventos de ciclo de vida del componente y definir controladores de eventos.

Prueba del contador

En la aplicación en ejecución, para ir a la página Contador haga clic en 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"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<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. La directiva @rendermode habilita la representación interactiva del servidor para el componente, de modo que pueda controlar los eventos de la interfaz de usuario desde el explorador.

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

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

Continuar