HTML 5 - оно
Скажите, почему, чтобы эта хрень работала, нужно обязательно вставлять костыли?
С привязками по-Блейзоровски, но суть и так ясна. Вот так не работает - можно вводить вручную любые значения меньше мин и больше макс.
<input type="number" min="@Min" max="@Max" @bind-Value />
Чтобы работало, нужно обязательно вставить джаваскрипт-костыль
<input type="number" min="@Min" max="@Max" @bind-Value onkeyup="if(value<min) value=min; if(value>max) value=max;" />
Нахрена делать атрибуты, которые не работают, а потом костылями их исправлять?
Попробовал то же самое с Блейзором с привязками к модели - херня тормозящая, которая перерисовывает значение на правильное через раз.
<input type="number" min="@Min" max="@Max" @bind-Value @onkeyup="(_=>{if(Value<Min) Value=Min; if(Value>Max) Value=Max;})" />
Или можно отдельно метод выделить
<input type="number" min="@Min" max="@Max" @bind-Value @onkeyup="Validate" />
void Validate(KeyboardEventArgs a)
{
if (Value < Min) Value = Min;
if (Value > Max) Value = Max;
}
Джаваскрипт же срабатывает мгновенно. Хоть где-то он лучше.
в Razor это делается в модели
[Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")] public int MaximumAccommodation { get; set; }
Тут не валидация важна, а чтобы юзер не мог ввести неправильные данные.
А так у нас для модели свой фреймворк, и с меня требуют, чтобы я его использовал. Его весьма нетривиально натянуть на подходы в Разоре и Блейзоре, хотя я пытаюсь. Не хотят они по-нормальнму писать.
https://blazorise.com/docs/components/numeric-picker
валидация после ухода фокуса
Да понятно, что можно заюзать разные готовые компоненты. Наверное, так и сделаю, а то за...ся уже с этим голым ХТМЛ и джаваскрипт - это же не для людей сделно. Хотел заюзать по максимуму Бутстрэп и поменьше компонентов из сторонних фреймворков. Но похоже, это хреновый путь боли и велосипедов. Я вот Радзен использую - там это тоже есть.
Но вопрос-то про ХТМЛ 5 - почему атрибуты есть, но они не работают, и надо всё дописывать скриптами? Если это такой подход - типа, мы дали вам некие "якоря" - атрибуты, к которым можно привязаться, считать у них значения. А всё остальное реализуйте сами. Но в том-то и дело, что и такого принципа тоже нет. Часть атрибутов работает, а часть нет. Например, type=numeric на теге input ограничивает ввод, не позволяет ввести нечисловые вещи. А другие атрибуты - не ограничивают то, что по их названию вроде как должны. Т.е. всё работает неоднозначно, непонятно как, и надо читать тонны документации, чтобы понять. А сверху это ещё присыпано "у разных браузеров может быть разное поведение". И если какой-нибудь Эппл скажет, что в их браузерах они решили всё делать через дупу, то все должны сменить ориентацию.
onkeyup="if(value<min) value=min; if(value>max) value=max;"
Этот подход тоже хреновенький - не даёт ввести первую фифру, меньшую min, если min это одна цифра. Т.е. допустим мин это 3, макс 50, хочешь ввести 15, последовательно нажимая кнопки - не получается. Только если сразу всё число из буфера обмена скопировать. Но в Блейзоре, если используешь байндинг, то событие changed уже занято.
Не, я у себя это в модели валидирую, но хотел как можно проще. А проще нельзя - хотят, чтобы было сложно... Наверное, плюну и заюзаю контрол из готового фреймворка.
Блейзором с привязками к модели - херня тормозящая
танцору всегда что то мешает 
и извращения обычно вредны...
- Валидация полей ввода происходит обычно после потери фокуса поля ввода.
- Установка Value происходит после каких либо событий которые можно перехватить.
Можно запретить использование пустого поля и ввода букв
<input type="number" inputmode="numeric" pattern="\d*" min="@Min" max="@Max" @bind-value="Value" required />
Вот с Bootstrap валидацией. Для чего-то большего нужно и писать побольше либо пользовать готовые компоненты
<EditForm Model="@exampleModel">
<InputNumber TValue="int?" EnableMinMax="true" Min="@Min" Max="@Max" Value="@exampleModel.NumberProperty" ValueExpression="@( () => exampleModel.NumberProperty )"></InputNumber>
<EditForm>
@code{
private ExampleModel exampleModel = new ExampleModel();
class ExampleModel
{
public int? NumberProperty { get; set; }
}
}
</EditForm>
в Razor это делается в модели
[Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")] public int MaximumAccommodation { get; set; }
Во, вспомнил, как это называется. Это у вас серверная валидация. Она у меня тоже есть, только там самописное, без этих атрибутов. А я ещё хочу вместо клиенсткой валидации просто запретить юзеру вводить неправильные значения.
Кстати, а как вы привяжете проперти из Range (мин и макс) к пропертям контрола, в котором вводится значение? Я в своё время тоже радовался - классная же валидация. А когда захотел привязаться, так надо было из модели в модель представления эти атрибуты вытаскивать. И пошла возьба с рефлексией и вставка этих атрибутов в виде обычных свойств в модели представления.
Если ваши контролы могут вытаскивать атрибуты и привязываться к их свойствам, то ок. Но в основном они не могут. Это для ASP.NET MVC Майкрософт написала UI фреймворк, который из атрибутов вытаскивал значения. Но это серверный фреймворк и серверная валидация, а не привязка на клиенте. Натравите на это верху какой-нибудь KnockoutJS, Ангуляр или что вы на клиенте используете, и попробуйте в нём вытащить значения атрибутов из модели.
почему атрибуты есть, но они не работают
работают "в ограниченном пространстве" 
Работает только для 1го неправильного ввода. Код видимо стыбрили, так как у 3х броусеров именно так неправильно работает
Хотел заюзать по максимуму Бутстрэп
там же концепт валидация после ввода
Я и говорю, что там свой фреймворк для этого написан. Все эти Html.ValueFor или как их там - расширения всякие. Там под ними куча HTML разметки с джаваскриптом. А захотите вы поменять клиентский фреймворк. Точнее, заюзать, наконец, сторонний, а не использовать эти расширения. Как будете тягать в него валидирующие значения из атрибутов модели?
https://blazorise.com/docs/components/numeric-picker
валидация после ухода фокуса
Почемую юзаю Бутстрэп в дополнение к подобным фреймворкам - потому что во всех этих фреймворках, что смотрел, нет нормальных контейнеров для контролов. Аналогов стек панелей, гридов (не дата гридов), панелей с прилипаниями и прочего - как в WPF или MAUI. Сам в дивы пихай как-нибудь, епись с замудрённой ХТМЛной флексбоксиной. Т.е. контролов мы тебе во фреймворк напихали, а с основными лейаутами разбирайся сам. А в Бутстрэп что-то подобное завезли. Корявенькое и со своими замутками, но завезли.
Docking Layout всегда был проблемой но найти можно
https://www.htmlelements.com/blazor/blazor-ui/demos/blazor...
А захотите вы поменять клиентский фреймворк. Точнее, заюзать, наконец, сторонний, а не использовать эти расширения. Как будете тягать в него валидирующие значения из атрибутов модели?
это в моей ситуации как если бы производители автомобилей предусматривали бы возможность передвигаться по луне.
А захотите вы поменять клиентский фреймворк. Точнее, заюзать, наконец, сторонний, а не использовать эти расширения. Как будете тягать в него валидирующие значения из атрибутов модели?это в моей ситуации как если бы производители автомобилей предусматривали бы возможность передвигаться по луне.
Остаётся только порадоваться за вас, что у вас из всех требований к автомобилям - чёрный цвет. ))
как это нету? А енто шо?
https://blazorise.com/docs/components/layout
https://blazorise.com/docs/helpers/utilities/grid
https://demos.telerik.com/blazor-ui/tilelayout/overview
https://demos.telerik.com/blazor-ui/form/layout
https://docs.devexpress.com/Blazor/404362/components/layou...
Первый это копия Бутстрэпа по функциональности. Второй и третий - ок. Но когда это появилось? Год-два назад это всё было доступно?
Вот у МС с WPF и MAUI всё сразу идёт из коробки и бесплатно. По крайней мере уж базовые-то вещи. И вот такого нет, что половина атрибутов либо работает, либо не стандартизирована и отличается от браузера к браузеру.
назад
список