2.生成 Blazor 待办事项列表应用

参考：https://learn.microsoft.com/zh-cn/aspnet/core/blazor/tutorials/build-a-blazor-app?view=aspnetcore-8.0

关键内容：Razor 组件

1.新建TodoList项目

2.添加 Razor 组件,  Todo.razor，Pages文件夹右键有快捷方式

  组件的文件名首字母大写

3.编写 Todo.razor 组件代码。

修改前

修改后

4.测试访问Todo组件

地址：https://localhost:(端口)/todo

5.添加 TodoItem.cs 类

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

6.再次修改Pages文件夹  Todo.razor

修改 Todo.razor 

@page "/todo"
@rendermode InteractiveServer
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
<ul>
    @foreach(var todo in todos)
    {
        <li>@todo.Title</li>        
    }
</ul>
<input placeholder="待办事项" />
<button @onclick="AddTodo">添加</button>
@code {
    private List<TodoItem> todos = new();
    private void AddTodo()
    {
        // 添加点击后事件     
    }
}

运行结果

7.添加断点调试，测试断点

单击-添加

命中断点

7.完善 Todo.razor 

 Todo.razor  添加和使用newTodo属性

8.运行测试代码

9.添加组件导航

添加代码

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

运行结果

总结：

做了一下修改

1.添加 Todo.razor  组件

@page "/todo"
@rendermode InteractiveServer
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
<ul>
    @foreach(var todo in todos)
    {
        <li>@todo.Title</li>        
    }
</ul>
<input placeholder="待办事项" @bind="newTodo" />
<button @onclick="AddTodo">添加</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;
        }
    }
}

2.添加 TodoItem.cs 类

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

3.修改 NavMenu.razor 组件

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