Ejercicio Tareas en Blazor

Crear el proyecto Blazor

Blazor Web App · net9.0

En Rider elegí New Solution. En el panel de la izquierda, dentro del grupo .NET, hacé click en Web. Completá así:

• Solution name y Project name: LabBlazor — así tus namespaces coinciden con los del ejercicio
• Solution directory: la carpeta que prefieras. Dejá sin tildar Put solution and project in the same directory y Create Git repository.
• Target framework: net9.0 (debería decir from SDK 9.0)
• Language: C#
• Template: Blazor Web App, la primera de la lista. No la que dice Blazor WebAssembly Standalone App, que está justo abajo.

Apretá Create.

dotnet new blazor -o LabBlazor -int Server   # crea la carpeta LabBlazor con el proyecto

Dale ▶ Run (o Shift+F10) para confirmar que arranca. Después detenela con ■ Stop antes de seguir.

Tu primera página

@page + contenido + @code

Click derecho sobre la carpeta Components/Pages → Add → Blazor Component. Nombre: Tareas. No elijas Razor Page, que está justo debajo: crea otro tipo de página que no sirve para este ejercicio. Borrá todo lo que traiga el archivo y pegá esto:

@page "/tareas"

<PageTitle>Tareas</PageTitle>

<h1>Mis tareas</h1>
<p>Primera página Blazor de: <strong>@integrantes</strong></p>

<ul>
    <li>Tarea de ejemplo 1</li>
    <li>Tarea de ejemplo 2</li>
</ul>

@code {
    // TODO 1: escribí los nombres de tu equipo entre las comillas
    private string integrantes = "";
}

Ahora ▶ Run y, en la barra de direcciones, escribí a mano http://localhost:PUERTO/tareas.

El servicio y la entidad

una clase que guarda y modifica tareas

Click derecho sobre el proyecto LabBlazor → Add → Class/Interface, nombre TareaServicio. Reemplazá todo el contenido por esto. No hay nada que completar: es el servicio ya armado.

namespace LabBlazor;

public class Tarea
{
    public int Id { get; set; }
    public string Titulo { get; set; } = "";
}

public class TareaServicio
{
    private readonly List<Tarea> _tareas = new();
    private int _proximoId = 1;

    // Un código corto para reconocer cuál instancia del servicio estás usando.
    public string IdInstancia { get; } = Guid.NewGuid().ToString("N")[..6];

    public IReadOnlyList<Tarea> Listar() => _tareas;

    public void Agregar(string titulo)
    {
        _tareas.Add(new Tarea { Id = _proximoId++, Titulo = titulo });
    }

    public void Quitar(int id)
    {
        _tareas.RemoveAll(t => t.Id == id);
    }

    public void Editar(int id, string nuevoTitulo)
    {
        var tarea = _tareas.FirstOrDefault(t => t.Id == id);
        if (tarea is not null) tarea.Titulo = nuevoTitulo;
    }
}

Fijate en tres cosas, porque las vamos a usar durante todo el ejercicio:

• Tarea es la entidad: tiene un Id y un Titulo.
• TareaServicio guarda la lista en memoria y sabe Listar, Agregar, Quitar y Editar.
• IdInstancia es un código al azar que se genera una sola vez, cuando se crea el objeto. Sirve para reconocer qué instancia del servicio estamos usando.

Compilá desde la terminal de Rider:

dotnet build   # tiene que terminar en "Build succeeded."

Registrar, inyectar y conectar

Program.cs + @inject + CRUD en pantalla

3A · Registrar el servicio. Program.cs es el archivo donde se configuran los servicios de la aplicación: ahí le decimos al contenedor de inyección de dependencias qué servicios existen y con qué «vida» (Scoped o Singleton). Después, cada página los pide con @inject, que es lo que vas a hacer en 3B.

Abrí Program.cs y completá el TODO 2. El contenedor se arma en Build(), así que la línea tiene que quedar antes:

using LabBlazor;

var builder = WebApplication.CreateBuilder(args);

// ... acá quedan las líneas que ya traía la plantilla ...

// TODO 2: registrar TareaServicio en el contenedor con vida Scoped

