Подключение библиотеки jQuery UI Select2 в проекте C# asp net core / ASP.NET

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Подключение библиотеки jQuery UI Select2 в проекте C# asp net core

6 сообщений из 6, страница 1 из 1

Подключение библиотеки jQuery UI Select2 в проекте C# asp net core

#40071056

Vlad__i__mir

Гость

Здравствуйте!

В проекте C# asp net core использую jQuery v3.5.1 и BootStrap 4.
Есть Select:

Код: html

1.
2.
3.
4.

<div id="divHouse" class="form-group">
            <label asp-for="HouseId" class="control-label"></label>
            <select class="selectСhoice" id="HouseId" asp-for="HouseId" class="form-control" asp-items="ViewBag.GetHouses"></select>
        </div>

Делаю поиск для данного Select, чтобы при его активации можно было не крутить, а начать вводить и отображались подходящие варианты. Реализовываю на фронте.

Для реализации выбрал библиотеку jQuery UI Select2 https://select2.org/getting-started/installation

Согласно оф докам добавил ссылки на зависимости для select2:

Код: html

1.
2.
3.
4.
5.

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</environment>

прописал функцию:

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.

$(document).ready(function () {
            $('.selectСhoice').select2({
                dropdownParent: $('#divHouse'),
                placeholder: "Выберите дом",
                minimumInputLength: 1, // only start searching when the user has input 3 or more characters
                maximumInputLength: 5, // only allow terms up to 20 characters long
                language: "ru"
            });
        });

При срабатывании обработчика выдает ошибку, что нет такой функции:
авторjQuery.Deferred exception: $(...).select2 is not a function TypeError: $(...).select2 is not a function at HTMLDocument. (http://localhost:18246/Friends/Create:362:27) at e (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30005) at t (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30307) undefined

Uncaught TypeError: $(...).select2 is not a function at HTMLDocument. (Create:362) at e (VM18 jquery.min.js:2) at t (VM18 jquery.min.js:2)

Пробовал устанавливать через npm:

Код: c#

npm install select2

А потом прописывать ссылки как описано в доках:

Код: html

1.
2.

<link href="vendor/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="vendor/select2/dist/js/select2.min.js"></script>

Ошибка:
авторGET http://localhost:18246/Friends/vendor/select2/dist/css/select2.min.css net::ERR_ABORTED 404 (Not Found) Create:201 GET http://localhost:18246/Friends/vendor/select2/dist/js/select2.min.js net::ERR_ABORTED 404 (Not Found) Create:200 GET http://localhost:18246/Friends/vendor/select2/dist/css/select2.min.css net::ERR_ABORTED 404 (Not Found) Create:201 GET http://localhost:18246/Friends/vendor/select2/dist/js/select2.min.js net::ERR_ABORTED 404 (Not Found)

Папка, которая указывается в ссылках в проекте не создается - устанавливается куда-то в другое место.

После этого решил вообще вручную всё скопировать и прописать ссылки:

скопировал c github папку dist c папками css и js в папку проекта "wwwroot/lib", прописал пути:

Код: html

1.
2.
3.
4.
5.
6.

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>

    <link href="~/lib/dist_select2/css/select2.min.css" rel="stylesheet" />
    <script src="~/lib/dist_select2/js/select2.min.js"></script>
</environment>

Ошибка:

Код: html

1.
2.
3.

jquery.min.js:2 jQuery.Deferred exception: $(...).select2 is not a function TypeError: $(...).select2 is not a function at HTMLDocument. (http://localhost:18246/Friends/Create:363:32) at e (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30005) at t (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30307) undefined

Uncaught TypeError: $(...).select2 is not a function at HTMLDocument. (Create:363) at e (VM11 jquery.min.js:2) at t (VM11 jquery.min.js:2)

Исходник страницы:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.

 @model voteCollector.Models.Friend

@{
    ViewData["Title"] = "Create";
}
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions {
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Context).RequestToken;
    }
}

<h1>Create</h1>

