How to use the select2 option in asp.net core?

Question

I am working in asp.net core. I am using typescript. I want to use the Select2. How to use the select2 in asp.net core? Is there any package want to install for using select2?

Answer 1

If you're using angular 2 , you can use ng2-select . Here is the github repo . Let me know if you need more help to set it up.

Run npm i ng2-select --save

For angular 4 , use ng2-select-compat instead. It's a fork of ng2-select above customized for angular 4.

Answer 2

Bit late to the party, but had the same problem.

My needs were to add a select2-multiselector, where the data was loaded via ajax. So possibly you need to change a bit.

You can add this js and css:

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

My View (the model is an IEnumerable ):

...
@for (int index = 0; index < Model.Count; index++)
{
    <div>
        <input type="hidden" asp-for="@Model[index].Id"/>
        <input type="text" asp-for="@Model[index].Title">

        <select class="js-example-basic-multiple" style="width: 100%;" asp-for="@Model[index].TagIds" multiple="multiple">
            @foreach (TagDetailModel tag in Model[index].Tags)
            {
                <option value="@tag.Id" selected="selected">@tag.Name</option>
            }
        </select>
    </div>
}
...

What I did: Added a select in the view, gave it a class where I can access it later with javascript. If you need to add multiple values, you add multiple="multiple" In my model I added the tags that already were assigned to the model. They aren't automatically added with select2, you need to add them yourself. If you don't have multiple enabled, your Tags is probably just one Tag and you don't need to enumerate.

$(document).ready(function() {
    $('.js-example-basic-multiple').select2({
    ajax: {
            url: '/Tag/GetTags',
            dataType: 'json',
            type: "GET",
            quietMillis: 50,
            data: function (term) {
                return {
                    term: term
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.name,
                            id: item.id
                        }
                    })
                };
            }
        }
    });
});

In this script, when the document loaded completely, I run the select as select2 , simply with $('.js-example-basic-multiple').select2() . I wanted to let select2 load the option via ajax (therefore the ajax property) - if you don't want to use ajax, you can add the possible values like in the view with just <option value="@tag.Id">@tag.Name</option> .

In my controller ( ImageController.cs in my app) I just added a function for the ajax-request:

public async Task<JsonResult> Tags(int id)
{
    return Json(await _imageService.Get(id));
}