使用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添加公共属性

　　　　　　例 ： 

　　　　　　　　[Parameter]

　　　　　　　　public int IncrementAmount { get; set; } = 1;

　　　　更改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运行，添加项，编辑项进行组件测试。