多级动态下拉菜单选中项点击Create按钮传递到Controller的实现方法

你当前的HTML结构存在问题，不应该在循环里为每个选项单独创建select组件，可通过「隐藏域存选中值 + 点击事件赋值」的方案实现需求，具体修改步骤如下：

1. 调整前端HTML结构 #

首先确保整个下拉菜单放在提交表单内，新增隐藏域绑定模型属性，把循环内的select改为带自定义属性的a标签，用来存储对应状态的ID：

@model Projects
<!-- 绑定Create提交动作的表单 -->
<form asp-action="Create" method="post">
    <div class="dropdown drop">
        <button class="btn  dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-mdb-toggle="dropdown"
                aria-expanded="false">
            请选择状态
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li>
                <a class="dropdown-item" href="#">
                    ProjectStatus &raquo;
                </a>
                <ul class="dropdown-menu dropdown-submenu">
                    @foreach (var i in ViewBag.ProjectStatus)
                    {
                        <li>
                            <!-- 新增自定义属性存状态类型和ID，禁止默认跳转 -->
                            <a class="dropdown-item status-item" data-type="project" data-id="@i.Value" href="javascript:;">@i.Text</a>
                        </li>
                    }
                </ul>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    DevelopmentStatus &raquo;
                </a>
                <ul class="dropdown-menu dropdown-submenu">
                    @foreach (var i in ViewBag.DevelopmentStatus)
                    {
                        <li>
                            <a class="dropdown-item status-item" data-type="dev" data-id="@i.Value" href="javascript:;">@i.Text</a>
                        </li>
                    }
                </ul>
            </li>
        </ul>
    </div>

    <!-- 新增隐藏域，用来存储选中的状态ID，提交时自动绑定到模型 -->
    <input type="hidden" asp-for="ProjectStatus" id="hid_project_status" />
    <input type="hidden" asp-for="DevelopmentStatus" id="hid_dev_status" />

    <!-- 其他表单字段 -->

    <button type="submit" class="btn btn-primary">Create</button>
</form>

2. 新增JS处理点击选中逻辑 #

监听选项的点击事件，把选中的ID写入对应隐藏域，同时可更新下拉按钮文本提示选中状态：

<script>
// 给所有状态选项绑定点击事件
document.querySelectorAll('.status-item').forEach(item => {
    item.addEventListener('click', function() {
        const statusType = this.dataset.type;
        const statusId = this.dataset.id;
        const statusText = this.innerText;

        // 把选中值写入对应隐藏域
        if (statusType === 'project') {
            document.getElementById('hid_project_status').value = statusId;
            document.getElementById('dropdownMenuButton').innerText = `已选项目状态：${statusText}`;
        } else if (statusType === 'dev') {
            document.getElementById('hid_dev_status').value = statusId;
            document.getElementById('dropdownMenuButton').innerText = `已选开发状态：${statusText}`;
        }

        // 可选：选中后自动收起下拉菜单
        document.getElementById('dropdownMenuButton').click();
    })
})
</script>

3. 确认实体类属性匹配 #

确保你的Projects实体类存在和隐藏域绑定的对应属性，类型和数据库里的状态ID类型一致即可：

public class Projects
{
    // 其他原有属性
    public int ProjectStatus { get; set; }
    public int DevelopmentStatus { get; set; }
}

调整完成后点击Create按钮提交表单时，隐藏域的选中值会自动绑定到Post方法的ec参数中，直接读取使用即可，原有Get和Post的Controller逻辑无需修改。

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