基于Blazor Server+EF Core+Bootstratp Blazor 进行的基本增删改查
本次使用Vs2022+.net 6
一、创建项目使用Blazor Server
二、引用以下的安装包
1 2 3 4 | BootstrapBlazor Microsoft.EntityFrameworkCore Microsoft.EntityFrameworkCore.SqlServer Microsoft.EntityFrameworkCore.Toolss |
三、创建一个Model类
1 2 3 4 5 6 7 8 9 10 11 12 | [Table( "SKModel" )] public class SKModel { [Key] public int Id { get ; set ; } public string Name { get ; set ; } public int Age { get ; set ; } public string Address { get ; set ; } } |
四、创建一个DBContext
1 2 3 4 5 6 7 | public class DbContext:DbContext { public DbContext(DbContextOptions options) : base (options) { } public DbSet<SKModel> SKModels { get ; set ; } } |
五、在Program.cs中进行注入
1 2 3 4 5 6 | //把BootstrapBlazor注入了 builder.Services.AddBootstrapBlazor(); //上下文注入 builder.Services.AddDbContextFactory<DbContext>(opt => //链接数据库 opt.UseSqlServer($ "Data Source=.;Initial Catalog=SKBlazor;User ID=sa;Password=123456" )); |
六、进行迁移
先在控制台执行 进行创建数据库
Add-Migration SQL1
成功后在执行
update-database newSQL
七、在_Imports.razor引用
1 | @ using BootstrapBlazor.Components |
八、在Pages中_Layout.cshtml里进行替换
1 2 3 | <!-- 需引用 BootstrapBlazor.FontAwesome 包 !--> <link href= "_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel= "stylesheet" > <link href= "_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel= "stylesheet" > |
1 2 | @*新添加的*@ <script src= "_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" ></script> |
九、在Pages文件夹下增加User.razor文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | @page "/user" @ using BlazorSKP.Model @ using Microsoft.EntityFrameworkCore; @ using BlazorSKP.Dal @implements IDisposable @inject IDbContextFactory<DbContext> DbFactory <Table TItem= "SKModel" IsPagination= "true" IsStriped= "true" IsBordered= "true" IsMultipleSelect= "true" ShowToolbar= "true" ShowExtendButtons= "true" ShowSkeleton= "true" OnQueryAsync= "@OnEditQueryAsync" OnResetSearchAsync= "@OnResetSearchAsync" OnAddAsync= "@OnAddAsync" OnSaveAsync= "@OnSaveAsync" OnDeleteAsync= "@OnDeleteAsync" > <TableColumns> <TableColumn @bind-Field= "@context.Id" Width= "180" /> <TableColumn @bind-Field= "@context.Name" Sortable= "true" Filterable= "true" Text= "名称" /> <TableColumn @bind-Field= "@context.Age" Text= "年龄" /> <TableColumn @bind-Field= "@context.Address" Text= "地址" /> </TableColumns> <EditTemplate> <div class = "form-inline" > <div class = "row" > <div class = "form-group col-12 col-sm-6" > <BootstrapInput @bind-Value= "@context.Name" placeholder= "不可为空,50字以内" maxlength= "50" > <RequiredValidator /> <StringLengthValidator Length= "50" /> </BootstrapInput> </div> <div class = "form-group col-12 col-sm-6" > <BootstrapInput @bind-Value= "@context.Age" placeholder= "不可为空,50字以内" maxlength= "50" > <RequiredValidator /> <StringLengthValidator Length= "50" /> </BootstrapInput> </div> <div class = "form-group col-12 col-sm-6" > <BootstrapInput @bind-Value= "@context.Address" placeholder= "不可为空,50字以内" maxlength= "50" > <RequiredValidator /> <StringLengthValidator Length= "50" /> </BootstrapInput> </div> </div> </div> </EditTemplate> </Table> @code { private DbContext Context { get ; set ; } //这里相当于是构造方法 protected override async Task OnInitializedAsync() { Context = DbFactory.CreateDbContext(); await base .OnInitializedAsync(); } protected async Task<SKModel> OnAddAsync() { return await Task.FromResult( new SKModel()); } protected async Task< bool > OnSaveAsync(SKModel item, ItemChangedType type) { if (type==ItemChangedType.Add) { //数据保存 await Context.AddAsync(item); await Context.SaveChangesAsync(); return await Task.FromResult( true ); } else { //数据更新 var f = Context.SKModels.OfType<SKModel>().FirstOrDefault(i => i.Id == item.Id); if (f!= null ) { f.Name = item.Name; f.Age = item.Age; f.PhoneNum = item.PhoneNum; } await Context.SaveChangesAsync(); } return await Task.FromResult( true ); } //删除 protected async Task< bool > OnDeleteAsync(IEnumerable<SKModel> items) { items.ToList().ForEach(i => Context.SKModels.Remove(i)); await Context.SaveChangesAsync(); return await Task.FromResult( true ); } //数据显示 protected async Task<QueryData<SKModel>> OnEditQueryAsync(QueryPageOptions options) { var query = Context.SKModels; var ret = new QueryData<SKModel>() { TotalCount = query.Count(), Items = query }; return await Task.FromResult(ret); } protected Task OnResetSearchAsync(SKModel item) { item.Name = "" ; item.Address = "" ; return Task.CompletedTask; } //释放上下文 public void Dispose() { Context.Dispose(); } } |
十、在NavMenu.razor里配置路由
十一、运行起来就完成了增删改查的基本操作
最开始学的时候借鉴了这位大佬的:https://www.cnblogs.com/kismet82/p/14321674.html
这是演示平台地址:https://www.blazor.zone/introduction
有问题的话请留言
待续......
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2021-09-15 递归二级联动前后台使用方法