如何使用 Html.DropDownListFor 将选定对象传递给控制器答案

【问题标题】：How to pass a selected object to a Controller using Html.DropDownListFor如何使用 Html.DropDownListFor 将选定对象传递给控制器
【发布时间】：2021-04-09 15:10:21
【问题描述】：

我目前正在尝试使用 HTML.DropDownFor() 和表单将名为 DropDown 的对象从视图传递到控制器操作。

对象如下所示：

public class DropDown
   {
       public int id { get; set; }

       public string value { get; set; }
   }

视图模型如下所示：

    public class GraphViewModel
    {
        public DropDown SelectedGraphTypeDropDown { get; set; }
        public IEnumerable<DropDown> GraphTypeDropDowns { get; set; }
    }

控制器动作如下所示：

        [HttpPost]
        public string GetTestData(DropDown SelectedGraphTypeDropDown)
        {
            // use above object here
        }

这样的观点：

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

Rendered HTML

我期望发生的是选定的 GraphType 将被传递给 GetTestData 操作并作为一个名为“SelectedGraphTypeDropDown”的整个对象进行解析。我已经通过它进行了调试，似乎选定的 GraphType id (int) 已传递给控制器，但整个对象并未传递。我也尝试传递 selectedGraphTypeDropDown 的每个字段，但这不起作用，因为字段是在页面呈现后设置的。

还有没有办法将完整的 viewModel 传递给控制器？

任何建议将不胜感激！

【问题讨论】：

这个表单呈现的 HTML 是什么样的？
@Jasen Ive 添加了上面呈现的 HTML 的屏幕截图

标签： asp.net-mvc forms asp.net-core razor

【解决方案1】：

首先，dropdown不能传递模型，但是你可以添加隐藏输入来绑定值。这里是一个demo：

查看：

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

js(js 会将选中的值绑定到隐藏的输入):

$(function () {
        $("#value").val($(this).find("option:selected").text());
    })
    $("#SelectedGraphTypeDropDown_id").change(function () {
        $("#value").val($(this).find("option:selected").text());
    })

结果：

【讨论】：

谢谢我喜欢这个解决方案