获取选项从 html 选择到 MVC c# 控制器答案

【问题标题】：Getting options FROM html select TO MVC c# Controller获取选项从 html 选择到 MVC c# 控制器
【发布时间】：2014-02-01 11:08:09
【问题描述】：

我不知道该怎么做，但我需要从一个 html 选择多个列表中获取每个 <option>，作为一个数组，然后将其发送回 C# 控制器。需要为我的应用程序提取每个选项的文本。

有人知道怎么做吗？我需要选择以便用户可以选择删除选项，但一旦完成，我需要收集仍在列表中的选项。也许通过 jQuery 或 javascript？

这是我目前的代码：

    @using (Html.BeginForm("NewTable", "Table", FormMethod.Post))
    {
        <div class="form-group">
            <label for="fieldList">Field List</label>
            <select multiple class="form-control" id="fieldList" style="height: 300px">
                <option>Example 1</option>
                <option>Example 2</option>
            </select>
        </div>
        <button class="btn btn-default" type="submit">Create Table</button>
    }

【问题讨论】：

首先你是如何产生选项的？当然，您可以只取所选的补码吗？
选项是由用户输入名称并点击按钮生成的，然后它们在选择中显示为“选项”。然后，他们可以删除他们认为不再需要在列表中的那些。
使用 jQuery 跟踪隐藏字段中的选定项目，使用相同的名称属性。然后选择的将被发布并绑定到同名的列表属性。
您能否详细说明如何从 C# 的角度解决这个问题？

标签： c# javascript asp.net-mvc html-select html-helper

【解决方案1】：

在添加和删除选项时，使用 jQuery 从隐藏字段列表中追加/删除，例如：

<input type="hidden" name="SelectedOptions" value="EnteredValueGoesHere" />

然后，创建一个模型属性来匹配名称：

public class MyModel
{
    public List<string> SelectedOptions { get; set; }
}

然后确保您的控制器操作具有以下签名：

public ActionResult SomeAction(MyModel model)

默认模型绑定器将表单字段绑定到模型属性，其中属性名称与字段的name 匹配，因此，假设您的隐藏字段由您的 Javascript 正确填充和维护，这会将隐藏字段绑定到提交表单时列出。

然后，您的选择列表变得肤浅 - 只是为了方便用户使用，但从未实际绑定到模型对象。

【讨论】：

谢谢，这是有道理的。我是否应该告诉 jquery 每次添加选项时创建一个新的输入隐藏字段，然后在提交时获取隐藏输入的整个列表及其值？
您只需要在列表中添加/删除它们时创建/删除它们 - 您无需在提交时执行任何操作，因为隐藏字段将作为表单帖子的一部分提交。这是在 HTML/Javascript 中管理动态表单的规范方法。然后，您的 MVC 应用程序不关心它们是如何提交的 - 它只是将表单值正常绑定到列表，这意味着没有 Request.Form 肮脏或其他破坏您的 MVC 应用程序。让框架来做这件事。
谢谢。这是传奇。

【解决方案2】：

使用以下代码：

<% using (Html.BeginForm("About", "Home", FormMethod.Post))
   {%>

    <div class="form-group">
        <label for="fieldList">Field List</label>
        <select multiple class="form-control" id="fieldList" name="sl" style="height: 300px">
            <option name="op1">Example 1</option>
            <option name="op2">Example 2</option>
        </select>
        <input type="hidden" name="optionValues" id="optionValues" value="1" />
    </div>
    <button class="btn btn-default" type="submit">Create Table</button>
<%} %>
<script type="text/jscript">
    $("form").submit(function () {

        var optionsValues = "";
        $("#fieldList option").each(function () {
            optionsValues = $(this).attr("name") + "=" + $(this).attr("selected") + ",";
            alert("1");
        });
        $("#optionValues").attr("value", optionsValues);
        alert("2");
    });
</script>

我添加了隐藏的输入字段，并在向其中提交设置选项值时添加。在服务器端使用 Request.Form("optionValues") 等读取隐藏输入的值。

【讨论】：

【解决方案3】：

只需为每个选项分配一个名称属性：

<option name="op1">Example1</option>
...

在服务器端访问选项：

Request.Form["op1"]
...

【讨论】：

您能否详细说明控制器方法应该如何检索选项？
不起作用，因为它需要选择选项 - OP 希望它们只是存在。