Cvičení – vytvoření seznamu úkolů

Dokončeno

V tomto cvičení použijete všechno, co jste se zatím naučili, a přidáte do aplikace Blazor základní seznam úkolů.

Vytvoření stránky seznamu úkolů

1. Vytvořte nový projekt Blazor Web Appu.

2. Přidání souboru Todo.razor do složky Components/Pages

   V nástroji Visual Studio a Visual Studio Code můžete přidat soubor Razor tak, že kliknete pravým tlačítkem myši na složku Komponenty/Stránky v Průzkumník řešení a vyberete příslušnou možnost pro přidání nového souboru.

   Soubor Razor můžete také vytvořit pomocí rozhraní příkazového řádku .NET pomocí tohoto příkazu:

   dotnet new razorcomponent -n Todo -o Components/Pages
   

   Možnost -n|--name v předchozím příkazu určuje název nové komponenty Razor. Nová komponenta se vytvoří ve složce projektu Components/Pages pomocí možnosti -o|--output.

   Důležité

   Názvy souborů komponent Razor by měly mít velké první písmeno, aby bylo možné je snadno odlišit od jiných elementů HTML.

3. Otevřete komponentu Todo a přidejte na začátek souboru direktivu @page Razor s relativní adresou URL /todoa nastavte režim vykreslování tak, aby InteractiveServer komponenta zvládla události uživatelského rozhraní.

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

4. Použijte změny v aplikaci a zkuste přejít na /todo, abyste viděli novou stránku.

Přidejte stránku úkolů do navigační nabídky

Nová stránka seznamu úkolů se zatím nezobrazuje v navigační nabídce s ostatními existujícími stránkami. Navigační nabídka je definována v komponentě NavMenu , která je součástí rozložení aplikace. Pojďme aktualizovat komponentu NavMenu a přidat odkaz na stránku seznamu úkolů.

1. Otevřete komponenty/rozložení/NavMenu.razor.

2. nav Najděte prvek v komponentě NavMenu a přidejte následující div prvek pod existující navigační položku pro stránku počasí.

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

   Komponenta NavLink je integrovaná komponenta Blazor, která vykresluje značku ukotvení. Pokud aktuální adresa prohlížeče odpovídá hodnotě href pro danou NavLink, vykreslí se také třída CSS active, kterou můžete použít pro stylování odkazu.

   Po použití této změny by se teď měla v navigační nabídce zobrazit stránka Todo.

   

Vytvoření seznamu položek úkolů

1. Vytvořte nový TodoItem.cs soubor v kořenovém adresáři projektu (na stejné úrovni jako Program.cs) a přidejte do něj následující třídu jazyka C#.

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

2. V souboru Todo.razor přidejte pole pro seznam položek úkolů v @code bloku.

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

3. Vykreslení neuspořádaného seznamu všech úkolů pomocí foreach smyčky

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

   V seznamu úkolů se zatím nezobrazuje nic, protože seznam je prázdný. Potřebujete způsob, jak přidat některé položky úkolů.

Přidání položek úkolů

Pojďme přidat některé prvky uživatelského rozhraní pro přidání položek úkolů do našeho seznamu.

1. V Todo.razor přidejte značku input a button pod neuspořádaný seznam.

   <input />
   <button>Add todo</button>
   

2. Vytvořte pole řetězce newTodo a propojte ho s input pomocí atributu direktivy @bind.

   <input @bind="newTodo" />
   <button>Add todo</button>
   
   @code {
       private List<TodoItem> todos = new();
       string newTodo = "";
   }
   

3. Přidejte obslužnou rutinu @onclick k button, která přidá nový TodoItem do seznamu todos na základě hodnoty newTodo a poté nastaví hodnotu newTodo na prázdný řetězec.

   <input @bind="newTodo" />
   <button @onclick="AddTodo">Add todo</button>
   
   @code {
       private List<TodoItem> todos = new();
       string newTodo = "";
   
       void AddTodo()
       {
           if (!string.IsNullOrWhiteSpace(newTodo))
           {
               todos.Add(new TodoItem { Title = newTodo });
               newTodo = string.Empty;
           }
       }
   }
   

4. Zkontrolujte, že teď můžete přidávat položky úkolů a zobrazují se v seznamu. Hodnota input by se také měla resetovat po přidání každé položky úkolu.

Přidejte zaškrtávací políčka a spočítejte neúplné úkoly.

Potřebujete způsob, jak označit položky úkolů jako dokončené, upravit stávající položky úkolů a spočítat, kolik položek úkolů je ještě potřeba udělat.

1. Aktualizujte obsah elementu li tak, aby vykresloval input typu checkbox, který je vázán na todo.IsDone, a text input, který je vázán na todo.Title.

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

2. Aktualizujte záhlaví <h3>, aby zobrazovalo počet položek seznamu úkolů, které nejsou dokončené (IsDone je false).

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

3. Po přidání kódu by měl soubor Todo.razor vypadat přibližně takto:

   @page "/todo"
   @rendermode InteractiveServer
   
   <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
   
   <ul>
       @foreach (var todo in todos)
       {
           <li>
               <input type="checkbox" @bind="todo.IsDone" />
               <input @bind="todo.Title" />
           </li>
       }
   </ul>
   
   <input @bind="newTodo" />
   <button @onclick="AddTodo">Add todo</button>
   
   @code {
       private List<TodoItem> todos = new();
       string newTodo = "";
   
       void AddTodo()
       {
           if (!string.IsNullOrWhiteSpace(newTodo))
           {
               todos.Add(new TodoItem { Title = newTodo });
               newTodo = string.Empty;
           }
       }
   }
   

4. Po provedení změn v aplikaci zkuste přidávat položky, upravovat položky a označit úkoly jako hotové, aby byla otestována komponenta.

   

Váš seznam úkolů Blazor je nyní hotový ✅.