Ćwiczenie — Powiązania danych i zdarzenia

10 min

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

Tworzenie strony zadań do wykonania

Utwórz stronę zadań do wykonania:

W programie Visual Studio kliknij prawym przyciskiem Components/Pages myszy folder w Eksploratorze 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 Eksploratorze rozwiązań i wybierz polecenie Dodaj nowy plik>plik składnika 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.
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 {

}
```
Components/Pages/Todo.razor Zapisz plik

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 Eksploratorze 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 Eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt, a następnie wybierz polecenie Dodaj>nowy folder. Nazwij nowy folder Dane.

W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder Dane , a następnie wybierz polecenie 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

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

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
    }
}
```
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" />
```

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

Zapisz plik Components/Pages/Todo.razor. Ponownie skompiluj i uruchom ponownie aplikację.
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>    
```
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>
```
Components/Pages/Todo.razor Zapisz plik i ponownie uruchom aplikację.
Dodaj elementy, edytuj elementy i oznacz elementy gotowe do przetestowania składnika.

Sprzężenie zwrotne

Czy ta strona była pomocna?