Een Blazor-takenlijst-app bouwen

Deze zelfstudie biedt een basiswerkervaring voor het bouwen en wijzigen van een Blazor-app. Zie de Blazor referentiedocumentatievoor gedetailleerde Blazor richtlijnen.

Meer informatie over:

• Een takenlijst maken Blazor app-project
• Razor-onderdelen wijzigen
• Gebeurtenisafhandeling en gegevensbinding gebruiken in onderdelen
• Routering gebruiken in een Blazor-app

Aan het einde van deze zelfstudie hebt u een werkende takenlijst-app.

Voorwaarden

.NET- downloaden en installeren als deze nog niet op het systeem is geïnstalleerd of als op het systeem de meest recente versie niet is geïnstalleerd.

Een Blazor-app maken

Maak een nieuwe Blazor Web App genaamd TodoList in een opdrachtprompt:

dotnet new blazor -o TodoList

Met de optie -o|--output maakt u een map voor het project. Als u een map voor uw project hebt gemaakt en de commandoshell in die map is geopend, laat dan de optie en waarde -o|--output weg om uw project te creëren.

Met de voorgaande opdracht maakt u een map met de naam TodoList met de -o|--output optie voor het opslaan van de app. De map TodoList is de hoofdmap van het project. Wijzig mappen in de map TodoList met de volgende opdracht:

cd TodoList

Een takenlijst maken Blazor-app

Voeg een nieuw TodoRazor-onderdeel toe aan de app met behulp van de volgende opdracht:

dotnet new razorcomponent -n Todo -o Components/Pages

Met de optie -n|--name in de voorgaande opdracht geeft u de naam van het nieuwe Razor-onderdeel op. Het nieuwe onderdeel wordt gemaakt in de Components/Pages map van het project met de optie -o|--output.

Belangrijk

voor Razor bestandsnamen van onderdelen is een eerste letter met hoofdletters vereist. Open de map Pages en controleer of de bestandsnaam van het Todo onderdeel begint met een hoofdletter T. De bestandsnaam moet Todo.razorzijn.

Open het Todo-onderdeel in een bestandseditor en breng de volgende wijzigingen aan boven aan het bestand:

• Voeg een @page-Razor-instructie toe met een relatieve URL van /todo.
• Schakel interactiviteit op de pagina in, zodat deze niet alleen statisch wordt weergegeven. Met de weergavemodus Interactive Server kan het onderdeel UI-gebeurtenissen van de server verwerken.
• Voeg een paginatitel toe met het PageTitle-onderdeel, waarmee een HTML-<title>-element aan de pagina kan worden toegevoegd.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Sla het Todo.razor bestand op.

Voeg het Todo onderdeel toe aan de navigatiebalk.

Het NavMenu onderdeel wordt gebruikt in de indeling van de app. Indelingen zijn onderdelen waarmee u duplicatie van inhoud in een app kunt voorkomen. Het NavLink onderdeel biedt een aanwijzing in de gebruikersinterface van de app wanneer de onderdeel-URL door de app wordt geladen.

Voeg in het navigatie-element (<nav>) van het onderdeel NavMenu het volgende <div> element toe voor het Todo-onderdeel.

In Components/Layout/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>

Sla het NavMenu.razor bestand op.

Bouw en voer de app uit door de opdracht dotnet watch run uit te voeren in de opdrachtshell vanuit de map TodoList. Nadat de app is uitgevoerd, gaat u naar de nieuwe todo-pagina door de koppeling Todo te selecteren in de navigatiebalk van de app, waarmee de pagina op /todowordt geladen.

Laat de app de opdrachtshell uitvoeren. Telkens wanneer een bestand wordt opgeslagen, wordt de app automatisch opnieuw opgebouwd en wordt de pagina in de browser automatisch opnieuw geladen.

Voeg een TodoItem.cs-bestand toe aan de hoofdmap van het project (de map TodoList) om een klasse te bevatten die een todo-item vertegenwoordigt. Gebruik de volgende C#-code voor de klasse TodoItem.

