Spitfire5793 Spitfire5793 - 1 month ago 14
ASP.NET (C#) Question

Select2 posting values that have been entered

Im using select2 in my asp.net mvc website and have got it working for html . However I am finding it difficult to get a way of retrieving the values a user has entered when they hit submit. Once inside a @using (Html.BeginForm) element the select2 no longer works and just shows as the default. Ive tried this tutorial but its not working for me: http://www.datahaunting.com/mvc/select2-simple-example-in-asp-net-mvc/

Here is what I have at the minute and what I have tried:

@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 enetered
<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

From the comments we adjusted the following:

-Only have 1 element with the id="select" that is being selected via JQuery to enable the Select2 functionality for.

-Use the select2.full.js lib for v4.0.x for full backward compatibility from v3.5.x

It appears that for an <input type="text"> (generated via @Html.TextBoxFor() in the question code sample) field to be used in Select2 v4.0.x that there are limitations (https://github.com/select2/select2/releases lists 'Limited support' for v4.0.0 RC1), which include tags and token separators not working.

Instead of using the html helper generated input field - use a select field, since that is recommended to use with Select2 (see release notes for v4.0.0), and make sure this is inside the form and has the name attribute set to the Model's property, and if you want to load in the values passed by the Controller via the model then loop through those as well:

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

Also, if Email is just a string, it will only get the first selected item from the select element when the form is submitted (if relying on Model binding at least), to get more you can make the property an IEnumerable<string> or a SelectList, and at that point you could go back to using the html helper but with a DropDownFor to get the select element generated (though you don't need to, the generated html is basically identical to above).

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

and you can also call Select2 directly on the auto generated id:

$("#Email").select2({

and handling the posted form in your userController:

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

via Model Binding, which isn't the only way but I would recommend.

Hope this all helps!

Comments