var app = builder.Build();   // <- todo lo de arriba tiene que ir ANTES de esta línea

3B · Inyectar y conectar la página. Reemplazá todo el contenido de Tareas.razor por esto. Rider va a marcar en rojo Servicio hasta que resuelvas el TODO 3:

@page "/tareas"
@rendermode InteractiveServer
@* TODO 3: inyectá acá el servicio (tipo TareaServicio, nombre Servicio) *@

<PageTitle>Tareas</PageTitle>

<h1>Mis tareas</h1>

<p>
    Instancia del servicio:
    <strong>@(RendererInfo.IsInteractive ? Servicio.IdInstancia : "conectando…")</strong>
</p>

<input class="form-control mb-2" @bind="texto" @bind:event="oninput" placeholder="Título de la tarea" />
<button class="btn btn-primary mb-3" @onclick="Guardar">@(editandoId is null ? "Agregar" : "Guardar cambios")</button>

<ul>
    @foreach (var t in Servicio.Listar())
    {
        <li>
            @t.Titulo
            <button class="btn btn-sm btn-outline-secondary" @onclick="() => Editar(t)">Editar</button>
            <button class="btn btn-sm btn-outline-danger" @onclick="() => Quitar(t.Id)">Quitar</button>
        </li>
    }
</ul>

@code {
    private string texto = "";
    private int? editandoId;

    private void Guardar()
    {
        if (string.IsNullOrWhiteSpace(texto)) return;

        if (editandoId is null)
        {
            // TODO 4: agregar la tarea usando el servicio
        }
        else
        {
            // TODO 5: editar la tarea usando el servicio
        }

        texto = "";
        editandoId = null;
    }

    private void Editar(Tarea t)
    {
        editandoId = t.Id;
        texto = t.Titulo;
    }

    private void Quitar(int id)
    {
        // TODO 6: quitar la tarea usando el servicio
    }
}

3C · Probar. ▶ Run, abrí /tareas y agregá tres tareas, editá una y quitá otra.

Prueba 1: el servicio Scoped

dos pestañas + F5

Sin tocar nada del código, vas a mirar lo mismo desde dos pestañas. Escribí tu predicción antes de mirar.

1. En la pestaña A (/tareas) dejá las tareas que ya cargaste y anotá el código de instancia.
2. Abrí la pestaña B: una pestaña nueva del navegador con la misma dirección http://localhost:PUERTO/tareas. Anotá qué lista ve y su código.
3. En B agregá una tarea y volvé a A.
4. En A apretá F5.

Cambiá una palabra

de Scoped a Singleton

Ahora el cambio de una sola palabra. El resto del código no se toca.

1. En Rider: ■ Stop. Cerrá las dos pestañas viejas del navegador: quedaron desconectadas.
2. En Program.cs, resolvé el TODO 7:

// TODO 7: cambiá SOLO la palabra Scoped por Singleton (misma línea, no agregues otra)
builder.Services.AddScoped<TareaServicio>();

3. ▶ Run. Rider abre una pestaña nueva en la Home: escribí a mano /tareas (será la pestaña A).
4. Repitan el experimento del paso 4: tareas en A, predicción, abrir B, agregar en B y volver a A, F5 en A.
5. Última fila: ■ Stop y ▶ Run de nuevo. ¿Qué pasa con la lista?

Enlazar la página desde el menú

NavMenu.razor + NavLink

Hasta ahora llegabas a tu página escribiendo /tareas a mano. En este paso la conectás al menú lateral, para entrar desde la Home con un click y volver, sin tocar la barra de direcciones.

Abrí Components/Layout/NavMenu.razor. Ahí está el menú lateral: cada opción (Home, Counter, Weather) es un bloque con un NavLink.

TODO 8: agregá una opción nueva, debajo de las que ya están, que lleve a tu página de tareas.

Detené la app con ■ Stop y volvé a correrla con ▶ Run. Se abre en la Home, en la dirección de siempre, sin /tareas. Probá el recorrido completo: entrá a tu página desde el menú, volvé a la Home desde el menú y entrá de nuevo.