Erstellen einer Blazor-App mit einer Aufgabenliste

Artikel
11/12/2024

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Warnung

Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie in der .NET- und .NET Core-Supportrichtlinie. Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Dieses Tutorial bietet eine grundlegende Arbeitserfahrung zum Erstellen und Ändern einer Blazor-App. Eine ausführliche Blazor-Anleitung finden Sie in der Blazor-Referenzdokumentation.

In diesem Artikel werden folgende Themen erläutert:

Erstellen eines Aufgabenlisten-Blazor-App-Projekts
Ändern von Razor-Komponenten
Verwenden von Ereignisbehandlung und Datenbindung in Komponenten
Verwenden von Routing in einer Blazor-App

Am Ende dieses Tutorials verfügen Sie über eine funktionierende Aufgabenlisten-App.

Voraussetzungen

Laden Sie .NET herunter, und installieren Sie die Software, wenn sie noch nicht auf dem System oder wenn auf dem System nicht die neueste Version installiert ist.

Erstellen einer Blazor-App

Erstellen Sie in einer Befehlsshell eine neue Blazor Web App namens TodoList:

dotnet new blazor -o TodoList

Mit der Option -o|--output wird ein Ordner für das Projekt erstellt. Wenn Sie einen Ordner für das Projekt erstellt haben und dieser Ordner in der Befehlsshell geöffnet ist, lassen Sie zum Erstellen des Projekts die Option -o|--output und den entsprechenden Wert aus.

Verwenden Sie eines der folgenden Hostingmodelle, um eine neue Blazor App namens TodoList in einer Befehlsshell zu erstellen:

Erstellen Sie die App mit dem folgenden Befehl, um eine Oberfläche mit Blazor Server zu erhalten:
```
dotnet new blazorserver -o TodoList
```
Erstellen Sie die App mit dem folgenden Befehl, um eine Oberfläche mit Blazor WebAssembly zu erhalten:
```
dotnet new blazorwasm -o TodoList
```

Mit dem obigen Befehl wird ein Ordner mit dem Namen TodoList mit der -o|--output-Option zum Speichern der App erstellt. Der TodoList-Ordner ist der Stammordner des Projekts. Ändern Sie das Verzeichnis mit dem folgenden Befehl in den Ordner TodoList:

cd TodoList

Erstellen einer Blazor-Aufgabenlisten-App

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

dotnet new razorcomponent -n Todo -o Components/Pages

Die Option -n|--name 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.

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.

Wichtig

Der erste Buchstabe von Razor-Komponentendateinamen muss großgeschrieben werden. Öffnen Sie den Pages-Ordner. Überprüfen Sie, ob der Todo-Komponentendateiname mit einem großgeschriebenen ersten Buchstaben (T) beginnt. Der Dateiname sollte Todo.razor lauten.

Öffnen Sie die Komponente „Todo“ in einem beliebigen Datei-Editor, und nehmen Sie am Anfang der Datei die folgenden Änderungen vor:

Fügen Sie eine @pageRazor-Direktive mit einer relativen URL von /todo hinzu.
Aktivieren Sie die Interaktivität auf der Seite, damit sie nicht nur statisch gerendert wird. Der interaktive Rendermodus „Server“ ermöglicht es der Komponente, Ereignisse auf der Benutzeroberfläche zu verarbeiten.
Fügen Sie einen Seitentitel mit der Komponente „PageTitle“ hinzu, wodurch das Hinzufügen eines HTML-Elements „<title>“ zur Seite ermöglicht wird.

Öffnen Sie die Komponente „Todo“ in einem beliebigen Datei-Editor, und nehmen Sie am Anfang der Datei die folgenden Änderungen vor:

Fügen Sie eine @pageRazor-Direktive mit einer relativen URL von /todo hinzu.
Fügen Sie einen Seitentitel mit der Komponente „PageTitle“ hinzu, wodurch das Hinzufügen eines HTML-Elements „<title>“ zur Seite ermöglicht wird.

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

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

