如何使用SQL Server数据在Blazor/Razor中填充下拉列表并解决ID不存在报错

ID无法识别问题修复 #

针对两种不同场景分别处理：

• 前端脚本无法识别ID：Razor渲染带asp-for属性的元素时会自动生成客户端ID，和你预设的ID可能不一致，直接在<select>标签上手动声明固定ID即可：

  <select id="customSelect1" asp-for="BindField" asp-items="Model.SelectOption1">
    <option value="">请选择</option>
  </select>
  

  后续脚本中直接用customSelect1这个ID访问元素即可。
• 后置代码文件无法识别ID：Razor Pages没有Web Forms的服务器控件ID映射机制，不能直接在.cshtml.cs中通过ID访问前端元素，需要通过属性绑定传递选项集合。

标准下拉框数据填充流程 #

后端（.cshtml.cs）逻辑 #

1. 为每个下拉框定义公开的SelectList类型绑定属性：

   public SelectList SelectOption1 { get; set; }
   // 其余4个下拉框对应定义SelectOption2到SelectOption5
   

2. 在页面请求触发的OnGet/OnPost方法中查询SQL Server最新主表数据，赋值给对应属性：

   public async Task OnGetAsync()
   {
       // 每次请求都重新拉取主表最新数据，避免使用静态缓存导致参数过时
       var rawData = await _dbContext.YourMainTable.ToListAsync();
       SelectOption1 = new SelectList(rawData, "数据库Id字段名", "数据库显示文本字段名");
       // 其余下拉框对应赋值
   }
   

前端（.cshtml）绑定逻辑 #

按照之前的写法给每个select指定固定ID，绑定对应SelectList属性即可，渲染时会自动填充所有选项。

手动新增选项的操作方式 #

前端脚本中直接通过你声明的固定ID操作下拉框即可，示例：

// 原生JS写法
const select1 = document.getElementById('customSelect1');
select1.add(new Option('新增选项文本', '新增选项值'));

// jQuery写法
$('#customSelect1').append(new Option('新增选项文本', '新增选项值'));

主表参数始终最新的保障 #

每次页面加载、或者触发数据更新操作时，都重新从SQL Server主表查询数据，不要用全局静态变量存储选项集合；如果是异步刷新场景，单独写接口返回最新主表数据，前端拿到后重新渲染下拉框选项即可。

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