码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2021-01-26 12:07:26      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:rri   hold   update   关注   不可   上传   context   cte   delete   

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,也不会这么麻烦了。

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

标签:rri   hold   update   关注   不可   上传   context   cte   delete   

原文地址:https://www.cnblogs.com/kismet82/p/14321674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!