如何在Razor页面中通过外键动态填充供应商下拉框？

步骤1：在PageModel中获取并准备供应商数据 #

首先在PageModel里注入数据库上下文，在OnGet方法中查询所有供应商，将数据转换为SelectList类型的属性供页面调用。假设你的数据库上下文为AppDbContext，Vendor实体包含VendorId（主键）和VendorName（供应商名称）字段：

public class UploadModel : PageModel
{
    private readonly AppDbContext _dbContext;

    // 存储供应商下拉框的选项集合
    public SelectList VendorOptions { get; set; }

    // 绑定用户选中的供应商ID，提交时自动赋值
    [BindProperty]
    public int SelectedVendorId { get; set; }

    // 构造函数注入数据库上下文
    public UploadModel(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public async Task OnGetAsync()
    {
        // 查询所有供应商，仅取需要的ID和名称字段
        var vendorData = await _dbContext.Vendors
            .Select(v => new { v.VendorId, v.VendorName })
            .ToListAsync();
        
        // 转换为SelectList，指定值为VendorId，显示文本为VendorName
        VendorOptions = new SelectList(vendorData, "VendorId", "VendorName");
    }

    // 文件上传的Post处理方法
    public async Task<IActionResult> OnPostAsync(IFormFile uploadFile)
    {
        if (uploadFile != null && uploadFile.Length > 0)
        {
            // 构建Files实体，将选中的VendorId存入
            var newFile = new File
            {
                VendorId = SelectedVendorId,
                FileName = uploadFile.FileName,
                // 补充其他字段，比如文件存储路径、上传时间等
            };

            _dbContext.Files.Add(newFile);
            await _dbContext.SaveChangesAsync();

            return RedirectToPage("/UploadSuccess");
        }

        // 如果上传失败，重新加载供应商列表并返回页面
        await OnGetAsync();
        return Page();
    }
}

步骤2：在.cshtml页面渲染动态下拉框 #

使用Razor的标签助手，通过asp-items绑定PageModel中的VendorOptions，asp-for绑定SelectedVendorId，这样用户选择名称时，提交的是对应的ID：

<form method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label asp-for="SelectedVendorId">选择供应商</label>
        <select asp-for="SelectedVendorId" asp-items="Model.VendorOptions" class="form-control">
            <option value="">请选择供应商</option> <!-- 默认占位选项 -->
        </select>
        <span asp-validation-for="SelectedVendorId" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label>上传文件</label>
        <input type="file" name="uploadFile" class="form-control-file" />
    </div>

    <button type="submit" class="btn btn-primary">确认上传</button>
</form>

核心要点 #

• SelectList转换：把数据库查询结果转为下拉框可识别的结构，确保用户看到名称，后台获取ID。
• BindProperty特性：让SelectedVendorId自动绑定下拉框选中的值，无需手动解析表单数据。
• 表单属性：因为涉及文件上传，必须添加enctype="multipart/form-data"，否则无法正确接收文件。

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