如何使用Html.DropDownListFor将完整选中对象传递至Controller及ViewModel传递咨询

首先，咱们得搞清楚为什么只传递了id而没有完整的DropDown对象：HTML的<select>元素在表单提交时，只会发送选中选项的value属性值——也就是你在SelectList里指定的"id"字段，而选项显示的文本（对应DropDown的value属性）并不会自动被提交到后台，这是HTTP表单提交的默认行为。

下面给你两种针对性的解决方案，以及传递完整ViewModel的方法：

方案1：后台通过ID重新获取完整对象（推荐） #

这是实际开发中最常用的方式，把value从前端传过来不仅冗余，还存在被篡改的风险。后台可以通过收到的id，从数据源（数据库、缓存等）中查询出对应的完整DropDown对象。

修改Controller的Action #

[HttpPost]
public string GetTestData(int selectedGraphTypeId)
{
    // 示例：从服务/数据库中通过ID获取完整对象
    var selectedDropDown = _yourDataService.GetDropDownById(selectedGraphTypeId);
    
    // 在这里使用完整的selectedDropDown对象
    return $"Selected graph type: {selectedDropDown.value}";
}

修改View的下拉框绑定 #

把下拉框的绑定目标改为SelectedGraphTypeDropDown.id，这样后台能直接接收选中的ID：

@using (Html.BeginForm("GetTestData", "Graph", FormMethod.Post))
{
    @Html.DropDownListFor(m => m.SelectedGraphTypeDropDown.id, 
        new SelectList(Model.GraphTypeDropDowns, "id", "value"))
    <input type="submit" />
}

方案2：通过JavaScript+隐藏字段传递完整对象 #

如果你确实需要把id和value一起传到后台，可以在页面中添加一个隐藏字段，当下拉框选项变化时，用JS把选中项的文本赋值给隐藏字段，这样提交时就能携带完整的DropDown对象数据。

修改View代码 #

@using (Html.BeginForm("GetTestData", "Graph", FormMethod.Post))
{
    @Html.DropDownListFor(m => m.SelectedGraphTypeDropDown.id, 
        new SelectList(Model.GraphTypeDropDowns, "id", "value", Model.SelectedGraphTypeDropDown?.id),
        new { @id = "graphTypeSelect" })
    
    <!-- 隐藏字段用于传递value属性 -->
    @Html.HiddenFor(m => m.SelectedGraphTypeDropDown.value, new { @id = "graphTypeValue" })
    
    <input type="submit" />
}

<script>
    // 监听下拉框选择变化事件
    document.getElementById('graphTypeSelect').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        // 将选中项的文本赋值给隐藏字段
        document.getElementById('graphTypeValue').value = selectedOption.textContent;
    });

    // 页面加载时初始化隐藏字段（如果有默认选中项）
    window.addEventListener('load', function() {
        const select = document.getElementById('graphTypeSelect');
        const selectedOption = select.options[select.selectedIndex];
        document.getElementById('graphTypeValue').value = selectedOption.textContent;
    });
</script>

保持原Action不变 #

此时你的原Action就能接收到完整的DropDown对象了：

[HttpPost]
public string GetTestData(DropDown SelectedGraphTypeDropDown)
{
    // 这里能获取到id和value的完整数据
    return $"Selected: ID={SelectedGraphTypeDropDown.id}, Value={SelectedGraphTypeDropDown.value}";
}

传递完整ViewModel到Controller #

如果想把整个GraphViewModel传到后台，只需要把Action的参数改为GraphViewModel，并确保视图中的表单控件都正确绑定到ViewModel的属性即可：

修改Controller的Action #

[HttpPost]
public string GetTestData(GraphViewModel model)
{
    // model.SelectedGraphTypeDropDown 包含选中的id和value（需要配合方案2的隐藏字段）
    // 注意：model.GraphTypeDropDowns 不会自动提交，因为视图中没有对应表单控件，后台可以重新获取该列表
    return $"Selected graph type: {model.SelectedGraphTypeDropDown.value}";
}

View无需额外修改（沿用方案2的View代码） #

只要控件的绑定表达式是基于GraphViewModel的属性（比如m => m.SelectedGraphTypeDropDown.id），ASP.NET MVC的模型绑定就会自动把表单数据组装成完整的GraphViewModel对象。

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