Skip to main content
csharp blazor

Blazor ha cautivado mi atención

Autor: Reynaldo Navedo

Publicado: Actualizado:

Durante los últimos meses he estado aprendiendo .Net con C# y decidí con la ayuda de Inteligencia Artificial compartir este articulo para introducir a C# con Blazor. Ayúdame a entender que no es uno detallado, sin embargo, quería presentarle los conceptos generales de este maravilloso framework que ha cautivado mi atención.


¿Qué es Blazor Server?

Blazor Server es una plataforma de desarrollo de aplicaciones web interactivas basada en C# y Razor, lo que permite a los desarrolladores crear aplicaciones utilizando C# en lugar de JavaScript. En un modelo de Blazor Server, la lógica y renderizado de la UI se ejecutan en el servidor, enviándose actualizaciones de interfaz hacia el cliente a través de SignalR.


Pasos para crear una aplicación Blazor Server

  1. Instalación de .NET SDK
  2. Para crear una aplicación Blazor, debes tener instalado el SDK de .NET. Puedes descargarlo desde el sitio oficial de Microsoft.
  3. Crear un nuevo proyecto de Blazor Server
  4. Usa el siguiente comando en la terminal para crear una nueva aplicación de Blazor Server:
dotnet new blazorserver -o MiBlazorApp
  1. Una vez creado el proyecto, cambia al directorio del proyecto:
cd MiBlazorApp
  1. Estructura del Proyecto
  2. Al crear un proyecto de Blazor Server, verás la siguiente estructura básica:
  • Pages/: Contiene las páginas de la aplicación.
  • Shared/: Contiene componentes reutilizables (por ejemplo, el menú de navegación).
  • wwwroot/: Contiene activos estáticos como imágenes, archivos CSS o JavaScript.
  • App.razor: Es el punto de entrada donde está configurado el enrutador.
  1. El archivo _Host.cshtml
  2. En Pages/_Host.cshtml, se configurará el layout principal que actúa como punto de entrada para la aplicación. La entrada principal del Blazor Server se ve como sigue:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Title</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>


Ejemplo de Páginas

Páginas (Pages)

En Blazor, las páginas son componentes con un directiva de enrutamiento @page en la parte superior que define la URL de la página.

Vamos a ver un ejemplo de una página llamada Counter.razor:

@page "/counter"

<h3>Contador</h3>

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

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

@code {
    private int currentCount = 0;

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

Explicación:

  • @page "/counter": Define la URL en la cual esta página estará disponible.
  • @code { }: Contiene la lógica en C# del componente.
  • @onclick: Este evento llama a la función IncrementCount cada vez que se presiona el botón.


Otro ejemplo: Fetch data

@page "/fetchdata"

@inject HttpClient Http

<h3>Weather forecast</h3>

@if (forecasts == null)
{
    <p><em>Cargando...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
        @foreach (var forecast in forecasts)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.Summary</td>
            </tr>
        }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
}

El componente anterior utiliza HttpClient inyectado para obtener datos JSON desde el servidor y mostrarlos en una tabla.

WeatherForecast Model

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }

    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

    public string? Summary { get; set; }
}


Servicio de Dependencias

Blazor utiliza inyección de dependencias (DI). Un ejemplo clásico es la inyección del servicio HttpClient para realizar llamadas HTTP dentro de los componentes. Esto se configura en Program.cs:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents();
builder.Services.AddHttpClient();

var app = builder.Build();

app.MapBlazorHub();
app.Run();


Ejemplo de Layout

En el directorio Shared/, verás archivos como MainLayout.razor. Este archivo define la estructura básica de la UI.

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="content px-4">
            @Body
        </div>
    </main>
</div>


Ejecutar la aplicación

Después de haber creado tus componentes y configurado tu página App.razor, puedes ejecutar la aplicación con:

dotnet run

Luego, abre tu navegador en https://localhost:5001, y deberías ver tu aplicación Blazor Server funcionando.


Conclusión

Blazor Server permite crear aplicaciones web completas usando C#, Razor y .NET. En esta guía básica, cubrimos lo esencial de la estructura de una aplicación Blazor Server, cómo crear páginas con C# y Razor, y cómo aprovechar eventos y servicios de inyección.

Comparte este contenido