Question

我在我的asp.net mvc网站上使用select2并且已经使用了html <select>。但是我发现很难找到一种方法来检索用户点击提交时输入的值。一旦进入@using（Html.BeginForm）元素，select2就不再有效，只显示为默认值。我已经尝试过这个教程，但它对我不起作用：http://www.datahaunting.com/mvc/select2-simple-example-in-asp-net-mvc/

以下是我现在所拥有的以及我尝试过的内容：

@model AssignerWebTool.Models.CreateUserModel
@{
ViewBag.Title = "Create User";
}
<select id="select" class="select" multiple="multiple"> //This works but I have no way of getting the values entered
<option></option>
</select>

<h2>Create User</h2>
@using (Html.BeginForm("Create", "user", FormMethod.Post, new { @class = "select", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>Create a new account.</h4>
<hr/>
@Html.ValidationSummary("", new {@class = "text-danger"})
<div class="form-group">
    @Html.LabelFor(m => m.Email, new {@class = "col-md-2 control-label"})
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.Email, new {id = "select" }) //This does not work and does not select2

        <select id="select" class="select" multiple="multiple"> //Also does not work now inside of here
            <option></option>
        </select>
    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" class="btn btn-default" value="Create User"/>
    </div>
</div>


}

@section scripts
{
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script>
    $(function () {

        $("#select").select2({
            placeholder: "Email address(es)",
            tags: true,
            tokenSeparators: [',', ' ']
        });
    });
</script>
}

Answer 1

从评论中我们调整了以下内容：

- 只有1个元素，id =＆＃34;选择＆＃34;正在通过JQuery选择以启用Select2功能。

- 使用select2.full.js lib for v4.0.x以获得v3.5.x的完全向后兼容性

对于要在Select2 v4.0.x中使用的<input type="text">（通过问题代码示例中的@ Html.TextBoxFor（）生成）字段，似乎存在限制（https://github.com/select2/select2/releases列表＆＃39; v4.0.0 RC1的有限支持，包括标签和令牌分隔符无效。

不使用html helper生成的输入字段 - 使用select字段，因为建议将其与Select2一起使用（请参阅v4.0.0的发行说明），并确保它在表单内并且具有name属性集到Model的属性，如果你想通过模型加载Controller传递的值，那么也可以循环访问它们：

<select id ="select" name="Email" class="select" multiple="multiple">
    @{foreach (var item in Model.Email)
        {
            <option>@item </option>
        }
    }
</select>

此外，如果电子邮件只是一个字符串，它只会在提交表单时从select元素中获取第一个选定的项目（如果至少依赖于模型绑定），为了获得更多，您可以使该属性成为{{ 1}}或者一个SelectList，此时你可以回到使用html帮助器但是使用DropDownFor来生成select元素（尽管你不需要，生成的html基本上与上面相同）

IEnumerable<string>

您也可以直接在自动生成的ID上调用Select2：

@Html.DropDownListFor(m => m.Email, Model.Email, new { multiple = "multiple" })

并在userController中处理已发布的表单：

$("#Email").select2({

通过模型绑定，这不是唯一的方法，但我建议。

希望这一切都有帮助！

选择2已输入的过帐值

1 个答案: