blazor EF core 数据库实现前端下拉选择物品类别

使用 EF Core 和 Blazor 实现设备类别关联修改

使用efcore和blazor连接数据库，数据库有两个表，一个设备，一个类别，设备通过一个整数关联到类别表。

类别表有类别id、类别名称两个字段，设备有设备id、设备名、类别id字段。

在前端展示所有的设备，其类别显示为一个下拉框，我可以通过下拉框改变设备的类别，并通过按钮保存。

创建数据模型

在Models文件夹下创建Category.cs和Device.cs文件。

Category.cs

namespace YourNamespace.Models
{
    public class Category
    {
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
    }
}

Device.cs

namespace YourNamespace.Models
{
    public class Device
    {
        public int DeviceId { get; set; }
        public string DeviceName { get; set; }
        // 关键：CategoryId 和 Category
        public int CategoryId { get; set; }
        public Category Category { get; set; }
    }
}

Blazor 组件

<table class="table">
    <thead>
        <tr>
            <th>设备名</th>
            <th>类别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        
@foreach (var device in devices)
        {
            <tr>
                <td>@device.DeviceName</td>
                <td>
                    <select @bind-value="device.CategoryId">
@foreach (var category in categories)
                        {
                            <option value="@category.CategoryId">@category.CategoryName</option>
                        }
                    </select>
                </td>
                <td>
                    <button class="btn btn-primary" @onclick="@(async () => await UpdateExistingEntry(device))">保存</button>
                </td>
            </tr>
        }

    </tbody>
</table>

@code
    {
        private List<DbContext.Category> categories = new();
        private List<DbContext.Device> devices = new();

        protected override void OnInitialized()
        {

            UpdateDeviceList();
        }

        private void UpdateDeviceList()
        {
            using (var db = new ChargeDb())
            {
                // categories
                categories = db.Categories.ToList();
                // devices
                devices = db.Devices.Include(d => d.Category)
                    .ToList();
            }
        }
        
        private async Task UpdateExistingEntry(DbContext.Device device)
        {
            using (var db = new ChargeDb())
            {
                var existingDevice = db.Devices.Include(d => d.Category).FirstOrDefault(d => d.Id == device.Id);

                
                existingDevice.Description = device.Description;
                existingDevice.ImageUrl = device.ImageUrl;
                existingDevice.Name = device.Name;
                existingDevice.CategoryId = device.CategoryId;

                db.SaveChanges();
                Log.Information("Device updated: dev {Id} - cat {CategoryId}", device.Id, device.CategoryId);
            }

            UpdateDeviceList(); // 更新设备列表以显示更改
    }

重点

1. ef core 实体模型在设置 Category 导航属性时，同时设置一个叫 CategoryId 的 int 属性，这样在前端做数据绑定时，绑定这个属性。
2. select 绑定 device 的 CategoryId，select 内部的 option 绑定 category.CategoryId

附：EF Core 命名约定

考虑

public class Blog
{
    public int Id { get; set; }
    public ICollection<Post> Posts { get; } = new List<Post>();
}

public class Post
{
    public int Id { get; set; }
    public int? BlogId { get; set; }
    public Blog? Blog { get; set; }
}

• Blog 类包含一个 ICollection<Post> 类型的 Posts 属性，这表明一个 Blog 可以包含多个 Post，是一对多关系中的 “一” 方。
• Post 类包含一个可空的 int? BlogId 属性和一个可空的 Blog? Blog 属性。BlogId 属性名遵循 EF Core 的外键命名约定，即 [导航属性名][主表主键名]，在这种情况下，导航属性名是 Blog，主表（Blog 类）的主键名是 Id，所以 BlogId 会被 EF Core 自动识别为外键。

完整示例如下

using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

// 定义 Blog 类
public class Blog
{
    public int Id { get; set; }
    public ICollection<Post> Posts { get; } = new List<Post>();
}

// 定义 Post 类
public class Post
{
    public int Id { get; set; }
    public int? BlogId { get; set; }
    public Blog? Blog { get; set; }
}

// 定义数据库上下文类
public class BloggingContext : DbContext
{
    public DbSet<Blog> Blogs { get; set; }
    public DbSet<Post> Posts { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        // 使用 SQLite 数据库，这里可根据实际情况修改连接字符串
        optionsBuilder.UseSqlite("Data Source=blogging.db");
    }
}

class Program
{
    static async Task Main()
    {
        using (var context = new BloggingContext())
        {
            // 创建数据库（如果不存在）
            await context.Database.EnsureCreatedAsync();

            // 创建一个 Blog 实例
            var blog = new Blog();
            context.Blogs.Add(blog);

            // 创建一个 Post 实例并关联到上面的 Blog
            var post = new Post { Blog = blog };
            context.Posts.Add(post);

            // 保存更改到数据库
            await context.SaveChangesAsync();

            // 查询 Post 并验证关联
            var retrievedPost = await context.Posts
               .Include(p => p.Blog)
               .FirstOrDefaultAsync();

            if (retrievedPost != null && retrievedPost.Blog != null)
            {
                System.Console.WriteLine($"Post {retrievedPost.Id} is associated with Blog {retrievedPost.Blog.Id}");
            }
        }
    }
}