建置 Blazor 待辦事項清單應用程式

本教學課程說明如何建置和修改 Blazor 應用程式。

了解如何:

  • 建立待辦事項清單 Blazor 應用程式專案
  • 修改 Razor 元件
  • 在元件中使用事件處理和資料系結
  • 在應用程式中使用路由 Blazor

在本教學課程結束時,您將有一個工作待辦事項清單應用程式。

必要條件

.NET 6.0 SDK

建立 Blazor 應用程式

在命令殼層中建立名為 TodoList 的新 Blazor 應用程式:

dotnet new blazorserver -o TodoList
dotnet new blazorwasm -o TodoList

上述命令會建立名為 TodoList 的資料夾, -o|--output 其中包含保存應用程式的選項。 資料夾 TodoList 是專案的 根資料夾 。 使用下列命令將目錄變更為 TodoList 資料夾:

cd TodoList

建置待辦事項清單 Blazor 應用程式

  1. 使用下列命令將新的 TodoRazor 元件新增至應用程式:

    dotnet new razorcomponent -n Todo -o Pages
    

    上述 -n|--name 命令中的 選項會指定新 Razor 元件的名稱。 您可以使用 -o|--output 選項,在專案的 Pages 資料夾中建立新的元件。

    重要

    Razor 元件檔案名需要大寫的第一個字母。 開啟 Pages 資料夾,並確認 Todo 元件檔案名稱以大寫字母 T 開頭。 檔案名稱應該是 Todo.razor

  2. Todo在任何檔案編輯器中開啟元件,並將 指示詞新增 @pageRazor 至檔案頂端,其相對 URL 為 /todo

    Pages/Todo.razor:

    @page "/todo"
    
    <PageTitle>Todo</PageTitle>
    
    <h1>Todo</h1>
    
    @code {
    
    }
    

    儲存 Pages/Todo.razor 檔案。

  3. Todo 元件新增至導覽列。

    NavMenu 元件會用於應用程式版面配置。 版面配置是可讓您避免應用程式中內容重複的元件。 當應用程式載入元件 URL 時,NavLink 元件會在應用程式的 UI 中提供提示。

    在元件的導覽元素內容 (<nav class="flex-column">) NavMenu 中,為元件新增下列 <div> 元素 Todo

    Shared/NavMenu.razor 中:

    <div class="nav-item px-3">
        <NavLink class="nav-link" href="todo">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
        </NavLink>
    </div>
    

    儲存 Shared/NavMenu.razor 檔案。

  4. TodoList 資料夾在命令殼層中執行 命令,以建置並執行 dotnet watch run 應用程式。 執行應用程式之後,請選取 Todo 應用程式導覽列中的連結,以流覽新的待辦事項頁面,以在 載入頁面 /todo

    讓應用程式保持執行命令殼層。 每次儲存檔案時,應用程式會自動重建,且瀏覽器中的頁面會自動重載。

  5. TodoItem.cs將檔案新增至專案的根目錄, (TodoList 資料夾) 來保存代表待辦事項專案的類別。 針對 TodoItem 類別使用下列 C# 程式碼。

    TodoItem.cs:

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

    注意

    如果使用 Visual Studio 建立 TodoItem.cs 檔案和 TodoItem 類別,請使用下列其中一種方法:

    • 移除Visual Studio為 類別產生的命名空間。
    • 使用上述程式碼區塊中的 [複製]按鈕,並取代Visual Studio產生之檔案的整個內容。
  6. 返回 Todo 元件並執行下列工作:

    • 在 區塊中 @code 新增待辦事項的欄位。 Todo 元件會使用此欄位來維護待辦事項清單的狀態。
    • 新增未排序的清單標記和 foreach 迴圈,將每個待辦事項轉譯為清單項目 (<li>)。

    Pages/Todo.razor:

    @page "/todo"
    
    <PageTitle>Todo</PageTitle>
    
    <h1>Todo</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>@todo.Title</li>
        }
    </ul>
    
    @code {
        private List<TodoItem> todos = new();
    }
    
  7. 應用程式需要 UI 元素,才能將待辦事項新增至清單。 在未排序清單 (<ul>...</ul>) 下方新增文字輸出 (<input>) 與按鈕 (<button>):

    @page "/todo"
    
    <PageTitle>Todo</PageTitle>
    
    <h1>Todo</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>@todo.Title</li>
        }
    </ul>
    
    <input placeholder="Something todo" />
    <button>Add todo</button>
    
    @code {
        private List<TodoItem> todos = new();
    }
    
  8. 儲存檔案 TodoItem.cs 和更新 Pages/Todo.razor 的檔案。 在命令殼層中,應用程式會在儲存檔案時自動重建。 瀏覽器會重載頁面。

  9. 選取 Add todo 按鈕時,不會發生任何情況,因為事件處理常式並未連接至這個按鈕。

  10. AddTodo 方法新增至 Todo 元件,並且使用 @onclick 屬性來註冊按鈕的方法。 當選取按鈕時,就會呼叫 AddTodo C# 方法:

    <input placeholder="Something todo" />
    <button @onclick="AddTodo">Add todo</button>
    
    @code {
        private List<TodoItem> todos = new();
    
        private void AddTodo()
        {
            // Todo: Add the todo
        }
    }
    
  11. 若要取得新待辦事項項目的標題,在 @code 區塊的頂端新增 newTodo 字串欄位:

    private string? newTodo;
    

    修改文字 <input> 專案以與 屬性系 @bindnewTodo

    <input placeholder="Something todo" @bind="newTodo" />
    
  12. 更新 AddTodo 方法,將 TodoItem 與指定的標題新增至清單。 請將 newTodo 設定為空字串,以清除文字輸入的值:

    @page "/todo"
    
    <PageTitle>Todo</PageTitle>
    
    <h1>Todo</h1>
    
    <ul>
        @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;
            }
        }
    }
    
  13. 儲存 Pages/Todo.razor 檔案。 應用程式會自動在命令殼層中重建,而頁面會在瀏覽器中重載。

  14. 每個待辦事項的標題文字都可設定為可編輯,而核取方塊則可協助使用者記錄已完成的項目。 請為每個待辦事項新增核取方塊輸入,然後將其值繫結至 IsDone 屬性。 將 @todo.Title 變更為 <input> 元素,使用 @bind 繫結至 todo.Title

    <ul>
        @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="todo.Title" />
            </li>
        }
    </ul>
    
  15. 更新 <h1> 標頭,以顯示未完成待辦事項 (IsDonefalse) 的數目計數。 Razor下列標頭中的運算式會在每次重新呈現元件時 Blazor 進行評估。

    <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
    
  16. 已完成 Todo 的元件 (Pages/Todo.razor) :

    @page "/todo"
    
    <PageTitle>Todo</PageTitle>
    
    <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="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;
            }
        }
    }
    
  17. 儲存 Pages/Todo.razor 檔案。 應用程式會自動在命令殼層中重建,而頁面會在瀏覽器中重載。

  18. 新增項目、編輯項目,以及標記完成的待辦事項以測試元件。

  19. 完成後,請在命令殼層中關閉應用程式。 許多命令殼層都接受鍵盤命令CtrlC+ (Windows) 或+C (macOS) 來停止應用程式。

