【3】Blazor链接数据库

一、引入Nuget包

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

二、添加链接字符串

在文件appsetting.Json中添加ConnectionStrings配置信息

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=MyDatabase;Trusted_Connection=True;"
  },
  "AllowedHosts": "*"
}

三、创建DbContext

添加UserInfo的Model类

    public class UseInfo
    {
        public int Id {  get; set; }
        public string Name { get; set; }
        public int Age {  get; set; }
    }

添加TrendSimulationDbContext 数据库上下文类

public class TrendSimulationDbContext : DbContext
{
    public TrendSimulationDbContext(DbContextOptions<TrendSimulationDbContext> options) : base(options)
    {

    }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
       
    }
    public DbSet<UseInfo> UserInfos { get; set; }
}

四、注入SqlServer数据库

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.EntityFrameworkCore;
using TrendSimulation;
using TrendSimulation.Data;

var builder = WebApplication.CreateBuilder(args);

//查找配置信息
IConfiguration configuration = new ConfigurationBuilder().SetBasePath(Environment.CurrentDirectory).AddJsonFile("appsettings.json").Build();

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

//注入数据库，通过configuration 获取连接字符串配置信息
builder.Services.AddDbContext<TrendSimulationDbContext>(options => options.UseSqlServer(configuration.GetConnectionString("DefaultConnection")));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}


app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

五、执行数据库迁移

打开控制台

执行迁移命令

 Add-Migration Init
 Update-database

六、创建用户信息页面

接口

 public interface IUserInfoService
 {
     public void Add(UseInfo useInfo);
     public void Update(UseInfo useInfo);
     public void Delete(UseInfo useInfo);
     public Task<UseInfo> Get(string name);
     public Task<List<UseInfo>> First();
 }

实现用户信息的CRUD

public class UserInfoSerivce : IUserInfoService
{
    public TrendSimulationDbContext _DbContext;
    public UserInfoSerivce(TrendSimulationDbContext Context) 
    {
        _DbContext = Context;
    }
    public void Add(UseInfo useInfo)
    {
        _DbContext.Add(useInfo);
        _DbContext.SaveChanges();
    }

    public void Delete(UseInfo useInfo)
    {
        _DbContext.Add(useInfo);
        _DbContext.SaveChanges();
    }

    public async Task<UseInfo> Get(string name)
    {
        return await _DbContext.UserInfos.FirstOrDefaultAsync(x => x.Name == "张三");
    }
    public async Task<List<UseInfo>> First()
    {
        return await _DbContext.UserInfos.ToListAsync();
    }
    public void Update(UseInfo useInfo)
    {
        _DbContext.Add(useInfo);
        _DbContext.SaveChanges();
    }
}

在Program中注入服务

builder.Services.AddScoped<IUserInfoService,UserInfoSerivce>();

创建Razor页面

User.razor

@page "/user"
@{
}
//依赖注入UserInfoSerivce服务
@inject IUserInfoService UserInfoSerivce
@using TrendSimulation.Interface
@using TrendSimulation.Service
@using TrendSimulation.Model
<div>
    <label for="userInput">Enter something:</label>
    //绑定属性
    <input id="userName" @bind="userName" />
    <input id="userAge" @bind="userAge" />
</div>
<div>
    <button @onclick="Submit">Submit</button>
</div>

@if (useInfo == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>NAME</th>
                <th>AGE</th>
               
            </tr>
        </thead>
        <tbody>
        	//打印插入的用户数据
            @foreach (var forecast in useInfo)
            {
                <tr>
                    <td>@forecast.Name</td>
                    <td>@forecast.Age</td>
                  
                </tr>
            }
        </tbody>
    </table>
}
@code {
    private string userName = string.Empty;
    private int userAge ;


    private List<UseInfo> useInfo;
    private async void Submit()
    {
        UserInfoSerivce.Add(new UseInfo { Age = userAge, Name = userName });
    }
    //初始化，查询用户列表
    protected override async Task OnInitializedAsync()
    {
        useInfo = (await UserInfoSerivce.First()) is null ? new List<UseInfo>() : (await UserInfoSerivce.First());
    }
}

七、结果展示