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）。