TodoItem.cs:

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

Notitie

Als u Visual Studio gebruikt om het TodoItem.cs-bestand en TodoItem klasse te maken, gebruikt u een van de volgende methoden:

• Verwijder de naamruimte die Visual Studio voor de klasse genereert.
• Gebruik de knop Kopiëren in het voorgaande codeblok en vervang de volledige inhoud van het bestand dat Door Visual Studio wordt gegenereerd.

Ga terug naar het Todo-onderdeel en voer de volgende taken uit:

• Voeg een veld toe voor de todo-items in het @code-blok. Het Todo onderdeel gebruikt dit veld om de status van de takenlijst bij te houden.
• Niet-geordende lijstmarkeringen en een foreach lus toevoegen om elk taakitem weer te geven als een lijstitem (<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 = [];
}

De app vereist gebruikersinterface-elementen om taken aan de lijst toe te voegen. Voeg een tekstinvoer (<input>) en een knop (<button>) toe onder de niet-geordende lijst (<ul>...</ul>):

@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 = [];
}

Sla het TodoItem.cs-bestand en het bijgewerkte Todo.razor-bestand op. In de opdrachtshell wordt de app automatisch opnieuw opgebouwd wanneer de bestanden worden opgeslagen. De pagina wordt opnieuw geladen in de browser.

Wanneer de knop Add todo is geselecteerd, gebeurt er niets omdat er geen gebeurtenis-handler aan de knop is gekoppeld.

Voeg een AddTodo methode toe aan het Todo-onderdeel en registreer de methode voor de knop met behulp van het kenmerk @onclick. De AddTodo C#-methode wordt aangeroepen wanneer de knop is geselecteerd:

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

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

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

Om de titel van het nieuwe todo-item te verkrijgen, voegt u een newTodo tekenreeksveld helemaal bovenaan het @code blok toe.

private string? newTodo;

Wijzig het tekst-<input>-element om newTodo te binden met het kenmerk @bind:

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

Werk de methode AddTodo bij om de TodoItem met de opgegeven titel toe te voegen aan de lijst. Wis de waarde van de tekstinvoer door newTodo in te stellen op een lege tekenreeks:

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

Sla het Todo.razor bestand op. De app wordt automatisch opnieuw opgebouwd in de opdrachtshell en de pagina wordt opnieuw geladen in de browser.

De titeltekst voor elke taak kan bewerkbaar worden gemaakt, en een selectievakje kan de gebruiker helpen voltooide items bij te houden. Voeg een invoervak toe voor elk taakitem en koppel de waarde ervan aan de eigenschap IsDone. Wijzig @todo.Title in een <input>-element dat afhankelijk is van todo.Title met @bind:

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

Werk de <h3> koptekst bij om het aantal niet-voltooide taken weer te geven (IsDone is false). De Razor-expressie in de volgende koptekst evalueert telkens wanneer Blazor het onderdeel opnieuw rendert.

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

Het voltooide Todo onderdeel:

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

Sla het Todo.razor bestand op. De app wordt automatisch opnieuw opgebouwd in de opdrachtshell en de pagina wordt opnieuw geladen in de browser.

Voeg items toe, bewerk items en markeer taken die zijn uitgevoerd om het onderdeel te testen.

Wanneer u klaar bent, sluit u de app af in de opdrachtshell. Veel opdrachtshells accepteren de toetsenbordopdracht Ctrl+C om een app te stoppen.

Publiceren naar Azure

Zie Quickstart: Een ASP.NET-web-app implementerenvoor meer informatie over het implementeren in Azure.

Volgende stappen

In deze zelfstudie hebt u het volgende geleerd:

• Een takenlijst maken Blazor app-project
• Razor-onderdelen wijzigen
• Gebeurtenisafhandeling en gegevensbinding gebruiken in onderdelen
• Routering gebruiken in een Blazor-app

Meer informatie over hulpprogramma's voor ASP.NET Core Blazor:

ASP.NET Core Blazor