Ćwiczenie — Powiązania danych i zdarzenia

Ukończone

W tym ćwiczeniu utworzysz podstawowy składnik listy zadań do wykonania w aplikacji Blazor.

Tworzenie strony zadań do wykonania

1. Utwórz stronę zadań do wykonania:

   W programie Visual Studio kliknij prawym przyciskiem Components/Pages myszy folder w Eksplorator rozwiązań i wybierz polecenie Dodaj>składnik Razor. Nadaj składnikowi Todo.razornazwę .

   W programie Visual Studio Code kliknij prawym przyciskiem myszy Pages folder w Eksplorator rozwiązań i wybierz polecenie Dodaj nowy plik.>Składnik Razor. Nadaj składnikowi Todo.razornazwę . Plik powinien zostać utworzony wewnątrz Pages folderu

   Ważne

   Nazwy plików składników Razor wymagają wielkiej litery. Pages Rozwiń folder i upewnij się, że Todo nazwa pliku składnika zaczyna się od wielkiej litery T. Nazwa pliku powinna mieć wartość Todo.razor.

2. Todo Otwórz składnik i dodaj dyrektywę @page Razor na początku pliku z względnym adresem URL /todo.

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

3. Components/Pages/Todo.razor Zapisz plik

Dodawanie składnika Todo do paska nawigacyjnego

Układ aplikacji używa NavMenu składnika . Układy to składniki, które pozwalają uniknąć duplikowania zawartości w aplikacji. Składnik NavLink renderuje tag kotwicy HTML, który można stylizować, aby zapewnić wskazówkę w interfejsie użytkownika aplikacji, gdy adres URL aplikacji jest zgodny z linkiem.

Rozwiń folder Components/Layout w Eksplorator rozwiązań i otwórz plik NavMenu.razor. <nav>...</nav> W sekcji składnika NavMenu dodaj następujący nowy <div>...</div> składnik i NavLink dla Todo składnika.

W pliku 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>

Zapisz plik Components/Layout//NavMenu.razor. Przeglądarka powinna zostać odświeżona automatycznie, a teraz wpis Todo na pasku nawigacyjnym:

Tworzenie elementu zadań do wykonania

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt, a następnie wybierz polecenie Dodaj>nowy folder. Nazwij nowy folder Dane.

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder Dane, a następnie wybierz pozycję Dodaj>klasę. Nadaj nowej klasie nazwę TodoItem.cs, a następnie wybierz pozycję Dodaj. Ta nowa klasa będzie przechowywać klasę języka C#, która reprezentuje element zadań do wykonania.

Zastąp kod z wiersza 7 w dół następującym kodem języka C# dla TodoItem klasy. Zadeklaruj Title jako ciąg dopuszczalny do wartości null przy użyciu polecenia ?. Zapisz plik.

namespace BlazorHybridApp.Data;

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

Wiązanie listy zadań do wykonania

Teraz możesz powiązać kolekcję TodoItem obiektów z językiem HTML w środowisku Blazor. W tym celu wprowadzimy następujące zmiany w Components/Pages/Todo.razor pliku:

• Dodaj deklarację using dla polecenia TodoItem za pomocą @using BlazorHybridApp.Datapolecenia .
• Dodaj pole dla elementów zadań do wykonania w @code bloku. Składnik Todo używa tego pola do obsługi stanu listy zadań do wykonania.
• Dodaj nieurządkowany znacznik listy i pętlę foreach , aby renderować każdy element zadań do wykonania jako element listy (<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();
}

Dodawanie elementów formularza w celu utworzenia zadań do wykonania

1. Aplikacja wymaga elementów interfejsu użytkownika do dodawania elementów zadań do wykonania do listy. Dodaj tekst wejściowy () i przycisk (<input><button>) poniżej listy nieurządkowanej (<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. Po wybraniu Add todo przycisku nic się nie dzieje, ponieważ program obsługi zdarzeń nie jest dołączony do przycisku.

   Dodaj metodę AddTodo do Todo składnika i zarejestruj metodę dla przycisku przy użyciu atrybutu @onclick . Metoda AddTodo języka C# jest wywoływana po wybraniu przycisku:

   <input placeholder="Something todo" />
   <button @onclick="AddTodo">Add todo</button>
   
   @code {
       private List<TodoItem> todos = new();
   
       private void AddTodo()
       {
           // Todo: Add the todo
       }
   }
   

3. Aby uzyskać tytuł nowego elementu zadań do wykonania, dodaj newTodo pole ciągu w górnej @code części bloku:

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

   Zmodyfikuj element w <input> celu powiązania newTodo z atrybutem @bind :

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

4. Zaktualizuj metodę , AddTodo aby dodać element TodoItem o określonym tytule do listy. Wyczyść wartość tekstu wejściowego, ustawiając newTodo pusty ciąg:

   @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. Zapisz plik Components/Pages/Todo.razor. Ponownie skompiluj i uruchom ponownie aplikację.

6. Możesz ustawić tekst tytułu dla każdego z zadań do wykonania, a pole wyboru może pomóc użytkownikowi śledzić ukończone elementy. Dodaj dane wejściowe pola wyboru dla każdego elementu zadań do wykonania i powiąż jego wartość z właściwością IsDone . Zmień element @todo.Title na <input> element powiązany z elementem todo.Title za pomocą polecenia @bind:

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

7. Zaktualizuj nagłówek, <h3> aby wyświetlić liczbę elementów zadań do wykonania, które nie zostały ukończone (IsDone to false).

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

8. Components/Pages/Todo.razor Zapisz plik i ponownie uruchom aplikację.

9. Dodaj elementy, edytuj elementy i oznacz elementy gotowe do przetestowania składnika.

   

Kontynuuj