本教程演示如何生成和修改 Blazor 应用。
了解如何：
- 创建待办事项列表 Blazor 应用项目
- 修改 Razor 组件
- 在组件中使用事件处理和数据绑定
- 在 Blazor 应用中使用路由
在本教程结束时，你将拥有一个正常运行的待办事项列表应用。
先决条件
.NET 6.0 SDK
创建 Blazor 应用
在命令行界面中创建名为 TodoList 的新 Blazor 应用：
dotnet new blazorserver -o TodoList上述命令将创建一个带有 -o|--output 选项的 TodoList 文件夹来保存应用。 TodoList 文件夹是项目的根文件夹。 使用以下命令将目录切换到 TodoList 文件夹：
cd TodoList生成待办事项列表 Blazor 应用
使用以下命令向应用添加一个新的 TodoRazor 组件：
dotnet new blazorserver -o TodoList上述命令中的 -n|--name 指定了新的 Razor 组件的名称。 新组件是在项目具有 -o|--output 选项的 Pages 文件夹中创建的。
Razor 组件文件名要求首字母大写。 打开
Pages文件夹，确认Todo组件文件名以大写字母T开头。 文件名应为Todo.razor。
在任何文件编辑器中打开 Todo，添加 @pageRazor 指令添加到具有 /todo 的相对 URL 的文件顶部。Pages/Todo.razor:
@page "/todo"
<PageTitle>Todo</PageTitle>
<h1>Todo</h1>
@code {
}保存 Pages/Todo.razor 文件。
将 Todo 组件添加到导航栏。
NavMenu 组件用于应用的布局。 布局是可避免应用中出现重复内容的组件。 当应用加载组件 URL 时，NavLink 组件会在应用的 UI 中提供提示。
在 NavMenu 组件的导航元素内容 (<nav class="flex-column">) 中，为 Todo 组件添加以下 <div> 元素。在 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 文件。
从 TodoList 文件夹，在命令行界面中执行的 dotnet watch run 命令，以生成并运行应用。 应用运行后，请在应用的导航栏中选择 Todo 链接来访问新的 Todo 页面，该链接将在 /todo 处加载页面。
让应用继续运行命令行界面。 每次保存文件时，都将自动重新生成应用，并且会自动重载浏览器中的页面。
向项目的根目录添加 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 生成的文件的全部内容。
返回 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();
}该应用需要 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();
}保存 TodoItem.cs 文件和更新的 Pages/Todo.razor 文件。 在命令行界面中，保存文件时，将自动重新生成应用。 浏览器重载页面。
选择“Add todo”按钮时没有任何反应，因为没有事件处理程序连接到该按钮。
向 Todo 组件添加 AddTodo 方法，并使用 @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
}
}若要获取新的待办项的标题，请在 @code 块的顶部添加一个 newTodo 字符串：
private string? newTodo;修改文本 <input> 元素，使用 @bind 属性来绑定 newTodo：
<input placeholder="Something todo" @bind="newTodo" />更新 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;
}
}
}保存 Pages/Todo.razor 文件。 应用会在命令行界面中自动重新生成，并且页面在浏览器中重载。
每个 Todo 项的标题文本都可编辑，复选框可帮助用户跟踪已完成的项。 为每个 Todo 项添加一个复选框输入，并将它的值绑定到 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>更新 <h1> 标头，显示尚未完成的待办项数目（IsDone 是 false）。
<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>已完成的 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;
}
}
}保存 Pages/Todo.razor 文件。 应用会在命令行界面中自动重新生成，并且页面在浏览器中重载。
添加项、编辑项，并将待办标记为“已完成”来测试组件。
完成后，请在命令行界面中关闭应用。 许多命令行界面接受键盘命令 Ctrl+C (Windows) 或 ⌘+C (macOS) 来停止应用。