<h4>Friend</h4>
<hr />
<div class="row">
    <input type="hidden" id="RequestVerificationToken"
           name="RequestVerificationToken" value="@GetAntiXsrfRequestToken()">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FamilyName" class="control-label"></label>
                <input asp-for="FamilyName" class="form-control" />
                <span asp-validation-for="FamilyName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PatronymicName" class="control-label"></label>
                <input asp-for="PatronymicName" class="form-control" />
                <span asp-validation-for="PatronymicName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DateBirth" class="control-label"></label>
                <input asp-for="DateBirth" class="form-control" />
                <span asp-validation-for="DateBirth" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CityId" class="control-label"></label>
                <select id="CityId" asp-for="CityId" class="form-control" asp-items="ViewBag.CityId"></select>
            </div>
            <div class="form-group">
                <label asp-for="DistrictId" class="control-label"></label>
                <select asp-for="DistrictId" class="form-control" asp-items="ViewBag.DistrictId"></select>
            </div>
            <div class="form-group">
                <label asp-for="StreetId" class="control-label"></label>
                <select id="StreetId" asp-for="StreetId" class="form-control" asp-items="ViewBag.StreetId"></select>
            </div>
            @*<div class="form-group">
                <label asp-for="MicroDistrictId" class="control-label"></label>
                <select asp-for="MicroDistrictId" class="form-control" asp-items="ViewBag.MicroDistrictId"></select>
            </div>*@
            <div id="divHouse" class="form-group">
                <label asp-for="HouseId" class="control-label"></label>
                <select class="selectСhoice" id="HouseId" asp-for="HouseId" class="form-control" asp-items="ViewBag.GetHouses"></select>
            </div>
            
            <div class="form-group">
                <label asp-for="GroupUId" class="control-label"></label>
                <select asp-for="GroupUId" class="form-control" asp-items="ViewBag.GroupUId"></select>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>

    <link href="~/lib/dist_select2/css/select2.min.css" rel="stylesheet" />
    <script src="~/lib/dist_select2/js/select2.min.js"></script>
</environment>

@section Scripts {

    <script>
$(document).ready(function () {
            $('.selectСhoice').select2({
                dropdownParent: $('#divHouse'),
                placeholder: "Выберите дом",
                minimumInputLength: 1, // only start searching when the user has input 3 or more characters
                maximumInputLength: 5, // only allow terms up to 20 characters long
                language: "ru"
            });
        });

    </script>
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    @{
        if (TempData["msg"] != null)
        {
            <script>
            alert('@TempData["msg"]')
            </script>
        }
    }

Структура проекта после ручного копирования библиотек на рис.

Судя по тексту ошибок он всегда пытается найти библиотеку Select2 не в местах, которые прописываю в ссылках, а в исходном jQuery проекта, где его нет.

Как правильно подключить данную библиотеку в проект?

...

Рейтинг:

0 / 0

18.05.2021, 14:15

| Ответить | Цитировать | Написать

Подключение библиотеки jQuery UI Select2 в проекте C# asp net core

#40071316

Vlad__i__mir

Гость

Аналогичная ситуация возникает при попытке подключения других JS-библиотек. Н-р:

Код: html

1.
2.
3.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>

авторjQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function at HTMLDocument. (http://localhost:18246/Friends:470:31) at e (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30005) at t (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30307) undefined

jquery.min.js:2 Uncaught TypeError: $(...).DataTable is not a function at HTMLDocument. (Friends:470) at e (VM319 jquery.min.js:2) at t (VM319 jquery.min.js:2)

...

Рейтинг:

0 / 0

19.05.2021, 14:16

| Ответить | Цитировать | Написать

Подключение библиотеки jQuery UI Select2 в проекте C# asp net core

#40071320

Vlad__i__mir

Гость

Коллеги, с этим нужно что-то делать! Ибо вопрос требует инклюзивного и всестороннего рассмотрения и безотлагательного решения! :)

...

Рейтинг:

0 / 0

19.05.2021, 14:19

| Ответить | Цитировать | Написать

Подключение библиотеки jQuery UI Select2 в проекте C# asp net core

#40071371

Vlad__i__mir

Гость

Среда разработки - VS 2019

...

Рейтинг:

0 / 0

19.05.2021, 15:18

| Ответить | Цитировать | Написать

Подключение библиотеки jQuery UI Select2 в проекте C# asp net core

#40071652

Vlad__i__mir

Гость

Vlad__i__mir,
Чтобы внешние библиотеки проекта asp net core подтянулись в проект нужно прописать ссылки на них на странице проекта Layuot.chtml в блоке:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<environment include="Development">
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
 
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css" />
        <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
    </environment>

...

Рейтинг:

0 / 0

20.05.2021, 13:38

| Ответить | Цитировать | Написать

Подключение библиотеки jQuery UI Select2 в проекте C# asp net core

#40073375

Relic Hunter

Участник

Откуда: AB

Сообщения: 7 268

Рейтинг: 0 / 0

Vlad__i__mir,

пешы на реакте, npm install ..., import ... в модулях спасут демократию от вселенского хаоса.

...

Рейтинг:

0 / 0

27.05.2021, 04:10

| Ответить | Цитировать | Написать

6 сообщений из 6, страница 1 из 1

Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Подключение библиотеки jQuery UI Select2 в проекте C# asp net core

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=18&msg=40071316&tid=1354528]:	0ms
get settings:	9ms
get forum list:	11ms
check forum access:	3ms
check topic access:	3ms
track hit:	97ms
get topic data:	10ms
get forum data:	2ms
get page messages:	36ms
get tp. blocked users:	1ms
others:	264ms

total:	436ms