練習 - 建立待辦事項清單

10 分鐘

在此練習中，您會運用目前為止學到的所有知識，將基本的待辦事項清單頁面新增至 Blazor 應用程式。

建立待辦事項清單頁面

建立新的 Blazor Web 應用程式專案。
將 Todo.razor 檔案新增至 Components/Pages 資料夾

在 Visual Studio 和 Visual Studio Code 中，使用滑鼠右鍵按一下 [方案總管] 中的 [元件/頁面] 資料夾，然後選取適當的選項以新增檔案，即可新增 Razor 檔案。

將 .NET CLI 和下列命令搭配使用，即可建立 Razor 檔案：
```
dotnet new razorcomponent -n Todo -o Components/Pages
```
上述命令中的 -n|--name 選項會指定新 Razor 元件的名稱。您可以使用 Components/Pages 選項，在專案的 -o|--output 資料夾中建立新的元件。

重要

Razor 元件檔案名稱的第一個字母應大寫，以使其輕鬆地和其他 HTML 元素區分開來。
開啟 Todo 元件並將 @page Razor 指示詞新增至具有 /todo 相對 URL 的檔案頂端，並將轉譯模式設定為 InteractiveServer，讓元件可以處理 UI 事件。
```
@page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}
```
將變更套用至應用程式，並嘗試瀏覽至 "/todo"，以查看您的新頁面。

新的待辦事項清單頁面尚未與其他現有頁面一起顯示在導覽功能表中。導覽功能表會在 NavMenu 元件中定義，其為應用程式版面配置的一部分。讓我們更新 NavMenu 元件，以新增待辦事項清單頁面的連結。

開啟 Components/Layout/NavMenu.razor。
尋找 nav 元件中的 NavMenu 元素，並在天氣頁面的現有導覽項目下方新增下列 div 元素。
```
<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 元件是內建的 Blazor 元件，可轉譯錨點標記。如果目前的瀏覽器位址和 href 的 NavLink 相符，其也會轉譯可用於設定連結樣式的 active CSS 類別。

套用此變更之後，您現在應該會看到 [待辦事項] 頁面顯示在導覽功能表中。

建置待辦事項項目清單

在專案的根建立新的 TodoItem.cs 檔案 (與 Program.cs 相同層級)，並將下列 C# 類別新增至其中。
```
public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}
```
在 Todo.razor 中，為區塊中的 @code to-do 項目清單新增欄位。
```
@code {
    private List<TodoItem> todos = new();
}
```
使用 foreach 迴圈轉譯所有待辦事項的未排序清單。
```
<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>
```
因為清單是空白的，所以您不會看到針對待辦事項清單轉譯的任何項目。您需要新增一些待辦項目的方法。

新增待辦項目

讓我們新增一些 UI 元素，以將待辦項目新增至清單。

在 Todo.razor 中，新增 input 標籤，並在未排序列表下方新增 button。
```
<input />
<button>Add todo</button>
```

建立 newTodo 字串欄位，並使用 input 指示詞屬性將其繫結至 @bind。

<input @bind="newTodo" />
<button>Add todo</button>

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

根據 @onclick 的值，將 button 處理常式新增至 TodoItem，以新增 todos 至 newTodo 清單，然後將 newTodo 的值重設為空白字串。

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

檢查您現在可以新增待辦項目，並顯示在清單中。新增每個待辦項目之後，input 值也應該重設。

新增核取方塊並計算未完成待辦項目的數目

您需要方法以將待辦項目標記為已完成、編輯現有的待辦項目，以及計算有多少尚未完成的待辦項目。

更新 li 元素的內容，以轉譯繫結至 input 之類型 checkbox 的 todo.IsDone，以及繫結至 input 的文字 todo.Title。

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

更新 <h3> 標頭，以顯示未完成待辦事項 (IsDone 為 false) 的數目計數。
```
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
```

當您完成新增程式碼時，Todo.razor 檔案應該如下所示:

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

將變更套用至應用程式之後，請嘗試新增項目、編輯項目，並標記完成的待辦項目以測試元件。

您的 Blazor 待辦項目清單現在已完成 ✅。

意見反應

此頁面對您有幫助嗎？