發佈至 Azure

如需部署至 Azure 的資訊,請參閱快速入門:部署 ASP.NET Web 應用程式

後續步驟

在本教學課程中,您已了解如何:

  • 建立待辦事項清單 Blazor 應用程式專案
  • 修改 Razor 元件
  • 在元件中使用事件處理和資料系結
  • 在應用程式中使用路由 Blazor

瞭解 ASP.NET Core Blazor 的工具:

了解如何:

  • 建立待辦事項清單 Blazor 應用程式專案
  • 修改 Razor 元件
  • 在元件中使用事件處理和資料系結
  • 在應用程式中使用路由 Blazor

在本教學課程結束時,您將有一個工作待辦事項清單應用程式。

必要條件

.NET 5.0 SDK

建立 Blazor 應用程式

在命令殼層中建立名為 TodoList 的新 Blazor 應用程式:

dotnet new blazorserver -o TodoList
dotnet new blazorwasm -o TodoList

上述命令會建立名為 TodoList 的資料夾, -o|--output 其中包含保存應用程式的選項。 資料夾 TodoList 是專案的 根資料夾 。 使用下列命令將目錄變更為 TodoList 資料夾:

cd TodoList

建置待辦事項清單 Blazor 應用程式

  1. 使用下列命令將新的 TodoRazor 元件新增至應用程式:

    dotnet new razorcomponent -n Todo -o Pages
    

    上述 -n|--name 命令中的 選項會指定新 Razor 元件的名稱。 您可以使用 -o|--output 選項,在專案的 Pages 資料夾中建立新的元件。

    重要

    Razor 元件檔案名需要大寫的第一個字母。 開啟 Pages 資料夾,並確認 Todo 元件檔案名稱以大寫字母 T 開頭。 檔案名稱應該是 Todo.razor

  2. Todo在任何檔案編輯器中開啟 元件,並使用 的相對 URL /todo 將 指示詞新增 @pageRazor 至檔案頂端。

    Pages/Todo.razor:

    @page "/todo"
    
    <h1>Todo</h1>
    
    @code {
    
    }
    

    儲存 Pages/Todo.razor 檔案。

  3. Todo 元件新增至導覽列。

    NavMenu 元件會用於應用程式版面配置。 版面配置是可讓您避免應用程式中內容重複的元件。 當應用程式載入元件 URL 時,NavLink 元件會在應用程式的 UI 中提供提示。

    在元件的未排序清單中 (<ul>...</ul>) NavMenu ,為元件新增下列清單專案 (<li>...</li>) 和 NavLink 元件 Todo

    Shared/NavMenu.razor 中:

    <ul class="nav flex-column">
    
        ...
    
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
            </NavLink>
        </li>
    </ul>
    

    儲存 Shared/NavMenu.razor 檔案。

  4. TodoList 資料夾在命令殼層中執行 命令,以建置並執行 dotnet watch run 應用程式。 執行應用程式之後,請選取 Todo 應用程式導覽列中的連結,以流覽新的待辦事項頁面,以載入頁面。 /todo

    讓應用程式保持執行命令殼層。 每次儲存檔案時,應用程式會自動重建,而且會自動重載瀏覽器中的頁面。

  5. TodoItem.cs將檔案新增至專案的根目錄 (TodoList 資料夾) ,以保存代表待辦事項的類別。 針對 TodoItem 類別使用下列 C# 程式碼。

    TodoItem.cs:

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

    注意

    如果使用 Visual Studio 來建立 TodoItem.cs 檔案和 TodoItem 類別,請使用下列其中一種方法:

    • 移除Visual Studio為 類別產生的命名空間。
    • 使用上述程式碼區塊中的 [複製] 按鈕,並取代Visual Studio產生的整個檔案內容。
  6. Todo返回元件並執行下列工作:

    • 在 區塊中 @code 新增待辦事項的欄位。 Todo 元件會使用此欄位來維護待辦事項清單的狀態。
    • 新增未排序的清單標記和 foreach 迴圈,將每個待辦事項轉譯為清單項目 (<li>)。

    Pages/Todo.razor:

    @page "/todo"
    
    <h1>Todo</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>@todo.Title</li>
        }
    </ul>
    
    @code {
        private List<TodoItem> todos = new();
    }
    
  7. 應用程式需要 UI 元素,才能將待辦事項新增至清單。 在未排序清單 (<ul>...</ul>) 下方新增文字輸出 (<input>) 與按鈕 (<button>):

    @page "/todo"
    
    <h1>Todo</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>@todo.Title</li>
        }
    </ul>
    
    <input placeholder="Something todo" />
    <button>Add todo</button>
    
    @code {
        private List<TodoItem> todos = new();
    }
    
  8. 儲存檔 TodoItem.cs 案和更新的 Pages/Todo.razor 檔案。 在命令殼層中,儲存檔案時會自動重建應用程式。 瀏覽器會重載頁面。

  9. 選取 Add todo 按鈕時,不會發生任何情況,因為事件處理常式並未連接至這個按鈕。

  10. AddTodo 方法新增至 Todo 元件,並且使用 @onclick 屬性來註冊按鈕的方法。 當選取按鈕時,就會呼叫 AddTodo C# 方法:

    <input placeholder="Something todo" />
    <button @onclick="AddTodo">Add todo</button>
    
    @code {
        private List<TodoItem> todos = new();
    
        private void AddTodo()
        {
            // Todo: Add the todo
        }
    }
    
  11. 若要取得新待辦事項項目的標題,在 @code 區塊的頂端新增 newTodo 字串欄位:

    private string newTodo;
    

    修改要與 屬性系結 newTodo@bind 文字 <input> 專案:

    <input placeholder="Something todo" @bind="newTodo" />
    
  12. 更新 AddTodo 方法,將 TodoItem 與指定的標題新增至清單。 請將 newTodo 設定為空字串,以清除文字輸入的值:

    @page "/todo"
    
    <h1>Todo</h1>
    
    <ul>
        @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;
            }
        }
    }
    
  13. 儲存 Pages/Todo.razor 檔案。 應用程式會在命令殼層中自動重建,而頁面會在瀏覽器中重載。

  14. 每個待辦事項的標題文字都可設定為可編輯,而核取方塊則可協助使用者記錄已完成的項目。 請為每個待辦事項新增核取方塊輸入,然後將其值繫結至 IsDone 屬性。 將 @todo.Title 變更為 <input> 元素,使用 @bind 繫結至 todo.Title

    <ul>
        @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="todo.Title" />
            </li>
        }
    </ul>
    
  15. 更新 <h1> 標頭,以顯示未完成待辦事項 (IsDonefalse) 的數目計數。 Razor下列標頭中的運算式會在每次重新呈現元件時 Blazor 進行評估。

    <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
    
  16. 已完成 Todo 的元件 (Pages/Todo.razor) :

    @page "/todo"
    
    <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="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;
            }
        }
    }
    
  17. 儲存 Pages/Todo.razor 檔案。 應用程式會在命令殼層中自動重建,而頁面會在瀏覽器中重載。

  18. 新增項目、編輯項目,以及標記完成的待辦事項以測試元件。

  19. 完成後,請在命令殼層中關閉應用程式。 許多命令殼層都接受鍵盤命令CtrlC+ (Windows) 或+C (macOS) 來停止應用程式。

