Как разделить форму с проверкой на несколько страниц

Question

У меня есть серверное приложение Blazor с EditForm и DataAnnotationValidator для проверки. Я хочу разделить форму на несколько страниц с помощью кнопок «Назад» и «Вперед», а кнопка «Вперед» должна проверять только поля на текущей странице.

В настоящее время я получил разделение формы с помощью оператора switch, который проверяет переменную «Page». Если нажать кнопку «Вперед», страница увеличивается, а после перерисовки страницы отображаются другие поля. Но я не могу проверить только одну страницу, потому что валидатор проверяет всю модель, и поэтому я не могу отличить действительную и недействительную страницу.

Нужно ли использовать EditForm для каждой страницы свалидатор в подмодели, которая имеет только поля текущей страницы или есть другое, более элегантное решение.

Answer 1

Вы можете попробовать ответ Исаака, или вы можете пойти другим путем и создать различные формы редактирования для каждой вкладки. Я не знаю, что было бы лучше. Проверьте эту статью, выпущенную Крисом Сэйнти на беглом утверждении.

Статья здесь

Теоретически вы можете создать валидатор для каждой вкладки, который обрабатывает только свою собственную проверку вкладок

Answer 2

Полагаю, вы можете реализовать это, используя Templated Components. Вот ссылка на образец TabSet, созданный Стивом Андерсоном, который вы можете эмулировать для создания своей формы заявки. Образец относительно старый, и вам, возможно, придется его настроить (пространства имен, имена событий жизненного цикла и т. Д.). Вам не нужно создавать свою форму ввода в виде TabSet, хотя многие это делают, но принцип тот же. Вы отображаете одну вкладку и скрываете другие ... то есть перемещаетесь с одной страницы или раздела на следующую.

Примечание. Ваша форма ввода остается на той же странице (страница компонента, компонент с @pageдиректива и шаблон маршрута). Вы не создаете страницу для каждой части формы ввода, как вы, возможно, сделали ...

Я полагаю, вам не нужно добавлять EditForm в каждую вкладку (частичную часть формы ввода). Вы можете обернуть TabSet (или как вы называете этот компонент) компонентом EditForm.

Для частичной проверки формы ввода данных вам нужно будет выполнить проверку вручную, вызвав метод EditContext.Validate. .

Мне кажется, это может прекрасно работать. Пожалуйста, сообщите о ваших достижениях. Мне любопытно, если мои предложения действительно обычные.

Надеюсь, это поможет ...