Use jQuery Select2 with ASP.NET MVC

I'm trying to use Select2 in Razor in ASP.NET MVC. But I can't get work.

  $(document).ready(function () {
            $(".genreOptions").select2({
                tags: true,
                ajax: {
                    url: 'http://localhost:65148/NewProfile/Genres',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function (data, page) {
                        var newData = [];
                        $.each(data, function (index, item) {
                            newData.push({
                                id: item.Id,  //id part present in data 
                                text: item.Genre  //string to be displayed
                            });
                        });
                        return { results: newData };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 1
            });

@Html.DropDownListFor(x => x.BandProfile.Genres, Enumerable.Empty<SelectListItem>(), new { @class="genreOptions", multiple = "multiple", style ="width: 100%;"} )

The searching for tags works fine. But when I post the form, the count of the input field Is 0. How can I capture the data from the input form?

Copyright Notice：Content Author:「Bryan」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/36360512/use-jquery-select2-with-asp-net-mvc