Эта история о том, как я мог обрабатывать списки выбора в Blazor.
Сначала позвольте мне объяснить, что такое Blazor. Blazor — это веб-фреймворк, который позволяет запускать .NET Core в браузере и больше не является экспериментальным. Он пишет на C# во внешнем интерфейсе, а не на javascript. Конечно, в некоторых ситуациях нам нужно полагаться на javascript, но не так сильно.
Вам может быть интересно, сложно ли создать список выбора в Blazor?
У меня возникли некоторые проблемы с его использованием, поэтому я решил выяснить, как работают списки выбора в Blazor как для одного значения, так и для нескольких значений.
Мы переписываемся, что вы создали новый проект Blazor в Visual Studio, я назвал проект SelectListCfg.
Выбор одного значения SelectList
Список выбора с выбором одного значения прост в использовании, но требует немного времени, чтобы решить, как связать значение со свойством.
Представьте, что у нас есть список стран, вы должны выбрать одну страну, чтобы ее единственное значение соответствовало изображению ниже:
Итак, обычный список выбора будет таким:
<select class="form-control" @bind="country"> <option selected disabled value="-1"> choose one country</option> <option value="USA"> USA</option> <option value="France"> France</option> <option value="England"> England</option> <option value="Japan"> Japan</option> <option value="India"> India</option> </select>
Нам нужно выбрать страну, после выбора мы покажем выбранную страну перед выбранной страной. Для этого обновления метка удовлетворяет. Чтобы получить уведомление об изменении выбора, мы должны привязать значение списка выбора к свойству через @bind="country" в выборе икод ниже в разделе @code:
@code {
// One Value Selection
string country;
}
Таким образом, общий код для этой части должен быть таким:
Теперь запустите проект, ваш код должен работать, как показано ниже:
Это было легко, не так ли?
Проблема, с которой я столкнулся, заключалась в множественном списке выбора, как заставить Blazor привязать к нему значение? Предлагает ли Blazor возможность сделать это? Может быть, да, но я не смог найти, поэтому я написал свой собственный компонент списка множественного выбора. Я назвал этот компонент SelectMultiple, вы можете использовать его как хотите.
Для этого в папке pages добавьте новый компонент Razor, назовите его SelectMultiple.
Теперь давайте посмотрим, чего мы хотим от компонента множественного списка выбора. Это должно быть настроено, чтобы мы могли установить его на несколько или нет, привязать к списку с динамическим типом и, конечно же, с настраиваемым пользовательским интерфейсом. Для этой цели наш компонент принимает 3 аргумента:
bind-values — может быть списком любого типа (string, int, …)
несколько — правда или ложь
заголовок — отображать, когда ничего не выбрано
classNames — Classess для настройки пользовательского интерфейса
Представьте, что у нас есть список фруктов, вы выбираете то, что вам нравится, но несколько вариантов. Во-первых, мы должны использовать компонент внутри index.razor, затем мы напишем компонент изнутри. Список кодов выглядит следующим образом:
Еще одна вещь, которую нам нужно передать список значений для выбора, мы использовали параметры внутри компонента, вы можете отправить в качестве параметра или использовать foreach внутри списка.
Внутри раздела кода вы можете увидеть строку типа списка, чтобы удалить ошибку для значения привязки:
// multiple value selection List<string> fruits = new List<string>();
Пришло время написать внутри компонента, откройте SelectMultiple.razor.
Добавьте код ниже внутри него:
затем нам нужно использовать чистый javascript, вызвать его из компонента Blazor, некоторые пользовательские функции, которые javascript могут упростить нашу работу:
Откройте /Pages/_Hosts.cshtml, затем в нижней части
<script src="_framework/blazor.server.js"></script>
добавьте этот код:
Теперь наш компонент готов к использованию,
Просто позвольте мне объяснить, по частям, потому что это может немного сбивать с толку.
Сторона Blazor:
Код компонента начинается с того, что сообщает динамическому типу, что список выбора должен работать. TItem может справиться с таким требованием, мы не хотим указывать статический тип, мы хотим, чтобы наш список выбора работал с любым другим типом, например (Integer, String, …).
Затем мы написали сам элемент ‹select› рядом с входными параметрами, внутри элемента ‹select› мы использовали ‹CacadingValue› и @ChildContent внутри него, чтобы поймать дочерний компонент (элементы ‹option› из index.razor). Дочерний компонент можно визуализировать с помощью параметра типа RenderFragment.
Метод проверки ConvertByType внутри раздела кода. Мы используем его для обновления списка при изменении выбора в списке выбора с учетом динамических типов.
Сторона Javascript:
Когда выбор в списке выбора изменяется, мы запускаем функцию javascript onOptionSelect, чтобы получить список выбранных параметров, но с использованием javascript.
Если мы завершим весь код для обоих типов списка выбора:
Index.razor
SelectMultiple.razor
Код Javascript в нижней части _Host.cshtml
Таким образом, результат всех списков выбора должен быть похож на gif ниже:
Примечание: выберите несколько фруктов, удерживая клавишу Ctrl, для большего удобства вы можете использовать некоторые плагины начальной загрузки, такие как bootstrap-select для лучшего взаимодействия с пользователем.
Надеюсь, вам понравилась эта история, спасибо за чтение.
