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，也不會這么麻煩了。