网站后台管理模板psd,网站空间和云主机,wordpress 浏览数,qq公众平台【Blazor】| 总结/Edison Zhou大家好#xff0c;我是Edison。最近在学习Blazor做全栈开发#xff0c;因此根据老习惯#xff0c;我会将我的学习过程记录下来#xff0c;一来体系化整理#xff0c;二来作为笔记供将来翻看。本篇#xff0c;我们通过一个简单的Todo示例应用…【Blazor】| 总结/Edison Zhou大家好我是Edison。最近在学习Blazor做全栈开发因此根据老习惯我会将我的学习过程记录下来一来体系化整理二来作为笔记供将来翻看。本篇我们通过一个简单的Todo示例应用来介绍如何实现基础的数据绑定和事件。添加Todo组件在Pages目录下新增一个Razor组件命名Todo.razorpage /todoh3Todo/h3code {}将Todo组件添加到导航栏我们知道在Shared目录下的NavMenu组件用于应用的导航因此我们需要将Todo组件加进去以便可以访问到div classNavMenuCssClass onclickToggleNavMenunav classflex-column...div classnav-item px-3NavLink classnav-link hreftodospan classoi oi-list-rich aria-hiddentrue/span Todo/NavLink/div/nav
/div这时导航栏中也就有Todo了添加Model添加一个Models目录在此目录下新建一个TodoItem类namespace EDT.BlazorServer.App.Models
{public class TodoItem{public string Id { get; set; }public string? Name { get; set; }public bool IsComplete { get; set; }public string? Remark { get; set; }}
}为了模拟实现数据库访问的效果这里我们使用EF Core的内存数据库来模拟。首先添加对Microsoft.EntityFrameworkCore.InMemory的应用。其次在Models目录下创建一个TodoContext类using Microsoft.EntityFrameworkCore;namespace EDT.BlazorServer.App.Models
{public class TodoContext : DbContext{public TodoContext(DbContextOptionsTodoContext options): base(options){}public DbSetTodoItem TodoItems { get; set; }}
}然后在Program.cs中注入这个DbContext// Add database context
builder.Services.AddDbContextTodoContext(opt opt.UseInMemoryDatabase(TodoList));添加种子数据为了方便演示我们提前准备一些SeedData创建一个SeedData的静态类namespace EDT.BlazorServer.App.Models
{public static class SeedData{public static void Initialize(TodoContext db){var todos new TodoItem[]{new TodoItem { Id Guid.NewGuid().ToString(), Name Study Computer Network, IsCompletefalse, Remark Take a Test },new TodoItem { Id Guid.NewGuid().ToString(), Name Study Operation System, IsCompletefalse, Remark Take a Test },new TodoItem { Id Guid.NewGuid().ToString(), Name Study Data Structure, IsCompletefalse, Remark Take a Test },new TodoItem { Id Guid.NewGuid().ToString(), Name Walk the dog, IsCompletetrue, Remark string.Empty },new TodoItem { Id Guid.NewGuid().ToString(), Name Run 5km in 40mins, IsCompletetrue, Remark string.Empty },};db.TodoItems.AddRange(todos);db.SaveChanges();}}
}然后在Program.cs中确保运行这个初始化操作添加Service假设我们所有的TodoItem都是通过Service来完成的不直接在Pages下的组件中来操作。首先创建一个接口ITodoItemServiceusing EDT.BlazorServer.App.Models;namespace EDT.BlazorServer.App.Service.Contracts
{public interface ITodoItemService{TaskIListTodoItem GetTodoItemsAsync();TaskTodoItem GetTodoItemAsync(string id);TaskTodoItem AddTodoItemAsync(TodoItem todoItem);TaskTodoItem UpdateTodoItemAsync(TodoItem todoItem);TaskTodoItem DeleteTodoItemAsync(TodoItem todoItem);}
}这时我们重新启动应用就可以看到Counter组件显示在主页上面了其次实现TodoItemServiceusing EDT.BlazorServer.App.Models;
using EDT.BlazorServer.App.Service.Contracts;
using Microsoft.EntityFrameworkCore;namespace EDT.BlazorServer.App.Service
{public class TodoItemService : ITodoItemService{private readonly TodoContext _todoContext;public TodoItemService(TodoContext todoContext){_todoContext todoContext;}public async TaskTodoItem AddTodoItemAsync(TodoItem todoItem){todoItem.Id Guid.NewGuid().ToString();todoItem.IsComplete false;_todoContext.TodoItems.Add(todoItem);await _todoContext.SaveChangesAsync();return todoItem;}public async TaskTodoItem DeleteTodoItemAsync(TodoItem todoItem){_todoContext.TodoItems.Remove(todoItem);await _todoContext.SaveChangesAsync();return todoItem;}public async TaskTodoItem GetTodoItemAsync(string id){return await _todoContext.TodoItems.FirstOrDefaultAsync(t t.Id id);}public async TaskIListTodoItem GetTodoItemsAsync(){return await _todoContext.TodoItems.ToListAsync();}public async TaskTodoItem UpdateTodoItemAsync(TodoItem todoItem){_todoContext.TodoItems.Update(todoItem);await _todoContext.SaveChangesAsync();return todoItem;}}
}完善Todo组件这里我们仿照FetchData组件添加一个表格 并 实现TodoItem的添加page /todo
using EDT.BlazorServer.App.Models
using EDT.BlazorServer.App.Service.Contracts
inject ITodoItemService todoItemService;h3Todo (todos.Count(todo !todo.IsComplete))/h3if (todos null)
{pemLoading.../em/p
}
else
{table classtabletheadtrthId/ththName/ththIsComplete/ththRemark/th/tr/theadtbodyforeach (var todo in todos){trtdtodo.Id.ToString()/tdtdtodo.Name/tdtdinput typecheckbox bindtodo.IsComplete //tdtdtodo.Remark/td/tr}/tbody/table
}input placeholderTodo Item Name (Necessary) bindnewTodoItemName /
input placeholderTodo Item Remark (Optioinal) bindnewTodoItemRemark /
button onclickAddTodoAdd todo/buttoncode {private IListTodoItem todos;private string? newTodoItemName;private string? newTodoItemRemark;protected override async Task OnInitializedAsync(){todos await todoItemService.GetTodoItemsAsync();}private async void AddTodo(){if (string.IsNullOrWhiteSpace(newTodoItemName))return;var todoItem new TodoItem { Name newTodoItemName, Remark newTodoItemRemark };await todoItemService.AddTodoItemAsync(todoItem);// Clear TextboxesnewTodoItemName newTodoItemRemark string.Empty;// Refresh Todostodos await todoItemService.GetTodoItemsAsync();}
}需要注意的是1通过injec指令进行Service的注入和常见的构造函数注入不同。2通过重写OnInitializeAsync事件进行数据的初始化即从数据库中读取TodoItem的列表。这部分属于Blazor组件的生命周期范畴这里不过多纠结即可。唯一需要了解的是OnInitialized 和 OnInitializeAsync 事件是在做组件的初始化它发生在参数注入完成之后这里的ITodoItemService就是注入的参数。3除了foreachBlazor还包含其他循环指令例如 for、while 和 do while。这些指令返回重复的标记块。它们的工作方式与等效的 C# for、while 和 do...while 循环类似。到此最终的项目结构如下图所示运行效果运行起来的效果如下图所示1加载Todo列表2添加新的Todo事项小结本篇我们实现了一个Todo应用。下一篇我们学习一下在Blazor中数据是如何被共享的。参考资料Microsoft Docs《使用Blazor生成Web应用》年终总结Edison的2021年终总结数字化转型我在传统企业做数字化转型C#刷题C#刷剑指Offer算法题系列文章目录.NET面试.NET开发面试知识体系.NET大会2020年中国.NET开发者大会PDF资料
