Übung – Erstellen einer Aufgabenliste

10 Minuten

In dieser Übung verwenden Sie alles, was Sie bisher gelernt haben, um Ihrer Blazor-App eine einfache Aufgabenlistenseite hinzuzufügen.

Erstellen der Aufgabenlistenseite

Erstellen Sie ein neues Blazor-Web-App-Projekt.
Hinzufügen einer Datei "Todo.razor " zum Ordner "Komponenten/Seiten "

In Visual Studio und Visual Studio Code können Sie die Razor-Datei hinzufügen, indem Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Komponenten/Seiten" klicken und die entsprechende Option auswählen, um eine neue Datei hinzuzufügen.

Sie können die Razor-Datei auch mithilfe der .NET CLI mit diesem Befehl erstellen:
```
dotnet new razorcomponent -n Todo -o Components/Pages
```
Die -n|--name-Option im vorherigen Befehl gibt den Namen der neuen Razor-Komponente an. Die neue Komponente wird im Ordner Components/Pages des Projekts mit der -o|--output-Option erstellt.

Wichtig

Razor-Komponentendateinamen sollten einen großgeschriebenen ersten Buchstaben aufweisen, damit sie leicht von anderen HTML-Elementen unterschieden werden können.
Öffnen Sie die Todo-Komponente und fügen Sie oben in der Datei eine @page-Razor-Direktive mit einer relativen URL von /todo hinzu und legen Sie den Rendermodus auf InteractiveServer fest, damit die Komponente UI-Ereignisse verarbeiten kann.
```
@page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}
```
Wenden Sie die Änderungen auf die App an und versuchen Sie zu „/todo“ zu navigieren, um Ihre neue Seite anzuzeigen.

Die neue Aufgabenlistenseite wird noch nicht im Navigationsmenü mit den anderen vorhandenen Seiten angezeigt. Das Navigationsmenü wird in der NavMenu-Komponente definiert, die Teil des App-Layouts ist. Aktualisieren wir die NavMenu-Komponente, um der Aufgabenlistenseite einen Link hinzuzufügen.

Öffnen Sie Komponenten/Layout/NavMenu.razor.
Suchen Sie das nav-Element in der NavMenu-Komponente, und fügen Sie das folgende div-Element unterhalb des vorhandenen Navigationselements für die Wetterseite hinzu.
```
<div class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Todo
    </NavLink>
</div>
```
Die NavLink-Komponente ist eine integrierte Blazor-Komponente, die ein Anker-Tag rendert. Wenn die aktuelle Browseradresse dem href für den NavLink entspricht, wird auch eine active-CSS-Klasse gerendert, die Sie zum Formatieren des Links verwenden können.

Nachdem Sie diese Änderung angewendet haben, sollte nun die Seite „Todo“ im Navigationsmenü angezeigt werden.

Erstellen einer Liste von Aufgabenelementen

Erstellen Sie eine neue TodoItem.cs-Datei im Stammverzeichnis des Projekts (auf der gleichen Ebene wie Program.cs) mit der folgenden C#-Klasse.
```
public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}
```
Fügen Sie in Todo.razor ein Feld für die Liste der to-do Elemente im @code Block hinzu.
```
@code {
    private List<TodoItem> todos = new();
}
```
Rendern einer ungeordneten Liste aller Aufgaben mithilfe einer foreach-Schleife.
```
<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>
```
Es wird noch nichts für die Aufgabenliste gerendert, da die Liste leer ist. Sie benötigen eine Möglichkeit, Aufgabenelemente hinzuzufügen.

Aufgabenelemente hinzufügen

Fügen wir nun einige UI-Elemente zum Hinzufügen von Aufgabenelementen zu unserer Liste hinzu.

Fügen Sie in Todo.razor ein input-Tag und ein button-Tag unter der unsortierten Liste hinzu.
```
<input />
<button>Add todo</button>
```

Erstellen Sie ein newTodo-Zeichenfolgenfeld und binden Sie es mit input an das @bind-Direktiven-Attribut an.

<input @bind="newTodo" />
<button>Add todo</button>

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

Fügen Sie dem @onclick einen button-Handler hinzu, welcher der Liste TodoItem basierend auf dem Wert von todos ein neues newTodo hinzufügt und dann den Wert von newTodo auf eine leere Zeichenfolge zurücksetzt.

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

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

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

Überprüfen Sie, ob Sie jetzt Aufgabenelemente hinzufügen können und diese in der Liste angezeigt werden. Der input-Wert sollte auch nach dem Hinzufügen der einzelnen Aufgabenelemente zurückgesetzt werden.

Hinzufügen von Kontrollkästchen und Zählen unvollständiger Aufgabenelemente

Sie benötigen eine Möglichkeit, Aufgabenelemente als erledigt zu markieren, vorhandene Aufgabenelemente zu bearbeiten, und zu zählen, wie viele Aufgabenelemente noch erledigt werden müssen.

Aktualisieren Sie den Inhalt des li-Elements, um eine input vom Typ checkbox zu rendern, die an todo.IsDone gebunden ist, und einen Text input, der an todo.Title gebunden ist.

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

Aktualisieren Sie den <h3>-Header, um die Anzahl der nicht abgeschlossene To-do-Elemente anzuzeigen (IsDone ist false).
```
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
```

Wenn Sie mit dem Hinzufügen des Codes fertig sind, sollte die Datei "Todo.razor" wie folgt aussehen:

@page "/todo"
@rendermode InteractiveServer

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

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

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

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

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

Nachdem Sie die Änderungen auf die App angewendet haben, versuchen Sie, Elemente hinzuzufügen, Elemente zu bearbeiten und Todo-Elemente zu markieren, die zum Testen der Komponente abgeschlossen wurden.

Ihre Blazor-Aufgabenliste ist jetzt fertig ✅.

Feedback

War diese Seite hilfreich?