如何在ASP.NET Core 6 MVC Razor页面实现文件名填充下拉框？

需求背景：
此需求用于ASP.NET Core 6 MVC应用中，目前已手动实现下拉框，但需要读取文件夹中的文件名并自动填充到下拉框中。

现有手动实现代码：

<dd class="col-sm-10">
    <select name="PHOTO1" id="PHOTO1" class="form-control">
        <option value="USA">USA</option>
        <option value="UK">UK</option>
        <option value="Japan">Japan</option>
        <option value="France">France</option>
    </select>
    <span asp-validation-for="PHOTO1" class="text-danger"></span>
</dd>

实现步骤 #

1. 后端控制器读取文件名

在对应的控制器Action中，读取目标文件夹的文件名并传递给视图：

using System.IO;
using System.Linq;

public IActionResult YourActionName()
{
    // 配置目标文件夹路径，示例为wwwroot下的photos文件夹
    string folderPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "photos");
    
    // 获取文件夹内所有文件名（可按需过滤文件类型）
    var fileNames = Directory.GetFiles(folderPath)
                             .Select(file => Path.GetFileName(file))
                             // 可选：只保留png格式文件
                             // .Where(name => name.EndsWith(".png", StringComparison.OrdinalIgnoreCase))
                             .ToList();
    
    // 通过ViewBag将文件名列表传递给视图
    ViewBag.PhotoFiles = fileNames;
    return View();
}

2. 前端视图动态生成下拉框

替换原有手动下拉框代码，使用以下两种方式之一：

方式一：使用Select Tag Helper（推荐）

<dd class="col-sm-10">
    <select name="PHOTO1" id="PHOTO1" class="form-control" asp-items="@(new SelectList(ViewBag.PhotoFiles))">
        <option value="">请选择图片</option>
    </select>
    <span asp-validation-for="PHOTO1" class="text-danger"></span>
</dd>

方式二：手动循环生成选项

<dd class="col-sm-10">
    <select name="PHOTO1" id="PHOTO1" class="form-control">
        <option value="">请选择图片</option>
        @foreach (var fileName in ViewBag.PhotoFiles)
        {
            <option value="@fileName">@fileName</option>
        }
    </select>
    <span asp-validation-for="PHOTO1" class="text-danger"></span>
</dd>

注意事项 #

• 确保目标文件夹存在，且应用程序拥有该文件夹的读取权限
• 部署到IIS时，需给应用程序池对应的用户分配文件夹读取权限
• 若文件名包含特殊字符，需注意编码处理

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