Creación de una aplicación de lista de tareas pendientes Blazor

Agregue un nuevo componente Todo Razor a la aplicación con el siguiente comando:

dotnet new razorcomponent -n Todo -o Pages

La opción -n|--name del comando anterior especifica el nombre del nuevo componente Razor. El nuevo componente se crea en la carpeta Pages del proyecto con la opción -o|--output.

Abra el componente Todo en cualquier editor de archivos y agregue una directiva @page Razor a la parte superior del archivo con una dirección URL relativa de /todo.

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

@code {

}

Guarde el archivo Pages/Todo.razor.

Agregue el componente Todo a la barra de navegación.

El componente NavMenu se usa en el diseño de la aplicación. Los diseños son componentes que le permiten impedir la duplicación de contenido en una aplicación. El componente NavLink proporciona una indicación en la interfaz de usuario de la aplicación cuando la aplicación carga la dirección URL del componente.

En el contenido del elemento de navegación (<nav class="flex-column">) del componente NavMenu, agregue el siguiente elemento <div> para el componente Todo.

En Shared/NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
    </NavLink>
</div>

Guarde el archivo Shared/NavMenu.razor.

Compile y ejecute la aplicación mediante el comando dotnet watch run en el shell de comandos desde la carpeta TodoList. Cuando la aplicación se ejecute, visite la nueva página de tareas pendientes seleccionando el vínculo Todo en la barra de navegación de la aplicación, que carga la página en /todo.

Deje la aplicación ejecutando el shell de comandos. Cada vez que se guarda un archivo, la aplicación se vuelve a generar automáticamente y la página del explorador se vuelve a cargar automáticamente.

Agregue un archivo TodoItem.cs a la raíz del proyecto (carpeta TodoList) para retener una clase que represente un elemento de la lista de tareas. Use el siguiente C# de código para la clase TodoItem.

TodoItem.cs:

public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; }
}

Vuelva al componente Todo y realice las tareas siguientes:

• Agregue un campo a los elementos de tareas pendientes en un bloque @code. El componente Todo utiliza este campo para mantener el estado de la lista de tareas pendientes.
• Agregue el marcado de la lista no ordenada y un bucle foreach para que cada elemento de la lista se represente en un elemento de la lista de tareas pendientes (<li>).

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

Para agregar elementos de tareas pendientes a la lista, la aplicación requiere elementos de la interfaz de usuario. Agregue una entrada de texto (<input>) y un botón (<button>) debajo de la lista no ordenada (<ul>...</ul>):

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private List<TodoItem> todos = new();
}

Guarde el archivo TodoItem.cs y el archivo Pages/Todo.razor actualizado. En el shell de comandos, la aplicación se vuelve a compilar automáticamente cuando se guardan los archivos. El explorador vuelve a cargar la página.

Al seleccionar el botón Add todo , no ocurre nada porque no hay ningún controlador de eventos conectado al botón.

Agregue un método AddTodo al componente Todo y registre el método para el botón mediante el atributo @onclick. El método AddTodo de C# se llama cuando se selecciona el botón:

<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

Para obtener el título del nuevo elemento de la lista de tareas pendientes, agregue un campo de cadena newTodo en la parte superior del bloque @code:

private string? newTodo;

Modifique el elemento <input> de texto para enlazar newTodo con el atributo @bind:

<input placeholder="Something todo" @bind="newTodo" />

Actualice el método AddTodo para agregar el TodoItem con el título especificado a la lista. Borre el valor de la entrada de texto mediante el establecimiento de newTodo en una cadena vacía:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Guarde el archivo Pages/Todo.razor. La aplicación se vuelve a generar automáticamente en el shell de comandos y la página se vuelve a cargar en el explorador.

Se puede hacer que el texto de título de cada elemento de tarea pendiente sea editable y una casilla puede ayudar al usuario a realizar el seguimiento de los elementos completados. Agregue una entrada de casilla a cada elemento de tarea pendiente y enlace su valor a la propiedad IsDone. Cambie @todo.Title a un elemento <input> enlazado a todo.Title con @bind:

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

Actualice el encabezado <h1> para mostrar un recuento del número de elementos de la lista de tareas que no se han completado (IsDone es false).

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

El componente Todo completado (Pages/Todo.razor):

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Guarde el archivo Pages/Todo.razor. La aplicación se vuelve a generar automáticamente en el shell de comandos y la página se vuelve a cargar en el explorador.

Agregue los elementos, edite los elementos y marque los elementos de la lista de tareas realizados para probar el componente.

Cuando termine, cierre la aplicación en el shell de comandos. Muchos shells de comandos aceptan el comando de teclado Ctrl+c para detener una aplicación.

Agregue un nuevo componente Todo Razor a la aplicación con el siguiente comando:

