Erstellen einer Blazor-App mit einer Aufgabenliste

Fügen Sie der App mithilfe des folgenden Befehls eine neue Todo Razor-Komponente hinzu:

dotnet new razorcomponent -n Todo -o Pages

Die Option -n|--name im vorherigen Befehl gibt den Namen der neuen Razor-Komponente an. Die neue Komponente wird im Ordner Pages des Projekts mit der -o|--output-Option erstellt.

Öffnen Sie die Todo-Komponente in einem beliebigen Datei-Editor, und fügen Sie am Anfang der Datei eine @page Razor-Anweisung mit der relativen URL /todo hinzu.

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

@code {

}

Speichern Sie die Datei Pages/Todo.razor.

Fügen Sie der Navigationsleiste die Todo-Komponente hinzu.

Die Komponente NavMenu wird im Layout der App verwendet. Layouts sind Komponenten, mit denen Sie die Duplizierung des Inhalts in einer App vermeiden können. Die NavLink-Komponente zeigt einen Hinweis auf der Benutzeroberfläche der App an, wenn die Komponenten-URL von der App geladen wird.

Fügen Sie im Navigationselementinhalt (<nav class="flex-column">) der Komponente NavMenu das folgende Element <div> für die Komponente Todo hinzu.

In 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>

Speichern Sie die Datei Shared/NavMenu.razor.

Erstellen Sie die App, und führen Sie sie aus, indem Sie den dotnet watch run-Befehl in der Befehlsshell im Ordner TodoList ausführen. Wenn die App ausgeführt wird, navigieren Sie zur neuen To-do-Seite, indem Sie in der Navigationsleiste der App den Link Todo auswählen, der die Seite unter /todo lädt.

Lassen Sie die App die Befehlsshell weiter ausführen. Bei jedem Speichern einer Datei wird die App automatisch neu erstellt, und die Seite im Browser wird automatisch neu geladen.

Fügen Sie dem Stamm des Projekts (der TodoList-Ordner) eine TodoItem.cs-Datei hinzu, die eine Klasse zum Darstellen eines Aufgabenelements enthalten soll. Verwenden Sie den folgenden C#-Code für die TodoItem-Klasse.

TodoItem.cs:

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

Navigieren Sie zur Todo-Komponente zurück, und führen Sie Folgendes durch:

• 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>).

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();
}

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"

<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();
}

Speichern Sie die Datei TodoItem.cs und die aktualisierte Datei Pages/Todo.razor. In der Befehlsshell wird die App automatisch neu erstellt, wenn die Dateien gespeichert werden. Die Seite im Browser wird neu geladen.

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:

private string? newTodo;

Ändern Sie das<input>-Textelement, 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"

<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;
        }
    }
}

Speichern Sie die Datei Pages/Todo.razor. Die App wird automatisch in der Befehlsshell neu erstellt, und die Seite wird im Browser neu geladen.

Der Titeltext für die einzelnen Todo-Elemente kann als bearbeitbar festgelegt werden, und ein Kontrollkästchen kann dem Benutzer helfen, die erledigten Elemente nachzuverfolgen. Fügen Sie für jedes Todo-Element eine Kontrollkästcheneingabe hinzu, und binden Sie ihren Wert an die IsDone-Eigenschaft. Ändern Sie @todo.Title in ein <input>-Element, das mit @bind mit todo.Title verknüpft ist:

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

Aktualisieren Sie den <h1>-Header, um die Anzahl der nicht abgeschlossene To-do-Elemente anzuzeigen (IsDone ist false).

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

Die fertige Todo-Komponente (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;
        }
    }
}

Speichern Sie die Datei Pages/Todo.razor. Die App wird automatisch in der Befehlsshell neu erstellt, und die Seite wird im Browser neu geladen.

Fügen Sie Elemente hinzu, und markieren Sie To-do-Elemente als abgeschlossen, um die Komponente zu testen.

Wenn Sie fertig sind, fahren Sie die App in der Befehlsshell herunter. In vielen Befehlsshells kann der Tastaturbefehl STRG+C verwendet werden, um eine App anzuhalten.

