Select2 已输入的过帐值

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="select" 的元素正在通过 JQuery 进行 select 编辑以启用 Select2 功能。

-使用 v4 的 select2.full.js 库。0.x 从 v3.5.x

完全向后兼容

似乎要在 Select2 v4.0.x 中使用的 <input type="text">（通过问题代码示例中的 @Html.TextBoxFor() 生成）字段存在限制（ https://github.com/select2/select2/releases 列出 'Limited support' for v4.0.0 RC1)，其中包括无效的标记和标记分隔符。

而不是使用 html 助手生成的输入字段 - 使用 select 字段，因为建议将其与 Select2 一起使用（请参阅 v4.0.0 的发行说明），并确保这一点在表单内部，并将 name 属性设置为模型的属性，如果您想加载控制器通过模型传递的值，那么也循环遍历这些值：

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

此外，如果 Email 只是一个字符串，它只会在提交表单时从 select 元素中获取第一个 selected 项目（如果至少依赖模型绑定），要获得更多，您可以将属性设为 IEnumerable<string> 或 SelectList，此时您可以返回使用 html 助手，但使用 DropDownFor 获取 select 元素生成（虽然你不需要，生成的 html 与上面基本相同）。

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

你也可以直接在自动生成的id上调用Select2:

$("#Email").select2({

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

[HttpPost]
public ActionResult Create(CreateUserModel model)
{
  ...

通过模型绑定，这不是唯一的方法，但我会推荐。

希望这对您有所帮助！

Select2 已输入的过帐值

Select2 posting values that have been entered

asp.net

asp.net-mvc

jquery

jquery-select2

select2