4、Blazor Server 官网示例代码解析

一下文章详情主要来自官方博文：生成Blazor示例

创建示例类：

   public class TodoItem

    {

        public string Title { get; set; }

        public bool IsDone { get; set; }

    }

创建Razor组件：

@page "/todo"

@using Blazor_Server.Data  //上述类的结构

<h3>ToDo</h3>

<ul>

    @foreach (var todo in todos)    //循环脚本，生成<li>数据

    {

        <li>"Hello"+@todo.Title</li>    //加载绑定的数据

    }

</ul>

<input placeholder="Something todo" @bind="newTodo" />  //输入框使用@bind绑定数据，提交时使用

<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;

        }

    }

}