Навигация по Web-приложению

Элемент управления Wizard

Элемент управления Wizard фактически представляет собой аналог элемента MultiView с той лишь разницей, что он в основном ориентирован на создание возможности пошагового выполнения пользователем каких-либо действий. В нем реализован механизм перехода к следующему либо предыдущему шагу, возможно также переходить к определенному шагу, минуя предшествующий (нелинейная навигация ), и т. д.

Размещенный на странице элемент Wizard содержит кнопки навигации и боковую панель, включающую все стадии, которые в нем определены ( рис. 7.13).

Рис. 7.13. Пример размещения на странице элемента Wizard

Боковую панель можно спрятать. Это необходимо сделать в том случае, когда нужно, чтобы пользователь не мог пропустить хотя бы один шаг и изменить последовательность выполняемых действий. Для того чтобы отключить боковую панель, необходимо установить свойство DisplaySideBar равным false.

После того как элемент Wizard добавлен на страницу, нужно определить шаги (добавить или удалить уже существующие) и их содержимое. В качестве содержимого шагов возможно использование любого элемента ASP.NET либо HTML.

Для добавления шагов в Wizard необходимо открыть свойство WizardSteps, а затем в открывшемся окне WizardStep Collection Editor добавить или удалить нужное количество шагов ( рис. 7.14).

Рис. 7.14. Окно добавления и настройки шагов элемента Wizard

Каждому шагу соответствует свой набор свойств. Наиболее важными из них являются следующие:

В качестве примера создадим аналог примера регистрации пользователя, рассмотренного ранее, с использованием элемента MultiView. Для этого разместим внутри страницы элемент Wizard и определим для него следующие свойства:

1. Добавим необходимое количество шагов и установим для них значения свойства Title, как показано на рис. 7.15.
   

   
   Рис. 7.15. Добавление шагов создаваемого мастера регистрации
2. Установим значения свойств DisplaySideBar=false, CancelButton Text=Отмена, FinishCompleteButtonText=Готово, FinishPreviousButton Text=Предыдущий, StartNextButtonText=Следующий>, StepNextButton Text=Следующий>, StepPreviousButtonText=<Предыдущий.
3. Добавим содержимое первого шага. Для этого установим курсор внутри области содержимого, как показано на рис. 7.16, и добавим таблицу, аналогичную таблице "Регистрация элемента MultiView " предыдущего примера.
   

   
   Рис. 7.16. Добавление содержимого очередного шага мастера регистрации
4. Перейдем к следующему шагу элемента Wizard. Для этого необходимо ввести его значение в свойство ActiveStepIndex. Если значение этого свойства равно -1, будет отображаться первый шаг последовательности, т.к. это значение соответствует индексу шага по умолчанию. Первый шаг будет отображаться также, если значение свойства ActiveStepIndex будет равно 0. Для перехода ко второму по счету шагу установим значение этого свойства равным 1.
5. Введем содержимое второго шага, которое соответствует таблице "Контрольный вопрос элемента MultiView " предыдущего примера.
6. Аналогичные действия повторим для третьего шага.

Результат проделанной работы и шаги мастера представлены на рис. 7.17.

увеличить изображение
Рис. 7.17. Добавление содержимого очередного шага мастера регистрации

Важным аспектом использования элемента Wizard является возможность программирования его реакции на возникающие события. Самыми важными событиями, обработка которых должна осуществляться Wizard, являются следующие:

Очень полезную функциональность предоставляет метод GetHistory, возвращающий коллекцию объектов WizardStepBase, представляющих собой шаги, которые уже прошел пользователь. Первый объект коллекции представляет последний шаг, к которому обращался пользователь, второй - предпоследний и т. д.

Краткие итоги

Современные Web-приложения представляют собой сложную совокупность взаимосвязанных страниц. При разработке такого приложения необходимо уделять внимание не только дизайну, но и организации удобной навигации.

При реализации больших Web-приложений, содержащих большое количество страниц, целесообразно использовать карты сайта, предоставляющие удобный механизм определения структуры страниц приложения в виде XML-файла достаточно простой структуры. Реализация самого механизма навигации внутри приложения реализуется с применением стандартных элементов управления, таких как SiteMapPath, Menu, TreeView. Используя в качестве источника данных XML-файл, содержащий описание структуры приложения, данные элементы управления позволяют отображать ее, а также осуществлять переход к любым определенным в рамках данной структуры узлам. Каждый из элементов управления содержит уникальный набор свойств, позволяющих определить правила отображения структуры приложения, а также возможность перехода к его узлам.

Использование перечисленных выше элементов управления дает возможность реализовывать полноценную систему навигации по страницам Web-приложения без применения элементов программирования. Очень часто этих приемов оказывается достаточно для реализации навигации, однако в ряде случаев приходится прибегать к реализации системы навигации по страницам Web-приложения с использованием программных средств навигации. Это нужно в том случае, когда необходима реализация нестандартных принципов навигации. В этом случае возможна организация доступа к карте сайта посредством API-интерфейса, предоставляемого классом SiteMap.

Очень часто при реализации Web-приложения бывает необходимо организовывать взаимодействие пользователя со многими страницами, логически сильно связанными друг с другом. Наиболее предпочтительным решением в данном случае является использование элементов управления, позволяющих реализовывать управление множеством представлений, а также механизм мастеров, содержащих логику пошагового алгоритма выполнения каких-либо действий. В ASP.NET для этих целей существуют такие компоненты, как MultiView и Wizard.