@page "/todo"

<h3>Todo</h3>

@code {

}

@page "/todo"

<h3>Todo</h3>

@code {

}

Speichern Sie die Datei 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>“) der Komponente „NavMenu“ das folgende Element „<div>“ für die Komponente „Todo“ hinzu.

In Components/Layout/NavMenu.razor:

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 NavMenu.razor.

Erstellen Sie die App, und führen Sie sie aus, indem Sie den dotnet watch run-Befehl in der Befehlsshell im TodoList-Ordner 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 TodoItem.cs-Ordner) eine TodoList-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; }
}

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

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

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

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

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

Hinweis

Wenn Sie Visual Studio verwenden, um die Datei „TodoItem.cs“ und die Klasse „TodoItem“ zu erstellen, verwenden Sie einen der folgenden Ansätze:

Entfernen Sie den Namespace, der von Visual Studio für die Klasse generiert wird.
Verwenden Sie die Schaltfläche Kopieren im vorangehenden Codeblock, und ersetzen Sie den gesamten Inhalt der von Visual Studio generierten Datei.

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

Components/Pages/Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

@code {
    private List<TodoItem> todos = [];
}

Components/Pages/Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

@code {
    private List<TodoItem> todos = [];
}

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

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

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

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

Pages/Todo.razor:

@page "/todo"

<h3>Todo</h3>

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

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

Pages/Todo.razor:

@page "/todo"

<h3>Todo</h3>

<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"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

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

@code {
    private List<TodoItem> todos = [];
}

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

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

@code {
    private List<TodoItem> todos = [];
}

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

@page "/todo"

<h3>Todo</h3>

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

@page "/todo"

<h3>Todo</h3>

<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 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 AddTodo-Komponente eine Todo-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 = [];

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

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

@code {
    private List<TodoItem> todos = [];

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

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

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

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

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

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

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

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

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

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

<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 newTodo-Blocks ein @code-Zeichenfolgenfeld hinzu, um den Titel des neuen To-do-Elements zu erhalten:

private string? newTodo;

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"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<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 = [];
    private string? newTodo;

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

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<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 = [];
    private string? newTodo;

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

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

@page "/todo"

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

@page "/todo"

<h3>Todo</h3>

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

@page "/todo"

<h3>Todo</h3>

<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 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 todo.Title mit @bind 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 <h3>-Header, um die Anzahl der nicht abgeschlossene To-do-Elemente anzuzeigen (IsDone ist false). Der Razor-Ausdruck in der folgenden Kopfzeile wird jedes Mal ausgewertet, wenn Blazor die Komponente erneut rendert.

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

Die fertige Todo-Komponente:

@page "/todo"
@rendermode InteractiveServer

<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 = [];
    private string? newTodo;

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

@page "/todo"
@rendermode InteractiveServer

<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 = [];
    private string? newTodo;

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

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

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

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

@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 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. Viele Befehlsshells akzeptieren den Tastaturbefehl STRG+C, um eine App zu beenden.

Veröffentlichen in Azure

Weitere Informationen zur Bereistellung in Azure finden Sie unter Schnellstart: Bereitstellen einer ASP.NET-Web-App.

Nächste Schritte

In diesem Tutorial haben Sie gelernt, wie die folgenden Aufgaben ausgeführt werden:

Erstellen eines Aufgabenlisten-Blazor-App-Projekts
Ändern von Razor-Komponenten
Verwenden von Ereignisbehandlung und Datenbindung in Komponenten
Verwenden von Routing in einer Blazor-App

Informationen über Tools für ASP.NET-Core Blazor:

ASP.NET Core Blazor

Freigeben über

Erstellen einer Blazor-App mit einer Aufgabenliste

Voraussetzungen

Erstellen einer Blazor-App

Erstellen einer Blazor-Aufgabenlisten-App

Veröffentlichen in Azure

Nächste Schritte

Zusätzliche Ressourcen