Übung: Datenbindung und Ereignisse

10 Minuten

In dieser Übung erstellen Sie eine einfache Todo-Listenkomponente in Ihrer Blazor-App.

Erstellen der Todo-Seite

Erstellen der Todo-Seite:

Klicken Sie in Visual Studio mit der rechten Maustaste auf den Ordner Components/Pages im Projektmappen-Explorer. Wählen Sie dann Hinzufügen>Razor-Komponente. Benennen Sie die Komponente Todo.razor.

Klicken Sie in Visual Studio Code Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Pages. Wählen Sie dann Neue Datei hinzufügen…>Razor-Komponente aus. Benennen Sie die Komponente Todo.razor. Die Datei sollte innerhalb des Ordners Pages erstellt werden.

Wichtig

Der erste Buchstabe von Dateinamen für Razor-Komponenten muss großgeschrieben werden. Öffnen Sie den Ordner Pages und stellen Sie sicher, dass der Dateiname der Komponente Todo mit einem Großbuchstaben T beginnt. Der Dateiname sollte Todo.razor lauten.
Öffnen Sie die Todo-Komponente, und fügen Sie oben in der Datei die Razor-Anweisung @page mit der relativen URL /todo hinzu.
```
@page "/todo"

<h3>Todo</h3>

@code {

}
```
Speichern Sie die Components/Pages/Todo.razor-Datei.

Das App-Layout verwendet die Komponente NavMenu. Layouts sind Komponenten, mit denen Sie die Duplizierung des Inhalts in einer App vermeiden können. Die Komponente NavLink rendert ein HTML-Ankertag, das so gestaltet werden kann, dass in der Benutzeroberfläche der App ein Hinweis angezeigt wird, wenn die URL der App mit dem Link übereinstimmt.

Erweitern Sie den Ordner Komponenten/Layout im Projektmappen-Explorer und öffnen Sie die Datei NavMenu.razor. Fügen Sie im Abschnitt <nav>...</nav> der NavMenu-Komponente die folgenden neuen Komponenten <div>...</div> und NavLink für die Komponente Todo hinzu.

In Components/Layout/NavMenu.razor:

<!-- .. -->

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        
        <!-- ... -->

        <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>
    </nav>
</div>

Speichern Sie die Datei Components/Layout//NavMenu.razor. Der Browser sollte automatisch aktualisiert werden und nun den Todo-Eintrag in der Navigationsleiste anzeigen:

Erstellen eines Todo-Elements

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie dann Hinzufügen>Neuen Ordner aus. Nennen Sie den neuen Ordner Daten.

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Daten und wählen Sie Hinzufügen>Klasse aus. Nennen Sie die neue Klasse TodoItem.cs und wählen Sie Hinzufügen aus. Diese neue Klasse enthält eine C#-Klasse, die ein Todo-Element darstellt.

Ersetzen Sie den Code ab Zeile 7 durch den folgenden C#-Code für die Klasse TodoItem. Deklarieren Sie Title mithilfe von ? als Nullwerte zulassende Zeichenfolge. Speichern Sie die Datei .

namespace BlazorHybridApp.Data;

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

Binden einer Liste von TodoItem-Elementen

Sie können nun eine Sammlung von TodoItem-Objekten an HTML-Code in Blazor binden. Dies wird umgesetzt, indem wir in der Datei Components/Pages/Todo.razor die folgenden Änderungen vornehmen:

Fügen Sie mit @using BlazorHybridApp.Data die using-Deklaration für TodoItem hinzu.
Fügen Sie ein Feld für die To-Do-Elemente im @code-Block hinzu. Die Todo-Komponente verwaltet mit diesem Feld den Status der Aufgabenliste.
Fügen Sie ein Markup für eine unsortierte Liste und eine foreach-Schleife hinzu, um jedes Aufgabenelement als Listenelement zu rendern (<li>).

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

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

Hinzufügen von Formularelementen zum Erstellen von Todo-Elementen

Die App benötigt Benutzeroberflächenelemente, damit der Liste Aufgabenelemente hinzugefügt werden können. Fügen Sie eine Texteingabe (<input>) und eine Schaltfläche (<button>) unterhalb der Liste (<ul>...</ul>) hinzu:

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

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

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

Bei Auswahl der Schaltfläche Add todo geschieht nichts, da kein Ereignishandler mit der Schaltfläche verknüpft ist.

Fügen Sie der Todo-Komponente eine AddTodo-Methode hinzu, und registrieren Sie die Methode für die Schaltfläche mithilfe des @onclick-Attributs. Die C#-Methode AddTodo wird aufgerufen, wenn die Schaltfläche ausgewählt wird:
```
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

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

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}
```
Fügen Sie am oberen Rand des @code-Blocks ein newTodo-Zeichenfolgenfeld hinzu, um den Titel des neuen To-do-Elements zu erhalten:
```
@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    // Omitted for brevity...
}
```
Ändern Sie das <input>-Element, um newTodo mit dem @bind-Attribut zu verknüpfen:
```
<input placeholder="Something todo" @bind="newTodo" />
```

Aktualisieren Sie die AddTodo-Methode, um das TodoItem mit dem angegebenen Titel der Liste hinzuzufügen. Löschen Sie den Wert der Texteingabe, indem Sie für newTodo eine leere Zeichenfolge festlegen:

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @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;
        }
    }
}

Speichern Sie die Datei Components/Pages/Todo.razor. Erstellen Sie die App neu, und starten Sie sie erneut.
Sie können den Titeltext für jedes ToDo editierbar machen. Ein Kontrollkästchen hilft Benutzer*innen, den Überblick über erledigte Aufgaben zu behalten. Fügen Sie für jedes Todo-Element eine Kontrollkästcheneingabe hinzu, und binden Sie ihren Wert an die IsDone-Eigenschaft. Ändern Sie das Element @todo.Title in ein Element <input>, das an todo.Title gebunden ist (durch @bind):
```
<ul class="list-unstyled">
    @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>
```
Speichern Sie die Datei Components/Pages/Todo.razor, und führen Sie die App erneut aus.
Zum Testen der Komponente fügen Sie Elemente hinzu, bearbeiten Elemente und markieren Elemente als erledigt.

Übung: Datenbindung und Ereignisse

Erstellen der Todo-Seite

Hinzufügen der Todo-Komponente zur Navigationsleiste

Erstellen eines Todo-Elements

Binden einer Liste von TodoItem-Elementen

Hinzufügen von Formularelementen zum Erstellen von Todo-Elementen

Feedback