如何将下拉列表选中项的文本而非ID存入SQL数据库？

问题根源 #

HTML下拉框(<select>)默认仅提交选中项的Value属性值（即ID），不会自动传递显示的文本内容，因此后端只能获取到ID，无法直接拿到文本。

方案一：后端通过ID查询文本（推荐） #

这种方式数据准确性更高，避免前端篡改风险，直接从数据库通过ID关联查询对应文本。

修改控制器SaveBiodata方法 #

[HttpPost]
public async Task<IActionResult> SaveBiodata(BiodataSingle biodataSingle)
{
       if (ModelState.IsValid)
       {
           // 根据MDAId查询对应文本
           var mdaText = _context.MDA.FirstOrDefault(m => m.MDAId == biodataSingle.MDAId)?.MDAName;
           // 根据ZoDepId查询对应部门文本
           var zoneDeptText = _context.ZoneDept.FirstOrDefault(z => z.ZoDepId == biodataSingle.ZoDepId)?.ZoneDeptname;

           var newbiodata = new BiodataViewModel()
           {
               MDAId = biodataSingle.MDAId,
               MDAText = mdaText,
               DepartmentId = biodataSingle.ZoDepId,
               DepartmentText = zoneDeptText
           };

           await _context.BiodataA.AddAsync(newbiodata);
           await _context.SaveChangesAsync();
       }
                              
       return View(biodataSingle);
}

注意：需确保BiodataViewModel已添加MDAText、DepartmentText属性，同时数据库表BiodataA也要对应新增存储文本的字段。

方案二：前端通过隐藏字段传递文本值 #

若不想额外查询数据库，可在页面添加隐藏输入框，当下拉框选中时同步将文本存入隐藏字段，提交表单时一并传给后端。

修改视图代码 #

<select id="ddlmdaName" name="MDAId" asp-for="MDAId" asp-items="Model.MDA" class="form-control" onchange="setMDAText(this)">
         <option value="">--请选择--</option>
</select>
<!-- 隐藏字段存储MDA文本 -->
<input type="hidden" id="MDAText" name="MDAText" />

<select id="ddlzoneDept" name="ZoDepId" asp-for="ZoDepId" asp-items="Model.ZoneDept" class="form-control" onchange="setZoneDeptText(this)">
        <option value="">--请选择--</option>
</select>
<!-- 隐藏字段存储部门文本 -->
<input type="hidden" id="ZoneDeptText" name="ZoneDeptText" />

<script>
// 选中MDA时同步文本到隐藏字段
function setMDAText(selectElement) {
    var selectedText = selectElement.options[selectElement.selectedIndex].text;
    document.getElementById('MDAText').value = selectedText;
}

// 选中部门时同步文本到隐藏字段
function setZoneDeptText(selectElement) {
    var selectedText = selectElement.options[selectElement.selectedIndex].text;
    document.getElementById('ZoneDeptText').value = selectedText;
}
</script>

修改模型BiodataSingle #

添加接收文本的属性：

public class BiodataSingle
{
   public BiodataSingle()
   {
       this.MDA = new List<SelectListItem>();
       this.ZoneDept = new List<SelectListItem>();
   }

   public List<SelectListItem> MDA { get; set; }
   public List<SelectListItem> ZoneDept { get; set; }
   public int MDAId { get; set; }
   public int ZoDepId { get; set; }
   // 新增接收文本的属性
   public string MDAText { get; set; }
   public string ZoneDeptText { get; set; }
}

修改控制器SaveBiodata方法 #

[HttpPost]
public async Task<IActionResult> SaveBiodata(BiodataSingle biodataSingle)
{
       if (ModelState.IsValid)
       {
           var newbiodata = new BiodataViewModel()
           {
               MDAId = biodataSingle.MDAId,
               MDAText = biodataSingle.MDAText,
               DepartmentId = biodataSingle.ZoDepId,
               DepartmentText = biodataSingle.ZoneDeptText
           };

           await _context.BiodataA.AddAsync(newbiodata);
           await _context.SaveChangesAsync();
       }
                              
       return View(biodataSingle);
}

注意事项 #

• 方案一虽多一次数据库查询，但数据安全性更高，可避免前端篡改文本；
• 方案二更适合对性能要求高且信任前端输入的场景，但需注意防范恶意修改隐藏字段的风险；
• 两种方案都需确保BiodataViewModel和数据库表BiodataA具备对应的文本存储字段。

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