如何在ASP.NET Core 2的MVC视图中展示多数据库表数据

嘿，这个需求其实挺常见的，我来一步步给你捋清楚怎么在ASP.NET Core 2的MVC视图里同时展示三张表的数据！

第一步：创建对应表的实体模型 #

首先得给aha、aho、ahi三张表分别建实体类，属性和表字段一一对应：

// Models/Aha.cs
public class Aha
{
    // 如果表有主键记得加上，比如public int Id { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string PhoneNumber { get; set; }
}

// Models/Aho.cs
public class Aho
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

// Models/Ahi.cs
public class Ahi
{
    public string Name { get; set; }
    public DateTime OpenTime { get; set; }
    public DateTime CloseTime { get; set; }
}

第二步：配置数据库上下文（DbContext） #

接下来创建DbContext类，用来和数据库交互，同时指定表名（如果类名和表名不一致的话）：

// Data/ApplicationDbContext.cs
public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
    {
    }

    // 声明对应三张表的DbSet
    public DbSet<Aha> Aha { get; set; }
    public DbSet<Aho> Aho { get; set; }
    public DbSet<Ahi> Ahi { get; set; }

    // 配置表名和实体的映射
    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<Aha>().ToTable("aha");
        modelBuilder.Entity<Aho>().ToTable("aho");
        modelBuilder.Entity<Ahi>().ToTable("ahi");
    }
}

然后在appsettings.json里配置连接字符串，指向你的a数据库：

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=a;Trusted_Connection=True;MultipleActiveResultSets=true"
    // 要是用其他数据库（比如MySQL），换成对应的连接字符串就行
  }
}

第三步：注册DbContext到服务容器 #

在Startup.cs的ConfigureServices方法里，把DbContext注册到依赖注入容器：

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();

    // 注册DbContext，用SQL Server作为数据库提供者
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
}

第四步：创建ViewModel打包数据 #

因为要在同一个视图里展示三个表的数据，咱们得搞个ViewModel来统一封装这些数据——总不能把三个单独的模型传给视图吧，那样太麻烦了：

// ViewModels/ThreeTablesViewModel.cs
public class ThreeTablesViewModel
{
    // 如果你要展示单个记录，用这些属性
    public Aha AhaRecord { get; set; }
    public Aho AhoRecord { get; set; }
    public Ahi AhiRecord { get; set; }

    // 要是想展示列表，就改成集合类型：
    // public IEnumerable<Aha> AhaRecords { get; set; }
    // public IEnumerable<Aho> AhoRecords { get; set; }
    // public IEnumerable<Ahi> AhiRecords { get; set; }
}

第五步：控制器查询数据并传给视图 #

在控制器里（比如HomeController），通过依赖注入拿到DbContext，查询三张表的数据，赋值给ViewModel，再传给视图：

public class HomeController : Controller
{
    private readonly ApplicationDbContext _context;

    // 构造函数注入DbContext
    public HomeController(ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult Index()
    {
        var viewModel = new ThreeTablesViewModel
        {
            // 这里假设取每个表的第一条记录，你可以根据业务需求改成Where条件查询
            AhaRecord = _context.Aha.FirstOrDefault(),
            AhoRecord = _context.Aho.FirstOrDefault(),
            AhiRecord = _context.Ahi.FirstOrDefault()

            // 如果是列表的话，改成ToList()：
            // AhaRecords = _context.Aha.ToList(),
            // AhoRecords = _context.Aho.ToList(),
            // AhiRecords = _context.Ahi.ToList()
        };

        return View(viewModel);
    }
}

第六步：视图展示数据 #

最后创建强类型视图，绑定咱们的ViewModel，按照你要的HTML结构输出数据：

@model YourNamespace.ViewModels.ThreeTablesViewModel

<html>
    <!-- 展示Aha表的数据 -->
    @if (Model.AhaRecord != null)
    {
        <div>@Model.AhaRecord.Name</div>
        <div>@Model.AhaRecord.Address</div>
        <div>@Model.AhaRecord.PhoneNumber</div>
    }

    <!-- 展示Aho表的数据 -->
    @if (Model.AhoRecord != null)
    {
        <div>@Model.AhoRecord.Id</div>
        <div>@Model.AhoRecord.Name</div>
        <div>@Model.AhoRecord.Price</div>
    }

    <!-- 展示Ahi表的数据 -->
    @if (Model.AhiRecord != null)
    {
        <div>@Model.AhiRecord.Name</div>
        <div>@Model.AhiRecord.OpenTime.ToString("yyyy-MM-dd HH:mm")</div>
        <div>@Model.AhiRecord.CloseTime.ToString("yyyy-MM-dd HH:mm")</div>
    }
</html>

要是你要展示列表的话，把视图里的代码改成foreach循环就行，比如：

@foreach (var aha in Model.AhaRecords)
{
    <div>@aha.Name</div>
    <div>@aha.Address</div>
    <div>@aha.PhoneNumber</div>
    <hr />
}

这样就能在同一个视图里展示三张表的数据啦！

内容的提问来源于stack exchange，提问作者Bình An Lê