MVC中从PostgreSQL取数生成FileType与Genre下拉列表实现咨询

1. 扩展视图模型 #

首先给FileUploadViewModel新增下拉列表需要的选中值、数据源属性：

using Microsoft.AspNetCore.Mvc.Rendering; // 需要引入此命名空间

public class FileUploadViewModel
{
    public List<FileModel> Files { get; set; }
    public string Name { get; set; }
    public string Extension { get; set; }
    public string Description { get; set; }
    public string Author { get; set; }
    public string Year { get; set; }
    public string FilePath { get; set; }
    public string PublishedOn { get; set; }
    public int DownloadCounter { get; set; }

    // 新增：下拉框选中值存储
    public int SelectedFileTypeId { get; set; }
    public int SelectedGenreId { get; set; }
    // 新增：下拉框选项数据源
    public IEnumerable<SelectListItem> FileTypeOptions { get; set; }
    public IEnumerable<SelectListItem> GenreOptions { get; set; }
}

2. 控制器装填下拉数据源 #

在返回上传视图的GET接口中，从PostgreSQL数据库查询数据，组装为下拉选项：

// 假设你的数据库上下文实例为_context
public IActionResult Upload()
{
    var viewModel = new FileUploadViewModel();
    // 装填文件类型下拉选项
    viewModel.FileTypeOptions = _context.FileTypes
        .Select(f => new SelectListItem
        {
            Value = f.Id.ToString(),
            Text = f.Name
        }).ToList();
    // 装填全量流派下拉选项，如果需要联动效果这里可以先赋值为空列表
    viewModel.GenreOptions = _context.Genres
        .Select(g => new SelectListItem
        {
            Value = g.Id.ToString(),
            Text = g.Name
        }).ToList();
    return View(viewModel);
}

3. 视图渲染下拉列表 #

使用ASP.NET Core Tag Helper直接渲染下拉框，无需手动拼接HTML：

@model FileUploadViewModel

<!-- 原有表单内容省略 -->
<div class="form-group">
    <label>文件类型</label>
    <select asp-for="SelectedFileTypeId" asp-items="Model.FileTypeOptions" class="form-control">
        <option value="">请选择文件类型</option>
    </select>
</div>

<div class="form-group">
    <label>流派</label>
    <select asp-for="SelectedGenreId" asp-items="Model.GenreOptions" class="form-control">
        <option value="">请选择流派</option>
    </select>
</div>
<!-- 提交按钮等其他内容省略 -->

可选：实现文件类型-流派联动 #

如果需要选中文件类型后才加载对应关联的流派，添加以下JS代码和对应接口即可：

1. 视图新增JS逻辑

document.getElementById('SelectedFileTypeId').addEventListener('change', function() {
    const fileTypeId = this.value;
    const genreSelect = document.getElementById('SelectedGenreId');
    // 清空现有选项
    genreSelect.innerHTML = '<option value="">请选择流派</option>';
    
    if (!fileTypeId) return;
    
    // 请求对应文件类型的流派数据
    fetch(`/GetGenresByFileTypeId?fileTypeId=${fileTypeId}`)
        .then(res => res.json())
        .then(genres => {
            genres.forEach(g => {
                const option = document.createElement('option');
                option.value = g.id;
                option.text = g.name;
                genreSelect.appendChild(option);
            });
        });
});

2. 控制器新增查询接口

public IActionResult GetGenresByFileTypeId(int fileTypeId)
{
    var genres = _context.Genres
        .Where(g => g.FileTypeID == fileTypeId)
        .Select(g => new { g.Id, g.Name })
        .ToList();
    return Json(genres);
}

表单提交后，直接从FileUploadViewModel的SelectedFileTypeId和SelectedGenreId即可获取用户选中的两个值，用于后续业务处理。

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