如何在Razor页面中将默认文本字段改为下拉选择框

1. 在PageModel中配置下拉选项数据源 #

打开Edit页面对应的Edit.cshtml.cs文件，添加用于存储下拉选项的属性，并在OnGetAsync方法中从数据库拉取选项数据：

using Microsoft.AspNetCore.Mvc.Rendering;
using YourProject.Data; // 替换成你的数据库上下文命名空间

public class EditModel : PageModel
{
    private readonly YourDbContext _context;

    // 存储下拉框选项的集合
    public SelectList DirectionOptions { get; set; } = null!;

    [BindProperty]
    public YourEntityModel TargetModel { get; set; } = null!; // 替换成你的实体模型类

    public EditModel(YourDbContext context)
    {
        _context = context;
    }

    public async Task<IActionResult> OnGetAsync(int id) // 替换成你的主键参数
    {
        // 获取当前需要编辑的实体数据
        TargetModel = await _context.YourEntityTable.FindAsync(id) ?? throw new NotFoundException();

        // 从数据库查询方向选项，这里假设你有存储可选方向的表（比如DirectionConfigs），包含Value和DisplayText字段
        var dbOptions = await _context.DirectionConfigs
            .Select(d => new SelectListItem { Value = d.Value, Text = d.DisplayText })
            .ToListAsync();

        // 初始化SelectList，关联值字段、显示文本字段
        DirectionOptions = new SelectList(dbOptions, nameof(SelectListItem.Value), nameof(SelectListItem.Text));

        return Page();
    }

    // 保留原有的OnPostAsync提交逻辑，确保模型绑定正常工作
}

2. 修改Edit视图的表单字段 #

找到脚手架生成的文本输入框代码，一般是这样：

<div class="form-group">
    <label asp-for="TargetModel.Direction" class="control-label"></label>
    <input asp-for="TargetModel.Direction" class="form-control" />
    <span asp-validation-for="TargetModel.Direction" class="text-danger"></span>
</div>

将其替换为下拉选择框，通过asp-for绑定模型属性，asp-items关联PageModel中的选项集合：

<div class="form-group">
    <label asp-for="TargetModel.Direction" class="control-label"></label>
    <select asp-for="TargetModel.Direction" asp-items="@Model.DirectionOptions" class="form-control">
        <option value="">请选择移动方向</option> <!-- 可选的默认提示项 -->
    </select>
    <span asp-validation-for="TargetModel.Direction" class="text-danger"></span>
</div>

3. 额外注意事项 #

• 如果没有单独存储选项的配置表，只是数据库中实体的Direction字段存的是OUTWARD/INWARD字符串，也可以直接从现有实体数据中去重拉取选项，但建议用独立配置表，方便后续新增或修改选项。
• 页面加载时，下拉框会自动匹配TargetModel.Direction的值选中对应选项，无需额外逻辑。
• 可以给模型的Direction属性添加[Required]特性，强制用户必须选择选项，避免空值提交。

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