發佈至 Azure

如需部署至 Azure 的資訊,請參閱快速入門:部署 ASP.NET Web 應用程式

後續步驟

在本教學課程中,您已了解如何:

  • 建立待辦事項清單 Blazor 應用程式專案
  • 修改 Razor 元件
  • 在元件中使用事件處理和資料系結
  • 在應用程式中使用路由 Blazor

瞭解適用于 ASP.NET Core Blazor 的工具:

了解如何:

  • 建立待辦事項清單 Blazor 應用程式專案
  • 修改 Razor 元件
  • 在元件中使用事件處理和資料系結
  • 在應用程式中使用路由 Blazor

在本教學課程結束時,您將會有一個可運作的待辦事項清單應用程式。

必要條件

.NET Core 3.1 SDK

建立 Blazor 應用程式

在命令殼層中建立名為 TodoList 的新 Blazor 應用程式:

dotnet new blazorserver -o TodoList
dotnet new blazorwasm -o TodoList

上述命令會建立名為 TodoList 的資料夾, -o|--output 其中包含用來保存應用程式的選項。 資料夾 TodoList 是專案的 根資料夾 。 使用下列命令將 TodoList 目錄變更為資料夾:

cd TodoList

建置待辦事項清單 Blazor 應用程式

  1. 使用下列命令將新的 TodoRazor 元件新增至應用程式:

    dotnet new razorcomponent -n Todo -o Pages
    

    上述 -n|--name 命令中的 選項會指定新 Razor 元件的名稱。 您可以使用 -o|--output 選項,在專案的 Pages 資料夾中建立新的元件。

    重要

    Razor 元件檔案名需要大寫的第一個字母。 開啟 Pages 資料夾,並確認 Todo 元件檔案名稱以大寫字母 T 開頭。 檔案名稱應該是 Todo.razor

  2. Todo在任何檔案編輯器中開啟 元件,並使用 的相對 URL /todo 將 指示詞新增 @pageRazor 至檔案頂端。

    Pages/Todo.razor:

    @page "/todo"
    
    <h1>Todo</h1>
    
    @code {
    
    }
    

    儲存 Pages/Todo.razor 檔案。

  3. Todo 元件新增至導覽列。

    NavMenu 元件會用於應用程式版面配置。 版面配置是可讓您避免應用程式中內容重複的元件。 當應用程式載入元件 URL 時,NavLink 元件會在應用程式的 UI 中提供提示。

    在元件的未排序清單中 (<ul>...</ul>) NavMenu ,為元件新增下列清單專案 (<li>...</li>) 和 NavLink 元件 Todo

    Shared/NavMenu.razor 中:

    <ul class="nav flex-column">
    
        ...
    
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
            </NavLink>
        </li>
    </ul>
    

    儲存 Shared/NavMenu.razor 檔案。

  4. TodoList 資料夾在命令殼層中執行 命令,以建置並執行 dotnet watch run 應用程式。 執行應用程式之後,請選取 Todo 應用程式導覽列中的連結,以流覽新的待辦事項頁面,以載入頁面。 /todo

    讓應用程式保持執行命令殼層。 每次儲存檔案時,應用程式會自動重建,而且會自動重載瀏覽器中的頁面。

  5. TodoItem.cs將檔案新增至專案的根目錄 (TodoList 資料夾) ,以保存代表待辦事項的類別。 針對 TodoItem 類別使用下列 C# 程式碼。

    TodoItem.cs:

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

    注意

    如果使用 Visual Studio 來建立 TodoItem.cs 檔案和 TodoItem 類別,請使用下列其中一種方法:

    • 移除Visual Studio為 類別產生的命名空間。
    • 使用上述程式碼區塊中的 [複製]按鈕,並取代Visual Studio產生之檔案的整個內容。
  6. 返回 Todo 元件並執行下列工作:

    • 在 區塊中 @code 新增待辦事項的欄位。 Todo 元件會使用此欄位來維護待辦事項清單的狀態。
    • 新增未排序的清單標記和 foreach 迴圈,將每個待辦事項轉譯為清單項目 (<li>)。

    Pages/Todo.razor:

    @page "/todo"
    
    <h1>Todo</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>@todo.Title</li>
        }
    </ul>
    
    @code {
        private IList<TodoItem> todos = new List<TodoItem>();
    }
    
  7. 應用程式需要 UI 元素,才能將待辦事項新增至清單。 在未排序清單 (<ul>...</ul>) 下方新增文字輸出 (<input>) 與按鈕 (<button>):

    @page "/todo"
    
    <h1>Todo</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>@todo.Title</li>
        }
    </ul>
    
    <input placeholder="Something todo" />
    <button>Add todo</button>
    
    @code {
        private IList<TodoItem> todos = new List<TodoItem>();
    }
    
  8. 儲存檔案 TodoItem.cs 和更新 Pages/Todo.razor 的檔案。 在命令殼層中,應用程式會在儲存檔案時自動重建。 瀏覽器會重載頁面。

  9. 選取 Add todo 按鈕時,不會發生任何情況,因為事件處理常式並未連接至這個按鈕。

  10. AddTodo 方法新增至 Todo 元件,並且使用 @onclick 屬性來註冊按鈕的方法。 當選取按鈕時,就會呼叫 AddTodo C# 方法:

    <input placeholder="Something todo" />
    <button @onclick="AddTodo">Add todo</button>
    
    @code {
        private IList<TodoItem> todos = new List<TodoItem>();
    
        private void AddTodo()
        {
            // Todo: Add the todo
        }
    }
    
  11. 若要取得新待辦事項項目的標題,在 @code 區塊的頂端新增 newTodo 字串欄位:

    private string newTodo;
    

    修改文字 <input> 專案以與 屬性系 @bindnewTodo

    <input placeholder="Something todo" @bind="newTodo" />
    
  12. 更新 AddTodo 方法,將 TodoItem 與指定的標題新增至清單。 請將 newTodo 設定為空字串,以清除文字輸入的值:

    @page "/todo"
    
    <h1>Todo</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>@todo.Title</li>
        }
    </ul>
    
    <input placeholder="Something todo" @bind="newTodo" />
    <button @onclick="AddTodo">Add todo</button>
    
    @code {
        private IList<TodoItem> todos = new List<TodoItem>();
        private string newTodo;
    
        private void AddTodo()
        {
            if (!string.IsNullOrWhiteSpace(newTodo))
            {
                todos.Add(new TodoItem { Title = newTodo });
                newTodo = string.Empty;
            }
        }
    }
    
  13. 儲存 Pages/Todo.razor 檔案。 應用程式會自動在命令殼層中重建,而頁面會在瀏覽器中重載。

  14. 每個待辦事項的標題文字都可設定為可編輯,而核取方塊則可協助使用者記錄已完成的項目。 請為每個待辦事項新增核取方塊輸入,然後將其值繫結至 IsDone 屬性。 將 @todo.Title 變更為 <input> 元素,使用 @bind 繫結至 todo.Title

    <ul>
        @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="todo.Title" />
            </li>
        }
    </ul>
    
  15. 更新 <h1> 標頭,以顯示未完成待辦事項 (IsDonefalse) 的數目計數。 Razor下列標頭中的運算式會在每次重新呈現元件時 Blazor 進行評估。

    <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
    
  16. 已完成 Todo 的元件 (Pages/Todo.razor) :

    @page "/todo"
    
    <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="todo.Title" />
            </li>
        }
    </ul>
    
    <input placeholder="Something todo" @bind="newTodo" />
    <button @onclick="AddTodo">Add todo</button>
    
    @code {
        private IList<TodoItem> todos = new List<TodoItem>();
        private string newTodo;
    
        private void AddTodo()
        {
            if (!string.IsNullOrWhiteSpace(newTodo))
            {
                todos.Add(new TodoItem { Title = newTodo });
                newTodo = string.Empty;
            }
        }
    }
    
  17. 儲存 Pages/Todo.razor 檔案。 應用程式會自動在命令殼層中重建,而頁面會在瀏覽器中重載。

  18. 新增項目、編輯項目,以及標記完成的待辦事項以測試元件。

  19. 完成後,請在命令殼層中關閉應用程式。 許多命令殼層都接受鍵盤命令CtrlC+ (Windows) 或+C (macOS) 來停止應用程式。

後續步驟

在本教學課程中,您已了解如何:

  • 建立待辦事項清單 Blazor 應用程式專案
  • 修改 Razor 元件
  • 在元件中使用事件處理和資料系結
  • 在應用程式中使用路由 Blazor

瞭解 ASP.NET Core Blazor 的工具: