如何将EF Core脚手架生成的输入框改为内置固定值的下拉选择框
实现方案
该需求完全可实现,以下是两种常用的实现方式:
方式一:视图直接硬编码选项(适合快速实现,改动最小)
直接替换视图中原有的<input>标签为下拉选择框即可,所有选项直接写在视图中:
<div class="form-group"> <label class="control-label">Order Day</label> <select asp-for="OrderDay" class="form-control"> <option value="">请选择下单日</option> <option value="MON">MON</option> <option value="TUE">TUE</option> <option value="WED">WED</option> <option value="THU">THU</option> <option value="FRI">FRI</option> </select> <span asp-validation-for="OrderDay" class="text-danger"></span> </div>
方式二:后端统一配置选项(适合选项需要复用、便于后期维护的场景)
步骤1:添加后端字段验证
由于EF Core脚手架生成的是partial类,你可以新建一个同名的partial类文件(注意命名空间和自动生成的Setting类保持一致),给OrderDay字段加上验证规则,避免用户绕过前端提交非法值:
using System.ComponentModel.DataAnnotations; // 命名空间和自动生成的Setting类保持一致 namespace 你的项目命名空间.Models { public partial class Setting { [Required(ErrorMessage = "请选择下单日")] [RegularExpression(@"^(MON|TUE|WED|THU|FRI)$", ErrorMessage = "仅支持选择周一至周五")] public string OrderDay { get; set; } } }
步骤2:控制器中配置下拉选项
在对应控制器的Create、Edit等返回表单页的Action中,统一配置选项列表:
using Microsoft.AspNetCore.Mvc.Rendering; public IActionResult Create() { ViewBag.OrderDayOptions = new List<SelectListItem> { new SelectListItem{ Text = "周一(MON)", Value = "MON"}, new SelectListItem{ Text = "周二(TUE)", Value = "TUE"}, new SelectListItem{ Text = "周三(WED)", Value = "WED"}, new SelectListItem{ Text = "周四(THU)", Value = "THU"}, new SelectListItem{ Text = "周五(FRI)", Value = "FRI"} }; return View(); } // Edit方法同理也需要添加上述ViewBag配置
步骤3:修改视图代码
替换原有input为绑定后端选项的下拉框:
<div class="form-group"> <label class="control-label">Order Day</label> <select asp-for="OrderDay" asp-items="@ViewBag.OrderDayOptions as List<SelectListItem>" class="form-control"> <option value="">请选择下单日</option> </select> <span asp-validation-for="OrderDay" class="text-danger"></span> </div>
注:你的数据库字段为nvarchar(3),刚好匹配所有选项的长度,不会出现存储截断问题,两种方式都和原有业务逻辑完全兼容,不需要修改其他提交、存储代码。
内容的提问来源于stack exchange,提问作者user4912134
相关产品推荐
相关产品推荐

