Harjoitus – Luo to-do -luettelo

Valmis

Tässä harjoituksessa lisäät Blazor-sovellukseesi kaiken tähän mennessä oppimasi to-do perussivun.

to-do luettelosivun luominen

1. Luo uusi Blazor-verkkosovellusprojekti.

2. Lisää Todo.razor -tiedosto Components/Pages -kansioon.

   Voit lisätä Razor-tiedoston Visual Studiossa ja Visual Studio Codessa napsauttamalla hiiren kakkospainikkeella Components/Pages-kansiota Solution Explorer - ja valitsemalla sopivan vaihtoehdon uuden tiedoston lisäämiseksi.

   Voit myös luoda Razor-tiedoston .NET CLI:n avulla tällä komennolla:

   dotnet new razorcomponent -n Todo -o Components/Pages
   

   Edellisessä komennossa oleva -n|--name määrittää uuden Razor-komponentin nimen. Uusi komponentti luodaan projektin Components/Pages-kansioon -o|--output -vaihtoehdolla.

   Tärkeä

   Partaveitsen komponentin tiedostonimissä tulee olla iso alkukirjain, jotta ne voidaan erottaa helposti muista HTML-elementeistä.

3. Avaa Todo-osa ja lisää tiedoston yläreunaan @page Razor -direktiivi, jonka suhteellinen URL-osoite on /todo, ja määritä hahmontamistilaksi InteractiveServer, jotta komponentti pystyy käsittelemään käyttöliittymätapahtumia.

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

4. Ota muutokset käyttöön sovelluksessa ja yritä selata sivulle /todo, jotta näet uuden sivusi.

Lisää to-do-sivu siirtymisvalikkoon

Uusi to-do -luettelosivu ei vielä näy siirtymisvalikossa muiden aiemmin luotujen sivujen kanssa. Siirtymisvalikko määritetään sovelluksen asettelun NavMenu osassa. Päivitämme NavMenu osan ja lisäämme linkin to-do luettelosivulle.

1. Avaa Osat/Asettelu/NavMenu.razor.

2. Etsi nav-osan NavMenu-elementti ja lisää seuraava div -elementti sääsivun olemassa olevan siirtymiskohteen alapuolelle.

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

   NavLink-komponentti on sisäinen Blazor-komponentti, joka hahmontaa ankkuritunnisteen. Jos nykyinen selaimen osoite vastaa hrefNavLink , se hahmontaa myös CSSactive luokan, jota voit käyttää linkin muotoiluun.

   Kun tämä muutos on otettu käyttöön, tehtäväsivun pitäisi nyt näkyä siirtymisvalikossa.

   

Luo kohteiden to-do luettelo

1. Luo uusi TodoItem.cs -tiedosto projektin pääkansioon (sama taso kuin Program.cs) ja lisää siihen seuraava C#-luokka.

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

2. Lisää Todo.razor kenttä @code lohkon kohteiden to-do luettelolle.

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

3. Hahmonna järjestämätön tehtäväluettelo foreach silmukan avulla.

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

   Et näe vielä mitään hahmonnettua to-do, koska luettelo on tyhjä. Tarvitset tavan lisätä joitakin to-do kohteita.

to-do kohteiden lisääminen

Lisätään seuraavaksi käyttöliittymäelementtejä to-do kohteiden lisäämiseksi luetteloomme.

1. Lisää Todo.razor järjestämättömän luettelon alapuolelle input -tunniste ja button.

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

2. Luo newTodo merkkijonokenttä ja sido se input@bind-direktiivin määritteellä.

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

3. Lisää @onclickbutton käsittelijä, joka lisää uuden TodoItemtodos-luetteloon newTodo arvon perusteella, ja palauttaa sitten newTodo arvon tyhjäksi merkkijonoksi.

   <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. Tarkista, että voit nyt lisätä to-do kohteita, jotka näkyvät luettelossa. input-arvo tulee nollata myös jokaisen to-do kohteen lisäämisen jälkeen.

Lisää valintaruutuja ja laske keskeneräiset to-do kohteet

Tarvitset tavan, jolla to-do kohteet merkitään valmiitksi, muokata aiemmin luotuja to-do kohteita ja laskea, kuinka monta to-do kohdetta ei ole vielä tehty.

1. Päivitä li-elementin sisältö siten, että hahmonnetaan input sidottu checkboxtodo.IsDonetodo.IsDone ja todo.Titlesidottu teksti .

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

2. Päivitä <h3>-otsikko näyttämään niiden todo-kohteiden määrä, jotka eivät ole valmiit (IsDone on false).

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

3. Kun olet lisännyt koodin, Todo.razor-tiedoston pitäisi näyttää samalta kuin seuraavassa:

   @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. Kun olet lisännyt muutokset sovellukseen, kokeile lisätä kohteita, muokata kohteita ja merkitä todo-kohteita, jotka on tehty komponentin testaamiseksi.

   

Blazorto-do luettelosi on nyt valmis ✅.