ASP.NET MVC5 Select2无法正常工作

Question

这是我在该论坛上的第一条消息，在此先感谢您的帮助，如果在这里遇到更大的错误，对不起。

我正在尝试实现select2 JQuery自动完成组合框。

我复制了一些代码，但看不到我的错误在哪里，但是编辑文本看起来像是普通的编辑文本，而是更改为Select2，JavaScrypt出于某种原因无法正常工作。

这是我的代码：

我的indexcshtml中的引用：

<link href="~/Content/css/select2.css" type="text/css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.0.js"></script>
<script src="~/Scripts/select2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

我的文本框，应该在像cyndarela这样的组合框中进行转换！

@using (Html.BeginForm())
{

    @Html.TextBoxFor(a => a.SupplierId, new { id = "supplier" })  @Html.ValidationMessageFor(a => a.SupplierId)
    <br />
    <button type="submit">Submit</button>
}

最后是我的JavaScrypt：

<script >



 $(document).ready(function () {

       var pageSize = 20;

       var optionListUrl = '@Url.Action("GetProducts", "Purchases")';

    //Method which is to be called for populating options in dropdown //dynamically

       $('#supplier').select2(

       {

           ajax: {

               delay: 150,

               url: optionListUrl,
               //url: '/Purchases/GetProducts',

               dataType: 'json',



               data: function (params) {

                   params.page = params.page || 1;

                   return {

                       searchTerm: params.term,

                       pageSize: pageSize,

                       pageNumber: params.page

                   };

               },

               processResults: function (data, params) {

                   params.page = params.page || 1;

                  return {

                       results: data.Results,

                       pagination: {

                           more: (params.page * pageSize) < data.Total

                       }

                   };

               }

           },

           placeholder: "-- Select --",

           minimumInputLength: 0,

           allowClear: true,

   });

});

</script>

就像#supplier在脚本中不起作用

谢谢你们的时间！

Answer 1

我遇到过同样的问题。 指令

@Scripts.Render("~/bundles/scripts")

在布局视图中包括所有脚本，并且有时它们会包含一些处理.send2（）的指令。

因此，您可以删除该行，而只需导入所需的脚本.js文件（包括select2）。