Oefening: gegevensbinding en gebeurtenissen

In deze oefening maakt u een eenvoudig takenlijstonderdeel in uw Blazor-app.

De takenpagina maken

1. De takenpagina maken:

   Klik in Visual Studio met de rechtermuisknop op de Components/Pages map in Solution Explorer en selecteer Razor-onderdeel toevoegen>. Geef het onderdeel Todo.razoreen naam.

   Klik in Visual Studio Code met de rechtermuisknop op de map Pages in Solution Explorer- en selecteer Nieuw bestand toevoegen>Razor-onderdeel. Geef het onderdeel Todo.razoreen naam. Het bestand moet worden gemaakt in de Pages map

   Belangrijk

   Voor razor-onderdeelbestandsnamen is een hoofdletter voor de eerste letter vereist. Vouw de Pages map uit en controleer of de bestandsnaam van het Todo onderdeel begint met een hoofdletter T. De bestandsnaam moet zijn Todo.razor.

2. Open het Todo onderdeel en voeg een @page Razor-instructie toe aan het begin van het bestand met een relatieve URL van /todo.

   @page "/todo"
   
   <h3>Todo</h3>
   
   @code {
   
   }
   

3. Components/Pages/Todo.razor Het bestand opslaan

Het taakonderdeel toevoegen aan de navigatiebalk

De indeling van de app maakt gebruik van het NavMenu onderdeel. Indelingen zijn onderdelen waarmee u kunt voorkomen dat inhoud in een app wordt gedupliceerd. Het NavLink onderdeel geeft een HTML-ankertag weer die kan worden gestijld om een aanwijzing te geven in de gebruikersinterface van de app wanneer de URL van de app overeenkomt met de koppeling.

Vouw de map Onderdelen/indeling uit in Solution Explorer en open het bestand NavMenu.razor . Voeg in de <nav>...</nav> sectie van het navigatiemenuonderdeel de volgende nieuwe <div>...</div> en NavLink het volgende onderdeel voor het Todo onderdeel toe.

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>

Sla het bestand Components/Layout//NavMenu.razor op. De browser moet automatisch worden vernieuwd en nu de taakvermelding op de navigatiebalk hebben:

Een taakitem maken

Klik in Solution Explorer met de rechtermuisknop op het project en selecteer Nieuwe map toevoegen>. Geef de nieuwe map gegevens een naam.

Klik in Solution Explorer met de rechtermuisknop op de map Gegevens en selecteer Klasse toevoegen>. Geef de nieuwe klasse een naam TodoItem.cs en selecteer vervolgens Toevoegen. Deze nieuwe klasse bevat een C#-klasse die een taakitem vertegenwoordigt.

Vervang de code van regel 7 omlaag door de volgende C#-code voor de TodoItem klasse. Declareer de Title tekenreeks als een null-tekenreeks met behulp van ?. Sla het bestand op.

namespace BlazorHybridApp.Data;

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

Een lijst met taken binden

U bent nu klaar om een verzameling TodoItem objecten te binden aan HTML in Blazor. We doen dit door de volgende wijzigingen in het Components/Pages/Todo.razor bestand aan te brengen:

• Voeg de using-declaratie voor TodoItem met @using BlazorHybridApp.Data.
• Voeg een veld toe voor de takenitems in het @code blok. Het Todo onderdeel gebruikt dit veld om de status van de takenlijst te behouden.
• Voeg ongeorderde lijstmarkeringen en een foreach lus toe om elk taakitem weer te geven als een lijstitem (<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();
}

Formulierelementen toevoegen om todos te maken

1. De app vereist UI-elementen voor het toevoegen van taken aan de lijst. Voeg een tekstinvoer () en een knop (<input><button>) toe onder de niet-geordende lijst (<ul>...</ul>):

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

2. Wanneer de Add todo knop 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 @onclick kenmerk. 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 = new();
   
       private void AddTodo()
       {
           // Todo: Add the todo
       }
   }
   

3. Als u de titel van het nieuwe taakitem wilt ophalen, voegt u boven aan het newTodo blok een @code tekenreeksveld toe:

   @code {
       private List<TodoItem> todos = new();
       private string? newTodo;
   
       // Omitted for brevity...
   }
   

   Wijzig het <input> element om te binden newTodo aan het @bind kenmerk:

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

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

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

5. Sla het bestand Components/Pages/Todo.razor op. Bouw de app opnieuw en start deze opnieuw.

6. U kunt de titeltekst voor elke taak bewerkbaar maken en met een selectievakje kan de gebruiker voltooide items bijhouden. Voeg een invoervak toe voor elk taakitem en bind de waarde ervan aan de IsDone eigenschap. Wijzig het @todo.Title element in een <input> element dat is gekoppeld aan todo.Title@bind:

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

7. Werk de <h3> koptekst bij om het aantal taken weer te geven dat niet is voltooid (IsDone is false).

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

8. Sla het Components/Pages/Todo.razor bestand op en voer de app opnieuw uit.

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