使用Blazor生成Web应用
1.创建并运行Blazor Web应用
VS2022 => 创建新项目 => Blazor Server应用 => 下一步 => 框架 ： .NET 6.0(长期支持) => 创建
Ctrl+F5 运行
2.添加组件
Pages/Index.razor文件末尾添加<counter />元素，向页面添加Counter组件。
例：
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Counter />
Ctrl+F5 运行 查看结果 ：
Home页面下方多出计数器功能
3.修改组件
修改 Pages/Counter.razor文件中的代码：
使用 [Parameter]特性为IncrementAmount添加公共属性
例 ：
[
更改IncrementCount方法以在currentCount的值递增时使用IncrementAmount
例 ：
private void IncrementCount()
{
currentCount += IncrementAmount;
}
修改 Pages/Index.razor文件中的代码 ：
<Counter IncrementAmount="10" />
Ctrl+F5 运行 查看结果 ：
Home页面下方 计数器功能 每次计数器值递增 10
4.数据绑定和事件
创建Todo页面
右键Pages文件夹 => 添加 => Razor组件 => 重命名为“Todo.razor” => 添加
打开Todo.razor组件，在文件顶部添加Razor指令@page，其相对URL为/todo
保存所做更改
将Todo组件添加到导航栏
NavMenu组件用于应用的布局
在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>
保存更改
Ctrl+F5 运行 查看结果 ：
导航栏上有了 Todo 条目
创建Todo项
在项目的根目录（BlazorApp 文件夹）中创建一个名为 TodoItem.cs 的新文件，用于保存表示待办事项的 C# 类。
为 TodoItem 类使用以下 C# 代码。 通过使用 ? 将 Title 声明为可为空字符串。
public class TodoItem
{
public string? Title { get; set; }
public bool IsDone { get; set; } = false;
}
绑定TodoItem列表
对Pages/Todo.razor文件进行更改：
在@code块中为代办项添加一个字段。Todo组件使用此字段来维护代办项列表的状态。
添加无序列表标记和foreach循环，以将每个代办项呈现为列表项。
例 ： @page "/todo"
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
@code {
private List<TodoItem> todos = new();
}
添加窗体元素来创建Todo
在未排序列表 (<ul>...</ul>) 下方添加一个文本输入 (<input>) 和一个按钮 (<button>)：
<input placeholder="Something todo" />
<button>Add todo</button>
向Todo组件添加AddTodo方法，并使用@onclick属性注册该方法来选择按钮，选择按钮时，会调用AddtodoC#方法：
例 ： <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字符串：
@code {
private List<TodoItem> todos = new();
private string? newTodo;
private void AddTodo()
{
// Todo: Add the todo
}
}
修改<input>元素，将newTodo与@bind属性进行绑定：
<input placeholder="Something todo" @bind="newTodo" />
更新AddTodo方法，将具有指定标题的TodoItem添加为列表。通过将newTodo设置为空字符串来清除文本输入的值：
private void AddTodo()
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem{Title = newTodo });
newTodo = string.Empty;
}
}
为每个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>
更新<h3>标头，显示尚未完成的代办项数目(IsDone是false)：
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
保存更改，Ctrl+F5运行，添加项，编辑项进行组件测试。
