【3】Blazor链接数据库

一、引入Nuget包

1. Microsoft.EntityFrameworkCore
2. Microsoft.EntityFrameworkCore.SqlServer
3. Microsoft.EntityFrameworkCore.Tools

复制代码

二、添加链接字符串

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

1. {
2.   "Logging": {
3.     "LogLevel": {
4.       "Default": "Information",
5.       "Microsoft.AspNetCore": "Warning"
6.     }
7.   },
8.   "ConnectionStrings": {
9.     "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=MyDatabase;Trusted_Connection=True;"
10.   },
11.   "AllowedHosts": "*"
12. }

复制代码

三、创建DbContext

   添加UserInfo的Model类

1.     public class UseInfo
2.     {
3.         public int Id {  get; set; }
4.         public string Name { get; set; }
5.         public int Age {  get; set; }
6.     }

复制代码

  添加TrendSimulationDbContext 数据库上下文类

1. public class TrendSimulationDbContext : DbContext
2. {
3.     public TrendSimulationDbContext(DbContextOptions<TrendSimulationDbContext> options) : base(options)
4.     {
6.     }
8.     protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
9.     {
10.       
11.     }
12.     public DbSet<UseInfo> UserInfos { get; set; }
13. }

复制代码

四、注入SqlServer数据库

1. using Microsoft.AspNetCore.Components;
2. using Microsoft.AspNetCore.Components.Web;
3. using Microsoft.EntityFrameworkCore;
4. using TrendSimulation;
5. using TrendSimulation.Data;
7. var builder = WebApplication.CreateBuilder(args);
9. //查找配置信息
10. IConfiguration configuration = new ConfigurationBuilder().SetBasePath(Environment.CurrentDirectory).AddJsonFile("appsettings.json").Build();
12. builder.Services.AddRazorPages();
13. builder.Services.AddServerSideBlazor();
14. builder.Services.AddSingleton<WeatherForecastService>();
16. //注入数据库，通过configuration 获取连接字符串配置信息
17. builder.Services.AddDbContext<TrendSimulationDbContext>(options => options.UseSqlServer(configuration.GetConnectionString("DefaultConnection")));
19. var app = builder.Build();
21. // Configure the HTTP request pipeline.
22. if (!app.Environment.IsDevelopment())
23. {
24.     app.UseExceptionHandler("/Error");
25. }
28. app.UseStaticFiles();
30. app.UseRouting();
32. app.MapBlazorHub();
33. app.MapFallbackToPage("/_Host");
35. app.Run();

复制代码

五、实验数据库迁移

   打开控制台
  

   实验迁移命令

1. Add-Migration Init
2. Update-database

复制代码

六、创建用户信息页面

   接口

1. public interface IUserInfoService
2. {
3.      public void Add(UseInfo useInfo);
4.      public void Update(UseInfo useInfo);
5.      public void Delete(UseInfo useInfo);
6.      public Task<UseInfo> Get(string name);
7.      public Task<List<UseInfo>> First();
8. }

复制代码

  实现用户信息的CRUD

1. public class UserInfoSerivce : IUserInfoService
2. {
3.     public TrendSimulationDbContext _DbContext;
4.     public UserInfoSerivce(TrendSimulationDbContext Context)
5.     {
6.         _DbContext = Context;
7.     }
8.     public void Add(UseInfo useInfo)
9.     {
10.         _DbContext.Add(useInfo);
11.         _DbContext.SaveChanges();
12.     }
14.     public void Delete(UseInfo useInfo)
15.     {
16.         _DbContext.Add(useInfo);
17.         _DbContext.SaveChanges();
18.     }
20.     public async Task<UseInfo> Get(string name)
21.     {
22.         return await _DbContext.UserInfos.FirstOrDefaultAsync(x => x.Name == "张三");
23.     }
24.     public async Task<List<UseInfo>> First()
25.     {
26.         return await _DbContext.UserInfos.ToListAsync();
27.     }
28.     public void Update(UseInfo useInfo)
29.     {
30.         _DbContext.Add(useInfo);
31.         _DbContext.SaveChanges();
32.     }
33. }

复制代码

  在Program中注入服务

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

复制代码

  创建Razor页面
  

   User.razor

1. @page "/user"
2. @{
3. }
4. //依赖注入UserInfoSerivce服务
5. @inject IUserInfoService UserInfoSerivce
6. @using TrendSimulation.Interface
7. @using TrendSimulation.Service
8. @using TrendSimulation.Model
9. <div>
10.     <label for="userInput">Enter something:</label>
11.     //绑定属性
12.     <input id="userName" @bind="userName" />
13.     <input id="userAge" @bind="userAge" />
14. </div>
15. <div>
16.     <button @onclick="Submit">Submit</button>
17. </div>
19. @if (useInfo == null)
20. {
21.     <p><em>Loading...</em></p>
22. }
23. else
24. {
25.     <table class="table">
26.         <thead>
27.             <tr>
28.                 <th>NAME</th>
29.                 <th>AGE</th>
30.                
31.             </tr>
32.         </thead>
33.         <tbody>
34.                 //打印插入的用户数据
35.             @foreach (var forecast in useInfo)
36.             {
37.                 <tr>
38.                     <td>@forecast.Name</td>
39.                     <td>@forecast.Age</td>
40.                   
41.                 </tr>
42.             }
43.         </tbody>
44.     </table>
45. }
46. @code {
47.     private string userName = string.Empty;
48.     private int userAge ;
51.     private List<UseInfo> useInfo;
52.     private async void Submit()
53.     {
54.         UserInfoSerivce.Add(new UseInfo { Age = userAge, Name = userName });
55.     }
56.     //初始化，查询用户列表
57.     protected override async Task OnInitializedAsync()
58.     {
59.         useInfo = (await UserInfoSerivce.First()) is null ? new List<UseInfo>() : (await UserInfoSerivce.First());
60.     }
61. }

复制代码

七、结果展示

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。