使用Select2.js时下拉列表选中值无法提交，clientId为空问题排查

1. 场景说明 #

• 使用Select2实现下拉列表筛选，技术栈为Bootstrap 5 + .NET 7.0 Core
• 选择客户端名称提交表单时，出现clientId为空的错误（未正确传递选中的客户端ID）

2. 核心问题 #

代码存在两处关键问题导致模型绑定失败：

问题1：select标签name属性与模型字段不匹配 #

ASP.NET Core模型绑定依赖表单元素的name属性与后端模型字段名称一致。你的select标签中：

<select asp-for="Presentation.KliId" class="form-control text-primary font-weight-bold fw-bold form-select client" name="client" asp-items="ViewBag.KliId" data-placeholder="--- Client ---" id="client" style="font-size:80%"></select>

asp-for="Presentation.KliId"会自动生成对应name属性，但你手动指定了name="client"，导致提交时表单传递的参数名是client，而后端模型期望的是Presentation.KliId，因此无法正确绑定，出现ID为空的错误。

问题2：Select2初始化代码语法不完整 #

你的JavaScript代码中，Select2初始化缺少闭合的});，会导致JS执行报错，Select2无法正常初始化，进而影响表单值的传递：

<script type="text/javascript">
    $('.client').select2({
        width: '100%',
        dropdownParent: $('#addModal')
// 缺少闭合的 });
</script>

3. 修正后的代码 #

修正后的HTML select部分 #

移除手动指定的name="client"，让asp-for自动生成正确的name属性：

<select asp-for="Presentation.KliId" class="form-control text-primary font-weight-bold fw-bold form-select client" asp-items="ViewBag.KliId" data-placeholder="--- Client ---" id="client" style="font-size:80%"></select>

修正后的JavaScript部分 #

补充完整的语法闭合：

<script type="text/javascript">
    $('.client').select2({
        width: '100%',
        dropdownParent: $('#addModal')
    });
</script>

额外验证建议 #

• 提交表单前，可通过浏览器开发者工具的网络面板查看请求参数，确认Presentation.KliId是否被正确传递
• 确保ViewBag.KliId中包含正确的选项列表，每个选项的Value对应客户端ID，Text对应客户端名称

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