Alıştırma - Yapılacaklar listesi oluşturma

Tamamlandı

Bu alıştırmada, Blazor uygulamanıza temel bir yapılacaklar listesi sayfası eklemek için şimdiye kadar öğrendiğiniz her şeyi kullanacaksınız.

Yapılacaklar listesi sayfasını oluşturma

1. Yeni bir Blazor Web App projesi oluşturun.

2. Components/Pages klasörüne Todo.razor dosyası ekleme

   Visual Studio ve Visual Studio Code'da, Çözüm Gezgini'ndeBileşenler/Sayfalar klasörüne sağ tıklayıp yeni dosya eklemek için uygun seçeneği belirleyerek Razor dosyasını ekleyebilirsiniz.

   Razor dosyasını şu komutla .NET CLI kullanarak da oluşturabilirsiniz:

   dotnet new razorcomponent -n Todo -o Components/Pages
   

   -n|--name Yukarıdaki komuttaki seçenek, yeni Razor bileşeninin adını belirtir. Yeni bileşen, projenin Components/Pages klasöründe seçeneğiyle -o|--output oluşturulur.

   Önemli

   Razor bileşeni dosya adları, diğer HTML öğelerinden kolayca ayırt edilebilmeleri için büyük harfli bir ilk harf içermelidir.

3. Todo bileşeni açın ve göreli URL'si ile dosyanın en üstüne bir @page Razor yönergesi ekleyin ve bileşenin /todoUI olaylarını işleyebilmesi için InteractiveServer işleme modunu olarak ayarlayın.

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

4. Uygulamaya değişiklikleri uygulayın ve yeni sayfanızı görmek için "/todo" öğesine göz atmayı deneyin.

Gezinti menüsüne yapılacaklar sayfasını ekleme

Yeni yapılacaklar listesi sayfası, gezinti menüsünde diğer varolan sayfalarla birlikte henüz görünmüyor. Gezinti menüsü, uygulamanın düzeninin NavMenu bir parçası olan bileşende tanımlanır. Yapılacaklar NavMenu listesi sayfasına bağlantı eklemek için bileşeni güncelleştirelim.

1. Components/Layout/NavMenu.razor dosyasını açın.

2. nav bileşenindeki NavMenu öğesini bulun ve hava durumu sayfasının mevcut gezinti öğesinin altına aşağıdaki div öğeyi ekleyin.

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

   Bileşen NavLink , bir tutturucu etiketi işleyen yerleşik bir Blazor bileşenidir. Geçerli tarayıcı adresi için hrefile NavLink eşleşiyorsa, bağlantıyı şekillendirmek için kullanabileceğiniz bir active CSS sınıfı da işler.

   Bu değişikliği uyguladıktan sonra gezinti menüsünde Yapılacaklar sayfasının görüntüleniyor olduğunu görmeniz gerekir.

   

Yapılacaklar öğelerinin listesini oluşturma

1. Projenin kökünde (ile aynı düzeydeTodoItem.cs) yeni Program.cs bir dosya oluşturun ve aşağıdaki C# sınıfını ekleyin.

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

2. Todo.razor dosyasında, bloktaki to-do öğeleri @code listesi için bir alan ekleyin.

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

3. Döngü kullanarak tüm yapılacaklar öğelerinin sıralanmamış bir foreach listesini işleyin.

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

   Yapılacaklar listesi boş olduğundan, henüz yapılacaklar listesi için işlenen bir şey görmüyorsunuz. Yapılacaklar öğelerini eklemek için bir yönteme ihtiyacınız vardır.

Yapılacaklar öğeleri ekleme

Şimdi listemize yapılacaklar öğeleri eklemek için bazı kullanıcı arabirimi öğeleri ekleyelim.

1. Todo.razor'da bir input etiket ve sıralanmamış listenin altına bir button etiket ekleyin.

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

2. Bir newTodo dize alanı oluşturun ve yönerge özniteliğini input kullanarak bunu öğesine @bind bağlayın.

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

3. @onclick değerine button göre listeye yeni TodoItemtodos bir ekleyen ve değerini boş bir dizeye sıfırlayan newTodo bir işleyici newTodo ekleyin.

   <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. Artık yapılacaklar öğelerini ekleyip ekleyebildiğinizi ve bunların listede gösterilip gösterilmediğini denetleyin. Her input yapılacaklar öğesi eklendikten sonra değer de sıfırlanmalıdır.

Onay kutuları ekleme ve tamamlanmamış yapılacaklar öğelerini sayma

Yapılacaklar öğelerini tamamlandı olarak işaretlemek, var olan yapılacaklar öğelerini düzenlemek ve henüz yapılacak öğe sayısını saymak için bir yönteme ihtiyacınız vardır.

1. öğesine bağlı bir türü li ve ile ilişkili bir input metni checkbox işlemek için todo.IsDoneinput öğesinin içeriğini todo.Title güncelleştirin.

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

2. <h3> Tamamlanmamış todo öğelerinin sayısını göstermek için üst bilgiyi güncelleştirin (IsDone is false).

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

3. Kod eklemeyi bitirdiğinizde Todo.razor dosyanız aşağıdakine benzer olmalıdır:

   @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. Değişiklikleri uygulamaya uyguladıktan sonra, bileşeni test etmek için yapılan öğeleri eklemeyi, öğeleri düzenlemeyi ve yapılacakları işaretlemeyi deneyin.

   

Blazor yapılacaklar listeniz tamamlandı ✅.