Razor表单中用JS填充Select后，提交时如何获取选中项？偏好Razor语法

没问题，这事儿我熟！完全不用放弃你偏好的Razor DisplayFor/EditorFor 语法，下面给你几个实用的方案，既能用JS动态填充下拉框，又能在提交表单时正常获取选中值：

方案1：用Razor生成绑定好的Select结构，JS仅填充选项 #

这是最直接的方式，核心思路是让Razor帮你生成和模型字段绑定的select元素（自动设置正确的name属性，这是模型绑定的关键），然后用JS只负责填充选项内容。

步骤示例： #

1. 模型定义：首先确保你的ViewModel有对应接收选中值的字段

public class MyFormViewModel
{
    // 用来接收选中项的ID
    public int SelectedCategoryId { get; set; }
    // 其他表单字段...
    public string UserName { get; set; }
}

2. Razor视图生成Select：用DropDownListFor生成绑定到模型字段的select，初始选项可以为空

@model MyFormViewModel

<form asp-action="SubmitForm" method="post">
    <!-- 用Razor生成绑定到SelectedCategoryId的select -->
    @Html.DropDownListFor(m => m.SelectedCategoryId, new SelectList(Enumerable.Empty<SelectListItem>()), "请选择分类", new { id = "categorySelect" })
    
    <!-- 其他用Razor生成的字段 -->
    @Html.EditorFor(m => m.UserName)
    
    <button type="submit">提交表单</button>
</form>

3. JS填充选项：页面加载后用JS动态添加选项，不用管绑定逻辑，Razor已经帮你做好了

document.addEventListener('DOMContentLoaded', function() {
    const selectEl = document.getElementById('categorySelect');
    // 模拟从后端API获取选项数据（实际项目中可以用fetch/axios请求）
    const categoryOptions = [
        { id: 1, name: "技术博客" },
        { id: 2, name: "生活随笔" },
        { id: 3, name: "教程分享" }
    ];

    categoryOptions.forEach(opt => {
        const option = document.createElement('option');
        option.value = opt.id;
        option.textContent = opt.name;
        selectEl.appendChild(option);
    });
});

提交表单时，ASP.NET Core会自动把选中的option的value值绑定到SelectedCategoryId字段，完美兼容Razor的模型绑定！

方案2：自定义EditorTemplate实现EditorFor支持 #

如果你坚持要用EditorFor，可以自定义一个编辑器模板，让它生成能被JS填充的select元素，同时保持模型绑定能力。

步骤示例： #

1. 创建编辑器模板：在Views/Shared/EditorTemplates文件夹下新建DynamicSelect.cshtml文件

@model int?

<!-- 用asp-for自动绑定模型字段，生成正确的name和id -->
<select asp-for="@Model" class="dynamic-select">
    <option value="">请选择</option>
</select>

<script>
// 这里可以根据需求动态获取选项，比如从ViewBag传递API地址
const apiUrl = '@ViewBag.DynamicSelectApi';
fetch(apiUrl)
    .then(res => res.json())
    .then(options => {
        const select = document.querySelector('.dynamic-select');
        options.forEach(opt => {
            select.add(new Option(opt.text, opt.id));
        });
    });
</script>

2. 在视图中使用EditorFor：指定使用自定义模板

@model MyFormViewModel

<form asp-action="SubmitForm" method="post">
    <!-- 用EditorFor并指定自定义模板 -->
    @Html.EditorFor(m => m.SelectedCategoryId, "DynamicSelect")
    
    @Html.EditorFor(m => m.UserName)
    
    <button type="submit">提交</button>
</form>

这样既满足了你用EditorFor的需求，又能通过JS动态填充选项，提交时模型绑定依然正常工作。

额外技巧：编辑页面回显选中值 #

如果是编辑页面需要回显之前选中的值，可以在JS填充完选项后，手动设置选中状态：

// 填充完选项后执行
const savedValue = '@Model.SelectedCategoryId';
if (savedValue) {
    document.getElementById('categorySelect').value = savedValue;
}

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