无需JS/jQuery设置C#渲染的Bootstrap selectpicker默认选中值

核心问题根源 #

• 布尔属性的错误输出逻辑：HTML规范中selected属于布尔属性，只要该属性在标签中存在（哪怕值为空字符串selected=""），都会被浏览器解析为选中状态。原写法的三元表达式在条件不满足时会输出selected=""，导致三个option都带有selected属性，浏览器最终只会命中第一个出现的带selected的选项，因此始终默认选中第一个选项。
• 代码语法错误：value=2的option存在未闭合、属性拼写错误的问题（mr->多了多余的>、缺少</i>和</option>闭合标签），会导致DOM解析异常，进一步干扰selectpicker读取选中状态。

正确实现代码 #

利用Razor对HTML布尔属性的原生支持，直接传入布尔类型的判断结果，无需手动拼接"selected"字符串：

• 判断结果为true时，Razor会自动输出selected="selected"属性
• 判断结果为false时，Razor会直接省略该属性，不会生成多余的空属性

<select id="PayStatus" data-key="@item.CandidateId" class="selectpicker gw-bs-small w-100">
  <option value="0" selected="@(item.PaymentStatus == 0)" data-content="<span class='badge badge-red-dark-500 text-white label-important'><i class='icon-cross mr-1'></i>InvoiceOpen</span>"></option>
  <option value="1" selected="@(item.PaymentStatus == 1)" data-content="<span class='badge badge-byline-300 text-green'>FreeDevelopment</span>">FreeDevelopment</option>
  <option value="2" selected="@(item.PaymentStatus == 2)" data-content="<span class='badge badge-green-500 text-white'><i class='icon-check mr-1'></i></span>"></option>
</select>

方案适配性说明 #

• 所有选中逻辑完全在服务端渲染阶段完成，不依赖前端JS二次赋值，完全避免页面加载后逐个操作DOM的性能损耗
• selectpicker（bootstrap-select）初始化时会自动读取原生select的选中状态，只要原生DOM的选中值正确，初始化后的组件会直接展示对应选中项，不需要额外触发refresh或手动赋值操作
• 完全适配大量数据渲染的场景，无需在文档就绪事件中批量处理组件选中值，性能最优

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