Componentes en Blazor Server

Introducción

Los componentes son bloques de construcción fundamentales en Blazor que permiten crear interfaces de usuario reutilizables y modulares. En este tutorial, aprenderás sobre los conceptos básicos de los componentes en Blazor y cómo crear y utilizar componentes en una aplicación Blazor Server.

Paso 1: Entendiendo los Componentes en Blazor

En Blazor, un componente es una clase de C# que generalmente está asociada a un archivo Razor (.razor). Un componente puede contener tanto código HTML como C#, y encapsula tanto la lógica como la interfaz de usuario relacionada en una unidad cohesiva. Los componentes pueden ser utilizados en múltiples lugares de una aplicación, lo que promueve la reutilización y la modularidad del código.

Paso 2: Creación de un Componente en Blazor

1. En tu proyecto Blazor Server, navega hasta la carpeta Pages.
2. Crea un nuevo archivo Razor (por ejemplo, MiComponente.razor).
3. Dentro del archivo Razor, define tu componente utilizando la estructura básica de un componente Blazor:

@code {
    // Aquí va el código C# del componente
}

<div>
    <!-- Aquí va el código HTML del componente -->
</div>

Paso 3: Uso de un Componente en una Página

1. Abre una de las páginas existentes en tu proyecto Blazor Server.
2. Agrega una referencia al componente creado en el paso anterior utilizando la etiqueta <MiComponente></MiComponente>.

Paso 4: Pasando Parámetros a un Componente

Los componentes en Blazor pueden aceptar parámetros que les permiten recibir datos desde el componente que los está utilizando. Para pasar un parámetro a un componente, puedes definir propiedades en el componente y luego utilizarlas en su contenido.

// En el componente
@code {
    [Parameter]
    public string Nombre { get; set; }
}

<div>
    Hola, @Nombre
</div>

// En la página que utiliza el componente <MiComponente Nombre=”Usuario”></MiComponente>

Paso 5: Manejo de Eventos en un Componente

Los componentes en Blazor pueden generar eventos que pueden ser manejados por el código C# que los utiliza. Para declarar y manejar eventos en un componente, puedes utilizar el atributo @onclick u otros atributos de eventos HTML.

<button @onclick="MiMetodo">Haz Clic</button>

@code {
    private void MiMetodo()
    {
        // Lógica del evento
    }
}

Conclusiones

Los componentes son una parte fundamental de Blazor que permiten crear interfaces de usuario modulares y reutilizables. En este tutorial, has aprendido cómo crear y utilizar componentes en una aplicación Blazor Server, así como cómo pasar parámetros y manejar eventos en ellos. Los componentes son una herramienta poderosa que te ayudará a organizar y estructurar tu código de manera efectiva, promoviendo la reutilización y la mantenibilidad de tu aplicación.