一下文章详情主要来自官方博文:生成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;
}
}
}