Fügen Sie der App mithilfe des folgenden Befehls eine neue Todo Razor-Komponente hinzu:

dotnet new razorcomponent -n Todo -o Pages

Die Option -n|--name im vorherigen Befehl gibt den Namen der neuen Razor-Komponente an. Die neue Komponente wird im Ordner Pages des Projekts mit der -o|--output-Option erstellt.

Öffnen Sie die Todo-Komponente in einem beliebigen Datei-Editor, und fügen Sie am Anfang der Datei eine @page Razor-Anweisung mit der relativen URL /todo hinzu.

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

@code {

}

Speichern Sie die Datei Pages/Todo.razor.

Fügen Sie der Navigationsleiste die Todo-Komponente hinzu.

Die Komponente NavMenu wird im Layout der App verwendet. Layouts sind Komponenten, mit denen Sie die Duplizierung des Inhalts in einer App vermeiden können. Die NavLink-Komponente zeigt einen Hinweis auf der Benutzeroberfläche der App an, wenn die Komponenten-URL von der App geladen wird.

Fügen Sie in der ungeordneten Liste (<ul>...</ul>) der NavMenu-Komponente das folgende Listenelement (<li>...</li>) und die folgende NavLink-Komponente für die Todo-Komponente hinzu.

In 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>

Speichern Sie die Datei Shared/NavMenu.razor.

Erstellen Sie die App, und führen Sie sie aus, indem Sie den dotnet watch run-Befehl in der Befehlsshell im Ordner TodoList ausführen. Wenn die App ausgeführt wird, navigieren Sie zur neuen To-do-Seite, indem Sie in der Navigationsleiste der App den Link Todo auswählen, der die Seite unter /todo lädt.

Lassen Sie die App die Befehlsshell weiter ausführen. Bei jedem Speichern einer Datei wird die App automatisch neu erstellt, und die Seite im Browser wird automatisch neu geladen.

Fügen Sie dem Stamm des Projekts (der TodoList-Ordner) eine TodoItem.cs-Datei hinzu, die eine Klasse zum Darstellen eines Aufgabenelements enthalten soll. Verwenden Sie den folgenden C#-Code für die TodoItem-Klasse.

TodoItem.cs:

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

Navigieren Sie zur Todo-Komponente zurück, und führen Sie Folgendes durch:

• 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>).

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();
}

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"

<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();
}

Speichern Sie die Datei TodoItem.cs und die aktualisierte Datei Pages/Todo.razor. In der Befehlsshell wird die App automatisch neu erstellt, wenn die Dateien gespeichert werden. Die Seite im Browser wird neu geladen.

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:

private string newTodo;

Ändern Sie das<input>-Textelement, 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"

<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;
        }
    }
}

Speichern Sie die Datei Pages/Todo.razor. Die App wird automatisch in der Befehlsshell neu erstellt, und die Seite wird im Browser neu geladen.

Der Titeltext für die einzelnen Todo-Elemente kann als bearbeitbar festgelegt werden, und ein Kontrollkästchen kann dem Benutzer helfen, die erledigten Elemente nachzuverfolgen. Fügen Sie für jedes Todo-Element eine Kontrollkästcheneingabe hinzu, und binden Sie ihren Wert an die IsDone-Eigenschaft. Ändern Sie @todo.Title in ein <input>-Element, das mit @bind mit todo.Title verknüpft ist:

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

Aktualisieren Sie den <h1>-Header, um die Anzahl der nicht abgeschlossene To-do-Elemente anzuzeigen (IsDone ist false).

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

Die fertige Todo-Komponente (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;
        }
    }
}

Speichern Sie die Datei Pages/Todo.razor. Die App wird automatisch in der Befehlsshell neu erstellt, und die Seite wird im Browser neu geladen.

Fügen Sie Elemente hinzu, und markieren Sie To-do-Elemente als abgeschlossen, um die Komponente zu testen.

Wenn Sie fertig sind, fahren Sie die App in der Befehlsshell herunter. In vielen Befehlsshells kann der Tastaturbefehl STRG+C verwendet werden, um eine App anzuhalten.