dotnet new razorcomponent -n Todo -o Pages

La opción -n|--name del comando anterior especifica el nombre del nuevo componente Razor. El nuevo componente se crea en la carpeta Pages del proyecto con la opción -o|--output.

Abra el componente Todo en cualquier editor de archivos y agregue una directiva @page Razor a la parte superior del archivo con una dirección URL relativa de /todo.

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

@code {

}

Guarde el archivo Pages/Todo.razor.

Agregue el componente Todo a la barra de navegación.

El componente NavMenu se usa en el diseño de la aplicación. Los diseños son componentes que le permiten impedir la duplicación de contenido en una aplicación. El componente NavLink proporciona una indicación en la interfaz de usuario de la aplicación cuando la aplicación carga la dirección URL del componente.

En la lista sin ordenar (<ul>...</ul>) del componente NavMenu, agregue los siguientes elementos de lista (<li>...</li>) y el componente NavLink para el componente Todo.

En Shared/NavMenu.razor:

<ul class="nav flex-column">

    ...

    <li class="nav-item px-3">
        <NavLink class="nav-link" href="todo">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
        </NavLink>
    </li>
</ul>

Guarde el archivo Shared/NavMenu.razor.

Compile y ejecute la aplicación mediante el comando dotnet watch run en el shell de comandos desde la carpeta TodoList. Cuando la aplicación se ejecute, visite la nueva página de tareas pendientes seleccionando el vínculo Todo en la barra de navegación de la aplicación, que carga la página en /todo.

Deje la aplicación ejecutando el shell de comandos. Cada vez que se guarda un archivo, la aplicación se vuelve a generar automáticamente y la página del explorador se vuelve a cargar automáticamente.

Agregue un archivo TodoItem.cs a la raíz del proyecto (carpeta TodoList) para retener una clase que represente un elemento de la lista de tareas. Use el siguiente C# de código para la clase TodoItem.

TodoItem.cs:

public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

Vuelva al componente Todo y realice las tareas siguientes:

• Agregue un campo a los elementos de tareas pendientes en un bloque @code. El componente Todo utiliza este campo para mantener el estado de la lista de tareas pendientes.
• Agregue el marcado de la lista no ordenada y un bucle foreach para que cada elemento de la lista se represente en un elemento de la lista de tareas pendientes (<li>).

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

Para agregar elementos de tareas pendientes a la lista, la aplicación requiere elementos de la interfaz de usuario. Agregue una entrada de texto (<input>) y un botón (<button>) debajo de la lista no ordenada (<ul>...</ul>):

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private List<TodoItem> todos = new();
}

Guarde el archivo TodoItem.cs y el archivo Pages/Todo.razor actualizado. En el shell de comandos, la aplicación se vuelve a compilar automáticamente cuando se guardan los archivos. El explorador vuelve a cargar la página.

Al seleccionar el botón Add todo , no ocurre nada porque no hay ningún controlador de eventos conectado al botón.

Agregue un método AddTodo al componente Todo y registre el método para el botón mediante el atributo @onclick. El método AddTodo de C# se llama cuando se selecciona el botón:

<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

Para obtener el título del nuevo elemento de la lista de tareas pendientes, agregue un campo de cadena newTodo en la parte superior del bloque @code:

private string newTodo;

Modifique el elemento <input> de texto para enlazar newTodo con el atributo @bind:

<input placeholder="Something todo" @bind="newTodo" />

Actualice el método AddTodo para agregar el TodoItem con el título especificado a la lista. Borre el valor de la entrada de texto mediante el establecimiento de newTodo en una cadena vacía:

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Guarde el archivo Pages/Todo.razor. La aplicación se vuelve a generar automáticamente en el shell de comandos y la página se vuelve a cargar en el explorador.

Se puede hacer que el texto de título de cada elemento de tarea pendiente sea editable y una casilla puede ayudar al usuario a realizar el seguimiento de los elementos completados. Agregue una entrada de casilla a cada elemento de tarea pendiente y enlace su valor a la propiedad IsDone. Cambie @todo.Title a un elemento <input> enlazado a todo.Title con @bind:

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

Actualice el encabezado <h1> para mostrar un recuento del número de elementos de la lista de tareas que no se han completado (IsDone es false).

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

El componente Todo completado (Pages/Todo.razor):

@page "/todo"

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Guarde el archivo Pages/Todo.razor. La aplicación se vuelve a generar automáticamente en el shell de comandos y la página se vuelve a cargar en el explorador.

Agregue los elementos, edite los elementos y marque los elementos de la lista de tareas realizados para probar el componente.

Cuando termine, cierre la aplicación en el shell de comandos. Muchos shells de comandos aceptan el comando de teclado Ctrl+c para detener una aplicación.

