C# Academy · Lección

Modelo de componentes de Blazor

Cree componentes Razor, comprenda su ciclo de vida y use parámetros y valores en cascada.

Modelo de componentes de Blazor es una lección gratuita de C# Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de C# Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de C# Academy incluye 4 lecciones en total.

¿Qué es Blazor?

Blazor permite crear interfaces web interactivas usando C# en lugar de JavaScript. Los componentes se definen en archivos .razor que combinan marcado HTML y lógica de C#. Blazor se ejecuta en el servidor (Blazor Server) o en el navegador mediante WebAssembly (Blazor WASM).

Su primer componente

Un componente de Razor es un archivo .razor con marcado HTML y un bloque @code para C#. El nombre del componente se convierte en el nombre de su etiqueta HTML.

@* Greeting.razor *@
<h2>Hello, @Name!</h2>
<p>You have @Count messages.</p>

@code {
    [Parameter] public string Name { get; set; } = "World";
    private int Count = 5;
}

Ciclo de vida de los componentes

Los componentes de Blazor tienen un ciclo de vida con métodos que puede sobrescribir. Los más habituales son OnInitializedAsync (carga de datos) y OnParametersSetAsync (respuesta a los cambios de parámetros).

@code {
    private List<Product> Products = new();

    protected override async Task OnInitializedAsync()
    {
        // Called once on first render
        Products = await Http.GetFromJsonAsync<List<Product>>("/api/products")
                   ?? new();
    }

    protected override async Task OnParametersSetAsync()
    {
        // Called whenever parameters change
        await LoadDataAsync();
    }
}

Parámetros: paso de datos a los componentes

Decore las propiedades con [Parameter] para aceptar datos de los componentes principales. Los parámetros se establecen antes de la renderización y pueden desencadenar una nueva renderización cuando cambian.

@* ProductCard.razor *@
<div class="card">
    <h4>@Product.Name</h4>
    <p>Price: @Product.Price.ToString("C")</p>
    <button @onclick="AddToCart">Add to Cart</button>
</div>

@code {
    [Parameter, EditorRequired]
    public Product Product { get; set; } = default!;

    [Parameter]
    public EventCallback<Product> OnAddToCart { get; set; }

    private async Task AddToCart() =>
        await OnAddToCart.InvokeAsync(Product);
}

Parámetros en cascada

Los parámetros en cascada se propagan por el árbol de componentes sin tener que pasarlos explícitamente por cada nivel intermedio; son ideales para temas, información de usuario o estado compartido.

@* App.razor — wraps the whole app *@
<CascadingValue Value="CurrentUser">
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
    </Router>
</CascadingValue>

@* Anywhere in the tree: *@
@code {
    [CascadingParameter]
    public UserInfo CurrentUser { get; set; } = default!;
}

Renderización de listas y condicionales

Use las directivas de Razor @if, @foreach y @for para renderizar contenido dinámico. Proporcione siempre @key en los elementos de las listas para calcular las diferencias de forma eficiente.

@if (Products.Count == 0)
{
    <p>No products found.</p>
}
else
{
    <ul>
        @foreach (var product in Products)
        {
            <li @key="product.Id">
                <ProductCard Product="product" OnAddToCart="HandleAdd" />
            </li>
        }
    </ul>
}

RenderFragment y ChildContent

Use RenderFragment para pasar marcado como parámetro, de forma similar a los slots de Vue o a los elementos hijos de React. El nombre convencional del parámetro es ChildContent.

@* Panel.razor *@
<div class="panel">
    <div class="panel-header">@Title</div>
    <div class="panel-body">@ChildContent</div>
</div>

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

@* Usage: *@
<Panel Title="Order Details">
    <p>Order #42 — Shipped</p>
</Panel>

Referencias a componentes con @ref

Capture una referencia a un componente secundario con @ref para llamar a sus métodos públicos o leer sus propiedades desde el componente principal.

@* Parent.razor *@
<ConfirmDialog @ref="_dialog" OnConfirm="DeleteOrder" />
<button @onclick="() => _dialog!.Show()">Delete Order</button>

@code {
    private ConfirmDialog? _dialog;

    private async Task DeleteOrder()
    {
        await OrderService.DeleteAsync(CurrentOrderId);
        // Refresh UI...
    }
}

StateHasChanged y renderización manual

Blazor vuelve a renderizar automáticamente después de los controladores de eventos. Para cambios de estado asíncronos fuera de los controladores de eventos (por ejemplo, desde un temporizador en segundo plano), llame manualmente a StateHasChanged().

@implements IDisposable

<p>Time: @CurrentTime</p>

@code {
    private string CurrentTime = "";
    private Timer? _timer;

    protected override void OnInitialized()
    {
        _timer = new Timer(_ =>
        {
            CurrentTime = DateTime.Now.ToString("HH:mm:ss");
            InvokeAsync(StateHasChanged); // thread-safe re-render
        }, null, 0, 1000);
    }

    public void Dispose() => _timer?.Dispose();
}

ShouldRender para mejorar el rendimiento

Sobrescriba ShouldRender() para omitir renderizaciones innecesarias. Devuelva false cuando la salida del componente no vaya a cambiar y reduzca así el costo del cálculo de diferencias.

@code {
    private string _lastRenderedStatus = "";

    [Parameter] public string Status { get; set; } = "";

    protected override bool ShouldRender()
    {
        // Only re-render if Status actually changed
        if (Status == _lastRenderedStatus) return false;
        _lastRenderedStatus = Status;
        return true;
    }
}

Caso real: componente de listado de productos

Un componente completo de listado de productos que carga datos durante la inicialización, gestiona el estado de carga y pasa eventos al componente principal.

@inject HttpClient Http

@if (_loading)
{
    <p>Loading products...</p>
}
else
{
    @foreach (var p in _products)
    {
        <ProductCard Product="p" OnAddToCart="AddToCart" />
    }
}

@code {
    private List<Product> _products = new();
    private bool _loading = true;

    [Parameter] public EventCallback<Product> OnCartUpdated { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _products = await Http.GetFromJsonAsync<List<Product>>("/api/products")
                   ?? new();
        _loading = false;
    }

    private async Task AddToCart(Product p) => await OnCartUpdated.InvokeAsync(p);
}

Comprobación rápida

¿Qué método del ciclo de vida es el lugar más adecuado para cargar datos de una API cuando se inicializa un componente de Blazor?

Resumen: modelo de componentes de Blazor

Aspectos clave:

Los archivos .razor combinan marcado HTML con C# en un bloque @code
[Parameter] acepta datos del componente principal; EventCallback transmite eventos al componente principal
CascadingParameter propaga datos hacia abajo sin tener que pasar propiedades por cada nivel
RenderFragment/ChildContent permite crear componentes componibles basados en slots
OnInitializedAsync permite cargar los datos iniciales; StateHasChanged permite renderizar manualmente
ShouldRender() omite cálculos de diferencias innecesarios para mejorar el rendimiento

Preguntas frecuentes

¿La lección «Modelo de componentes de Blazor» es gratis?

Sí — el texto completo de «Modelo de componentes de Blazor» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de C# Academy, actualiza a CoddyKit PRO. El curso de C# Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Modelo de componentes de Blazor»?

Cree componentes Razor, comprenda su ciclo de vida y use parámetros y valores en cascada. Practicas C# Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar C# Academy?

No se requiere experiencia previa. C# Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Modelo de componentes de Blazor»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de C# Academy?

Sí. Cada lección de C# Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a C# Academy