如何用ASP.NET实现基于用户偏好从SQL数据库调取图片的动态网页

1. 统一模型设计 #

既然Jelly和Cakes表结构完全一致，无需单独创建两个模型，直接用一个Dessert类对应表结构即可：

public class Dessert
{
    public int Id { get; set; }
    public string Name { get; set; }
    public byte[] BinaryData { get; set; } // 存储图片二进制数据
}

2. 数据库上下文（连接现有数据库） #

创建EF Core数据库上下文类，连接你的SQL数据库并映射两张表：

using Microsoft.EntityFrameworkCore;

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

    // 映射到数据库的Jelly表
    public DbSet<Dessert> Jellies { get; set; }
    // 映射到数据库的Cakes表
    public DbSet<Dessert> Cakes { get; set; }
}

在appsettings.json中配置数据库连接字符串（替换为你的数据库信息）：

"ConnectionStrings": {
    "DessertDb": "Server=你的服务器名;Database=你的数据库名;Trusted_Connection=True;TrustServerCertificate=True;"
}

在Program.cs中注册数据库上下文：

builder.Services.AddDbContext<DessertDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DessertDb")));

3. 控制器逻辑 #

创建DessertController处理用户选择和数据查询：

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

public class DessertController : Controller
{
    private readonly DessertDbContext _context;

    public DessertController(DessertDbContext context)
    {
        _context = context;
    }

    // 首页：显示用户选择表单
    public IActionResult Index()
    {
        return View();
    }

    // 处理用户选择，返回对应甜点列表
    [HttpPost]
    public async Task<IActionResult> ShowDesserts(string preference)
    {
        List<Dessert> desserts = new List<Dessert>();

        if (preference == "cake")
        {
            desserts = await _context.Cakes.ToListAsync();
        }
        else if (preference == "jelly")
        {
            desserts = await _context.Jellies.ToListAsync();
        }

        return View(desserts);
    }

    // 将二进制图片数据转为可显示的图片
    public IActionResult GetImage(int id, string type)
    {
        Dessert dessert = null;
        if (type == "cake")
        {
            dessert = _context.Cakes.FirstOrDefault(d => d.Id == id);
        }
        else if (type == "jelly")
        {
            dessert = _context.Jellies.FirstOrDefault(d => d.Id == id);
        }

        if (dessert?.BinaryData == null)
        {
            return NotFound();
        }

        // 按实际存储的图片格式调整Content-Type（示例为JPG）
        return File(dessert.BinaryData, "image/jpeg");
    }
}

4. 视图实现 #

首页视图（Views/Dessert/Index.cshtml） #

创建用户偏好选择表单：

@{
    ViewData["Title"] = "选择你的甜点偏好";
}

<h1>你喜欢哪种甜点？</h1>
<form asp-action="ShowDesserts" method="post">
    <div>
        <input type="radio" name="preference" value="cake" id="cake" checked>
        <label for="cake">蛋糕</label>
    </div>
    <div>
        <input type="radio" name="preference" value="jelly" id="jelly">
        <label for="jelly">果冻</label>
    </div>
    <button type="submit">查看甜点</button>
</form>

甜点列表视图（Views/Dessert/ShowDesserts.cshtml） #

展示选中的甜点及图片：

@{
    ViewData["Title"] = "你的甜点列表";
}

<h1>@(Request.Form["preference"] == "cake" ? "蛋糕" : "果冻")列表</h1>

<div class="dessert-grid">
    @foreach (var dessert in Model)
    {
        <div class="dessert-item">
            <h3>@dessert.Name</h3>
            <img src="@Url.Action("GetImage", new { id = dessert.Id, type = Request.Form["preference"] })" 
                 alt="@dessert.Name" 
                 style="width:200px;height:auto;">
        </div>
    }
</div>

<style>
    .dessert-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
    .dessert-item {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        text-align: center;
    }
</style>

注意事项 #

• 确保SQL数据库中Jelly和Cakes表已存在，且图片二进制数据存储格式正确。
• 图片的Content-Type需与实际存储的格式匹配（如PNG用image/png）。

内容的提问来源于stack exchange，提问作者TheCourtJester