Fügen Sie der App mithilfe des folgenden Befehls eine neue Todo Razor-Komponente hinzu:

dotnet new razorcomponent -n Todo -o Pages

Die Option -n|--name im vorherigen Befehl gibt den Namen der neuen Razor-Komponente an. Die neue Komponente wird im Ordner Pages des Projekts mit der -o|--output-Option erstellt.

Öffnen Sie die Todo-Komponente in einem beliebigen Datei-Editor, und fügen Sie am Anfang der Datei eine @page Razor-Anweisung mit der relativen URL /todo hinzu.

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

@code {

}

Speichern Sie die Datei Pages/Todo.razor.

Fügen Sie der Navigationsleiste die Todo-Komponente hinzu.

Die Komponente NavMenu wird im Layout der App verwendet. Layouts sind Komponenten, mit denen Sie die Duplizierung des Inhalts in einer App vermeiden können. Die NavLink-Komponente zeigt einen Hinweis auf der Benutzeroberfläche der App an, wenn die Komponenten-URL von der App geladen wird.

Fügen Sie in der ungeordneten Liste (<ul>...</ul>) der NavMenu-Komponente das folgende Listenelement (<li>...</li>) und die folgende NavLink-Komponente für die Todo-Komponente hinzu.

In 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>

Speichern Sie die Datei Shared/NavMenu.razor.

Erstellen Sie die App, und führen Sie sie aus, indem Sie den dotnet watch run-Befehl in der Befehlsshell im Ordner TodoList ausführen. Wenn die App ausgeführt wird, navigieren Sie zur neuen To-do-Seite, indem Sie in der Navigationsleiste der App den Link Todo auswählen, der die Seite unter /todo lädt.

Lassen Sie die App die Befehlsshell weiter ausführen. Bei jedem Speichern einer Datei wird die App automatisch neu erstellt, und die Seite im Browser wird automatisch neu geladen.

Fügen Sie dem Stamm des Projekts (der TodoList-Ordner) eine TodoItem.cs-Datei hinzu, die eine Klasse zum Darstellen eines Aufgabenelements enthalten soll. Verwenden Sie den folgenden C#-Code für die TodoItem-Klasse.

TodoItem.cs:

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

Navigieren Sie zur Todo-Komponente zurück, und führen Sie Folgendes durch:

• 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>).

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>();
}

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"

<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>();
}

Speichern Sie die Datei TodoItem.cs und die aktualisierte Datei Pages/Todo.razor. In der Befehlsshell wird die App automatisch neu erstellt, wenn die Dateien gespeichert werden. Die Seite im Browser wird neu geladen.

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 IList<TodoItem> todos = new List<TodoItem>();

    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:

private string newTodo;

Ändern Sie das<input>-Textelement, 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"

<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;
        }
    }
}

Speichern Sie die Datei Pages/Todo.razor. Die App wird automatisch in der Befehlsshell neu erstellt, und die Seite wird im Browser neu geladen.

Der Titeltext für die einzelnen Todo-Elemente kann als bearbeitbar festgelegt werden, und ein Kontrollkästchen kann dem Benutzer helfen, die erledigten Elemente nachzuverfolgen. Fügen Sie für jedes Todo-Element eine Kontrollkästcheneingabe hinzu, und binden Sie ihren Wert an die IsDone-Eigenschaft. Ändern Sie @todo.Title in ein <input>-Element, das mit @bind mit todo.Title verknüpft ist:

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

Aktualisieren Sie den <h1>-Header, um die Anzahl der nicht abgeschlossene To-do-Elemente anzuzeigen (IsDone ist false).

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

Die fertige Todo-Komponente (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;
        }
    }
}

Speichern Sie die Datei Pages/Todo.razor. Die App wird automatisch in der Befehlsshell neu erstellt, und die Seite wird im Browser neu geladen.

Fügen Sie Elemente hinzu, und markieren Sie To-do-Elemente als abgeschlossen, um die Komponente zu testen.

Wenn Sie fertig sind, fahren Sie die App in der Befehlsshell herunter. In vielen Befehlsshells kann der Tastaturbefehl STRG+C verwendet werden, um eine App anzuhalten.