Cheatsheet Blazor

Blazor WebAssembly (WASM)

Ejecuta C# directamente en el navegador mediante WebAssembly.

Blazor Server

Ejecuta el código en el servidor y envía actualizaciones al navegador en tiempo real a través de SignalR.

Crear un proyecto Blazor WebAssembly

Para crear un proyecto básico de Blazor WebAssembly.

dotnet new blazorwasm -o MiProyectoBlazor

Crear un proyecto Blazor Server

Para crear un proyecto Blazor Server.

dotnet new blazorserver -o MiProyectoBlazorServer

Componentes en Blazor

Los componentes son la unidad fundamental de Blazor. Se escriben en archivos .razor y pueden incluir C#, HTML y Razor.

<h3>Hola, Blazor</h3>

@code {
    string mensaje = "Bienvenido a Blazor";
}

Comunicarse entre componentes

Propiedades y parámetros pueden ser utilizados para comunicar datos entre componentes.

<h3>@Titulo</h3>

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

Para pasar parámetros a un componente:

<ComponentePersonalizado Titulo="Hola Blazor" />

Métodos del ciclo de vida

Blazor proporciona varios métodos de ciclo de vida para controlar la lógica de los componentes:

• OnInitialized() Se ejecuta una vez cuando el componente es inicializado.

• OnParametersSet() Se ejecuta cada vez que se cambian los parámetros.

• OnAfterRender() Se ejecuta después de que el componente ha sido renderizado.

@code {
    protected override void OnInitialized() {
        Console.WriteLine("Componente inicializado");
    }
}

One-way binding

El enlace de datos de una vía se utiliza para mostrar datos en la UI.

<p>@mensaje</p>

@code {
    string mensaje = "Hola desde Blazor";
}

Two-way binding

El enlace de datos bidireccional permite que los cambios en la UI se reflejen en el código y viceversa. Utiliza el atributo @bind.

<input @bind="mensaje" />
<p>@mensaje</p>

@code {
    string mensaje = "Hola Blazor";
}

Eventos comunes

Blazor utiliza el prefijo @ para manejar eventos del navegador, como clics de botones y cambios de texto.

<button @onclick="HandleClick">Click me</button>

@code {
    void HandleClick() {
        Console.WriteLine("Button clicked!");
    }
}

EventCallback

Blazor permite la comunicación de eventos entre componentes padres e hijos con EventCallback.

Componente hijo:

<button @onclick="OnClick">Click me</button>

@code {
    [Parameter]
    public EventCallback OnClick { get; set; }
}

Componente padre:

<ChildComponent OnClick="HandleChildClick" />

@code {
    void HandleChildClick() {
        Console.WriteLine("El botón del componente hijo fue clicado");
    }
}

Renderizado condicional

Blazor permite mostrar o esconder elementos basados en condiciones lógicas.

@if (mostrar) {
    <p>Este es un párrafo condicional</p>
}

Renderizado con bucles

Utiliza @foreach para iterar sobre colecciones y renderizar múltiples elementos.

@foreach (var item in lista) {
    <p>@item</p>
}

@code {
    List<string> lista = new List<string> { "Item 1", "Item 2", "Item 3" };
}

@page

Define una ruta en un componente Razor, convirtiéndolo en una página.

@page "/home"
<h3>Home Page</h3>

@code

Permite escribir bloques de C# dentro de un componente .razor.

@code {
    string mensaje = "Hola Blazor";
}

@inject

Inyecta servicios dentro de los componentes para acceso a dependencias.

@inject ServicioDeTiempo Tiempo
<p>Tiempo actual: @Tiempo.GetHoraActual()</p>

Configuración de rutas

En un componente .razor, puedes definir rutas con @page.

@page "/about"
<h3>About Page</h3>

Navegación programática

Puedes redirigir programáticamente utilizando NavigationManager.

@inject NavigationManager navManager

<button @onclick="NavigateToHome">Ir a Inicio</button>

@code {
    void NavigateToHome() {
        navManager.NavigateTo("/home");
    }
}

Configurar servicios

Blazor soporta inyección de dependencias a través del contenedor de servicios en Program.cs.

builder.Services.AddSingleton<ServicioDeTiempo>();

Inyectar servicios en un componente

Para usar un servicio dentro de un componente, se utiliza @inject.

@inject ServicioDeTiempo Tiempo

<p>La hora es: @Tiempo.GetHoraActual()</p>

@code {
    // lógica adicional
}

Crear un formulario simple

Blazor facilita la creación de formularios con binding bidireccional y eventos de envío.

<EditForm Model="@usuario" OnValidSubmit="HandleSubmit">
    <InputText id="nombre" @bind-Value="usuario.Nombre" />
    <button type="submit">Enviar</button>
</EditForm>

@code {
    Usuario usuario = new Usuario();

    void HandleSubmit() {
        Console.WriteLine("Formulario enviado");
    }
}

Validación de formularios

Blazor incluye soporte para validación utilizando atributos de anotación de datos (DataAnnotations).

public class Usuario {
    [Required]
    public string Nombre { get; set; }
}

Componentes parametrizados

Puedes crear componentes reutilizables pasando parámetros.

<h3>@Titulo</h3>

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

Componentes anidados

Puedes usar componentes dentro de otros componentes:

<ComponenteHijo Titulo="Mi Componente" />

Invocar JavaScript desde Blazor

Blazor permite la interoperabilidad con JavaScript mediante IJSRuntime.

@inject IJSRuntime js

<button @onclick="MostrarAlerta">Mostrar Alerta</button>

@code {
    async Task MostrarAlerta() {
        await js.InvokeVoidAsync("alert", "Hola desde Blazor!");
    }
}

Invocar Blazor desde JavaScript

Puedes llamar a métodos C# desde JavaScript utilizando DotNet.invokeMethodAsync.

DotNet.invokeMethodAsync('NombreAssembly', 'MetodoEnCSharp');

Blazor WebAssembly

Para publicar una aplicación WebAssembly, usa el siguiente comando:

dotnet publish --configuration Release

Blazor Server

Para publicar una aplicación Blazor Server:

dotnet publish --configuration Release --output ./public

Debug en Blazor WebAssembly

Puedes depurar aplicaciones Blazor WASM utilizando las herramientas de desarrollo del navegador y Visual Studio.

Optimización de carga

Utiliza la publicación en modo release para optimizar la carga de la aplicación.

dotnet publish -c Release