Imagen de puzzle

Introducción a los componentes en Blazor

Blazor se basa en componentes, y un componente no es más que una clase de .Net que representa un fragmento independiente de la interfaz de usuario, como puede ser por ejemplo un formulario, que podemos insertar en diferentes partes de nuestro sitio web, y que además, este formulario puede tener a su vez otros componentes.

Los componentes los creamos en archivos .razor, que son archivos que combinan código Html y C#, por ello diferenciamos dos partes principales en un componente, la parte de marcado Html que convive con la sintaxis de razor, es decir, podemos crear condicionales, bucles, etc, que muestren elementos de Html, y la parte de código C# que va en un bloque @code { }.

En esta introducción vamos a ver cómo construir un componente muy sencillo, se trata de un «HeaderComponent» en el que va a mostrar un h1 y un h2, pero el contenido de texto serán variables, ya que la intención será reutilizarlo en diferentes partes de nuestra aplicación.

Los componentes reutilizables como es este caso, los crearemos en la carpeta Shared, a diferencia de los que definen una ruta de navegación, que deberían ir en el directorio «Pages» del proyecto.

Agregar nuevo elemento en Visual Studio 2019

Y simplemente seleccionamos la plantilla de componente Razor.

Agregar Componente Razor en Visual Studio
Agregar Componente Razor en Visual Studio

Es obligatorio que el nombre del componente comience por mayúsculas.

El código de nuestro HeaderComponent es tan sencillo como:

<h1>@Title</h1>
<h2>@SubTitle</h2>

@code {
    [Parameter] public string Title { get; set; }
    [Parameter] public string SubTitle { get; set; }
}

Title y SubTitle se denominan «Parámetros del Componente» y deben ser propiedades públicas. Ahora podemos insertar nuestro componente en el Index.razor que se encuentra en la carpeta Pages, o también lo podríamos hacer en el Counter.razor de la plantilla que viene por defecto al crear el proyecto.

@page "/"

<HeaderComponent Title="Mi Título" SubTitle="Mi Subtitulo"/>
Welcome to your new app.


<SurveyPrompt Title="How is Blazor working for you?" />
@page "/counter"

<HeaderComponent
                 Title="Contador en Blazor"
                 SubTitle="Ejemplo de un contador al pulsar un botón"/>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

En próximas entradas entraremos en más detalles ya que hay mucha miga sobre este tema.

Deja un comentario