将jQuery Select2与ASP.NET MVC一起使用

Question

我试图在ASP.NET MVC中的剃刀中使用Select2。 但是我不能上班。

  $(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%;"} )

搜索标签工作正常。 但是，当我发布表单时，输入字段的计数为0。如何从输入表单中捕获数据？

Answer 1

@Bryan我建立了一个javascript数组，并将其与ajax一起传递给服务器。 看来我可以正常工作。 也许您可以尝试一下。 我在下面放置的选择器将与您需要的选择器不同，但这是基本概念...

点击时

$('#submitButton').click(function () {

      fillHiddenInput();

      var dataToSend = $('#hiddenInput').val();

      //Submit the form with ajax or however you want to get dataToSend to server
});

FillHiddenInput函数...

var fillHiddenInput = function () {

      $('#hiddenInput').val("");
      var stuff = [];

      $('.ms-selection .ms-list li ul').children('li').each(function (){

          if ($(this).hasClass('ms-selected')) 
           {
              stuff.push($(this).children('span').text());
           }

      });

    $('#hiddenInput').val(stuff);
}