基于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

有问题的话请留言

 

      待续......

 

posted @   魔术人生  阅读(1463)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2021-09-15 递归二级联动前后台使用方法
复制代码
点击右上角即可分享
微信分享提示