使用Bootstratp Blazor +EF Codefirst 愉快的增删改查！

Bootstratp Blazor组件库，功能多，例子多，前端小白，js小白的最佳方案！几乎不用写一行js代码。

现在我们使用他的Table组件来完成一次增删改查！

首先安装vs2019 最新版本。

1.创建新项目，选择Blazor应用！

2.我们选择Server应用，我建议小白最好从Server应用开始练手，

3.引用我们需要使用的包！如下

BootstrapBlazor
Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools

4.创建好了，我们先来创建一个Model

 public class UserInfo
    {
        [Key]
        public int Id { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }

        public string PhoneNum { get; set; }
    }

5.创建DbContext,关于Dispose，建议看Bootstrap Blazor作者在B发的视频，方便你理解为什么要这么做！

https://www.bilibili.com/video/BV14y4y117n8

建议关注作者的B站账号，他随时会发一些视频教程，这个EF Core的注意事项也是我在群里咨询问题时，他主动提出录个视频讲解一下这个问题的！

public class MyDbContext:DbContext
    {
        
        public MyDbContext(DbContextOptions options) : base(options)
        {
        }
        public DbSet<UserInfo> UserInfos { get; set; }

        public override void Dispose()
        {
            base.Dispose();
        }
        public override ValueTask DisposeAsync()
        {
            return base.DisposeAsync();
        }
    }

　　6.在Startup.cs中注入DbContext。

注意，这里必须使用 AddDbContextFactory来注入，不然会报DbContext线程错误，就是上一步视频里面说的问题！

services.AddBootstrapBlazor();//顺便把BootstrapBlazor注入了
          services.AddDbContextFactory<MyDbContext>(opt =>
                opt.UseSqlServer($"Data Source=.;Initial Catalog=Demo;User ID=sa;Password=123456"));

　　7.创建数据库，先在PM控制台执行。

Add-Migration newSQL

成功后，再执行

update-database newSQL

8.添加命名空间到 _Imports.razor 文件

@using BootstrapBlazor.Components

　　9.将 Bootstrap 的 CSS 文件以 <link> 标签的形式添加到 Pages/_Host.cshtml 文件 <head> 标签中，并放置在所有其它样式表之前,建议删除由模板创建的默认的 Bootstrap 样式链接

<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

　　10.Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <script> 标签放到 Pages/_Host.cshtml 文件尾部且在 </body> 标签之前即可起作用。

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

　　11.在Pages文件夹下增加User.razor文件，内容如下！

组件加载时，会自动调用 OnQueryAsync="@OnEditQueryAsync" 这个方法，所以数据加载就是查询方法！

@page "/user"
@using BlazorDemoCURD.Models
@using Microsoft.EntityFrameworkCore;
@using BlazorDemoCURD.DataBase
@implements IDisposable
  @*Dispose接口实现，才能每个组件结束时关闭DbContext线程*@
@inject IDbContextFactory<MyDbContext> DbFactory 
  @*注入DbContext*@

<Table TItem="UserInfo"
       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" />
        <TableColumn @bind-Field="@context.Age" />
        <TableColumn @bind-Field="@context.PhoneNum" />
    </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.PhoneNum" placeholder="不可为空，50字以内" maxlength="50">
                        <RequiredValidator />
                        <StringLengthValidator Length="50" />
                    </BootstrapInput>
                </div>
            </div>
        </div>
    </EditTemplate>
</Table>


@code {
    private MyDbContext Context { get; set; } 

    protected override async Task OnInitializedAsync()//这里相当于是构造方法
    {
        Context = DbFactory.CreateDbContext();
        await base.OnInitializedAsync();
    }

    

    protected async Task<UserInfo> OnAddAsync()   
    {
        return await Task.FromResult(new UserInfo());
    }


    protected async Task<bool> OnSaveAsync(UserInfo item)
    {
        //数据保存
        await Context.AddAsync(item);
        await Context.SaveChangesAsync();
        return await Task.FromResult(true);
    }

    protected async Task<bool> OnDeleteAsync(IEnumerable<UserInfo> items)
    {//这里删除方法，没有写
        return await Task.FromResult(true);
    }

    protected async Task<QueryData<UserInfo>> OnEditQueryAsync(QueryPageOptions options)
    {
        var query = Context.UserInfos;
        var ret = new QueryData<UserInfo>()
        {
            TotalCount = query.Count(),
            Items = query
        };
        return await Task.FromResult(ret);
    }

    protected Task OnResetSearchAsync(UserInfo item)
    {
        item.Name = "";
        item.PhoneNum = "";
        return Task.CompletedTask;
    }

    //释放DbContext
    public void Dispose()
    {
        Context.Dispose();
    }
}

这样一个简单好看的增删改查就完成了！

　关于Bootstrap Blazor的更多用法，请去官方查看 https://www.blazor.zone/

源码上传到码云了 https://gitee.com/kismet82/blazor-demo-curd

这个例子我得感谢BootstrapAdmin & Blazor QQ群（795206915）几位群主，副群主，假管理等人的帮助，没有他们的耐心讲解。这个DEMO完成不了

最后，如果能不用ef，用其他orm，也不会这么麻烦了。

posted @ 2021-01-24 19:47 kismet82 阅读(2094) 评论(0) 收藏举报

刷新页面返回顶部

kismet82

使用Bootstratp Blazor +EF Codefirst 愉快的增删改查！

公告