Гость
Войти | Профиль | Очистить
Действия ...
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Подключение библиотеки jQuery UI Select2 в проекте C# asp net core / 6 сообщений из 6, страница 1 из 1
18.05.2021, 14:15
    #40071056
Vlad__i__mir
Vlad__i__mir
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подключение библиотеки jQuery UI Select2 в проекте C# asp net core
Здравствуйте!

В проекте 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#
1.
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
| Ответить | Цитировать | Написать  
19.05.2021, 14:16
    #40071316
Vlad__i__mir
Vlad__i__mir
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подключение библиотеки jQuery UI Select2 в проекте C# asp net core
Аналогичная ситуация возникает при попытке подключения других 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:19
    #40071320
Vlad__i__mir
Vlad__i__mir
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подключение библиотеки jQuery UI Select2 в проекте C# asp net core
Коллеги, с этим нужно что-то делать! Ибо вопрос требует инклюзивного и всестороннего рассмотрения и безотлагательного решения! :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2021, 15:18
    #40071371
Vlad__i__mir
Vlad__i__mir
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подключение библиотеки jQuery UI Select2 в проекте C# asp net core
Среда разработки - VS 2019
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.05.2021, 13:38
    #40071652
Vlad__i__mir
Vlad__i__mir
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подключение библиотеки jQuery UI Select2 в проекте C# asp net core
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
| Ответить | Цитировать | Написать  
27.05.2021, 04:10
    #40073375
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подключение библиотеки jQuery UI Select2 в проекте C# asp net core
Vlad__i__mir,

пешы на реакте, npm install ..., import ... в модулях спасут демократию от вселенского хаоса.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Подключение библиотеки jQuery UI Select2 в проекте C# asp net core / 6 сообщений из 6, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 137ms
Закрыть
start [/forum/topic.php?fid=18&mobile=1&tid=1354528]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 5ms
check topic access:
 5ms
track hit:
 34ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 41ms
get tp. blocked users:
 1ms
others: 15ms
total:  137ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]