Agregue un nuevo componente Todo Razor a la aplicación con el siguiente comando:

dotnet new razorcomponent -n Todo -o Pages

La opción -n|--name del comando anterior especifica el nombre del nuevo componente Razor. El nuevo componente se crea en la carpeta Pages del proyecto con la opción -o|--output.

Abra el componente Todo en cualquier editor de archivos y agregue una directiva @page Razor a la parte superior del archivo con una dirección URL relativa de /todo.

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

@code {

}

Guarde el archivo Pages/Todo.razor.

Agregue el componente Todo a la barra de navegación.

El componente NavMenu se usa en el diseño de la aplicación. Los diseños son componentes que le permiten impedir la duplicación de contenido en una aplicación. El componente NavLink proporciona una indicación en la interfaz de usuario de la aplicación cuando la aplicación carga la dirección URL del componente.

En la lista sin ordenar (<ul>...</ul>) del componente NavMenu, agregue los siguientes elementos de lista (<li>...</li>) y el componente NavLink para el componente Todo.

En Shared/NavMenu.razor:

<ul class="nav flex-column">

    ...

    <li class="nav-item px-3">
        <NavLink class="nav-link" href="todo">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
        </NavLink>
    </li>
</ul>

Guarde el archivo Shared/NavMenu.razor.

Compile y ejecute la aplicación mediante el comando dotnet watch run en el shell de comandos desde la carpeta TodoList. Cuando la aplicación se ejecute, visite la nueva página de tareas pendientes seleccionando el vínculo Todo en la barra de navegación de la aplicación, que carga la página en /todo.

Deje la aplicación ejecutando el shell de comandos. Cada vez que se guarda un archivo, la aplicación se vuelve a generar automáticamente y la página del explorador se vuelve a cargar automáticamente.

Agregue un archivo TodoItem.cs a la raíz del proyecto (carpeta TodoList) para retener una clase que represente un elemento de la lista de tareas. Use el siguiente C# de código para la clase TodoItem.

TodoItem.cs:

public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

Vuelva al componente Todo y realice las tareas siguientes:

• Agregue un campo a los elementos de tareas pendientes en un bloque @code. El componente Todo utiliza este campo para mantener el estado de la lista de tareas pendientes.
• Agregue el marcado de la lista no ordenada y un bucle foreach para que cada elemento de la lista se represente en un elemento de la lista de tareas pendientes (<li>).

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
}

Para agregar elementos de tareas pendientes a la lista, la aplicación requiere elementos de la interfaz de usuario. Agregue una entrada de texto (<input>) y un botón (<button>) debajo de la lista no ordenada (<ul>...</ul>):

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
}

Guarde el archivo TodoItem.cs y el archivo Pages/Todo.razor actualizado. En el shell de comandos, la aplicación se vuelve a compilar automáticamente cuando se guardan los archivos. El explorador vuelve a cargar la página.

Al seleccionar el botón Add todo , no ocurre nada porque no hay ningún controlador de eventos conectado al botón.

Agregue un método AddTodo al componente Todo y registre el método para el botón mediante el atributo @onclick. El método AddTodo de C# se llama cuando se selecciona el botón:

<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

Para obtener el título del nuevo elemento de la lista de tareas pendientes, agregue un campo de cadena newTodo en la parte superior del bloque @code:

private string newTodo;

Modifique el elemento <input> de texto para enlazar newTodo con el atributo @bind:

<input placeholder="Something todo" @bind="newTodo" />

Actualice el método AddTodo para agregar el TodoItem con el título especificado a la lista. Borre el valor de la entrada de texto mediante el establecimiento de newTodo en una cadena vacía:

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Guarde el archivo Pages/Todo.razor. La aplicación se vuelve a generar automáticamente en el shell de comandos y la página se vuelve a cargar en el explorador.

Se puede hacer que el texto de título de cada elemento de tarea pendiente sea editable y una casilla puede ayudar al usuario a realizar el seguimiento de los elementos completados. Agregue una entrada de casilla a cada elemento de tarea pendiente y enlace su valor a la propiedad IsDone. Cambie @todo.Title a un elemento <input> enlazado a todo.Title con @bind:

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

Actualice el encabezado <h1> para mostrar un recuento del número de elementos de la lista de tareas que no se han completado (IsDone es false).

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

El componente Todo completado (Pages/Todo.razor):

@page "/todo"

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Guarde el archivo Pages/Todo.razor. La aplicación se vuelve a generar automáticamente en el shell de comandos y la página se vuelve a cargar en el explorador.

Agregue los elementos, edite los elementos y marque los elementos de la lista de tareas realizados para probar el componente.

Cuando termine, cierre la aplicación en el shell de comandos. Muchos shells de comandos aceptan el comando de teclado Ctrl+c para detener una aplicación.