ГГУ им. Ф. Скорины

http://www.gsu.by

Разработка Web-приложений ASP .NET с использованием
Visual Studio .NET

7. Лекция: Навигация по Web-приложению:
версия для печати и PDA
Рассматриваются
вопросы организации навигации по страницам Web-приложения,
разбираются вопросы использования существующих в ASP.NET элементов
управления, предназначенных для организации эффективных механизмов
навигации по Web-приложению. Рассматриваются возможности организации
пошаговых процессов сбора информации подобно традиционным мастерам.

Цель лекции: изучить принципы создания навигации
по страницам Web-приложения на основе возможностей, предоставляемых
ASP.NET.

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

Карты сайта

Карты сайта целесообразно
использовать в случае, когда Web-приложение содержит большое
количество страниц. Карты сайта
предлагают удобный механизм определения структуры страниц
приложения, а также ее отображение с помощью нескольких элементов
управления. Эти элементы управления расположены в разделе Navigation
панели Toolbox. Основных элементов управления три - SiteMapPath, Menu, TreeView. Все эти элементы
предназначены для решения одной и той же задачи - предоставления
возможности пользователю Web-приложения осуществлять навигацию по страницам. Различие между ними
заключается в способах отображения ссылок на соответствующие
страницы. Для использования любого из перечисленных компонентов
необходимо определить структуру приложения, которая хранится
отдельно. В качестве хранилища структуры обычно выступает XML-файл.
В Visual Studio 2005 существует уже определенная структура
XML-файла, предназначенная для хранения структуры приложения, - это
файлы типа .sitemap. Содержимое такого
файла достаточно простое, что позволяет легко вносить данные о
структуре приложения. Разделение элементов, отвечающих за
отображение данных, и элементов, содержащих эти данные, позволяет
значительно упростить редактирование приложения: для изменения
дизайна достаточно изменить настройки визуальных компонентов, для
внесения дополнений - добавить данные в XML-файл.

В качестве примера рассмотрим добавление навигации по страницам Web-приложения,
созданного ранее на базе мастер-страниц.

Прежде всего, добавим XML-файл и введем данные о
структуре приложения.

Для добавления XML-файла воспользуемся стандартными
средствами Visual Studio 2005 Website Add New Item. В открывшемся окне выберем пункт
Site Map и нажмем кнопку OK.

Рис. 7.1.  Добавление
карты сайта

В результате будет создан файл Web.sitemap, содержащий заготовки для ввода
структуры Web-приложения.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/
SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>

Как видно из исходного кода, карта
сайта должна начинаться с корневого узла <siteMap>. Элементы структуры
описываются в тегах <siteMapNode>.
С помощью этих тегов можно указывать иерархию элементов
Web-приложения: для этого их просто необходимо расположить внутри
соответствующего тега <siteMapNode>. Свойства каждого тэга
необходимы для задания соответствующих значений. В примере выше
видно, что каждому элементу соответствует три свойства: url, title, description. Их назначение
очевидно: url используется для указания
интернет-адреса страницы, которой соответствует этот элемент, title задает наименование элемента,
отображаемое элементом управления, description - описание элемента, которое
отображается в виде всплывающей подсказки при наведении указателя
мыши на соответствующий элемент.

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

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/
SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Домашняя" description="">
<siteMapNode url="Default2.aspx" title="Страница 2"
description="Перейти к странице 2" />
<siteMapNode url="Default3.aspx" title="Страница 3"
description="" />
<siteMapNode url="Default4.aspx" title="Страница 4">
<siteMapNode url="Default5.aspx" title="Страница 5"/>
<siteMapNode url="Default6.aspx" title="Страница 6"/>
</siteMapNode>
</siteMapNode>
</siteMap>

Использование элементов управления TreeView, Menu и
SiteMapPath

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

Использование TreeView и Menu

Обратимся к предыдущему примеру, использующему
мастер-страницы. В соответствии с описанием карты сайта создадим шесть файлов aspx и
добавим их в проект (обратите внимание на то, что часть этих файлов
уже создана в предыдущем примере). В результате добавления файлов
Web-приложение должно содержать файлы Default.aspx, Default2.aspx, Default3.aspx, ...,
Default6.aspx.

В режиме редактирования дизайна откроем мастер-страницу
MainMasterPage.master и добавим элементы
TreeView и Menu в область меню, расположенную слева, как
показано на рис.
7.2.

Рис. 7.2.  Добавление
элементов TreeView и Menu

Теперь необходимо задать источник
данных для элементов управления TreeView и Menu.

Рис. 7.3.  Определение
источника данных элемента TreeView

Для этого нужно в свойстве Choose Data Source выбрать
пункт <New data source...> и в открывшемся окне выбрать Site
Map. При этом будет создан и добавлен на страницу источник данных с заданным именем. Исходный код
источника данных выглядит следующим образом:

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Рис. 7.4.  Создание
источника данных SiteMap

После добавления источника
данных произведем настройки внешнего вида элементов TreeView и Menu.

Рис. 7.5.  Настройка
внешнего вида элемента TreeView

Для элемента TreeView
выберем схему оформления Arrows 2, для
Menu-Classic.

После запуска приложения его окно будет выглядеть так
(рис.
7.6). Для перехода к соответствующей странице можно
воспользоваться любым элементом меню либо дерева.

Рис. 7.6.  Окно
Web-приложения после добавления элементов TreeView и Menu

Элементы управления TreeView
и Menu обладают дополнительными
свойствами, с помощью которых возможно изменить их внешний вид в
соответствии с дизайном Web-приложения.

Использование SiteMapPath

В отличие от TreeView и
Menu, SiteMapPath отображает только текущее
положение пользователя в иерархии страниц Web-приложения с
возможностью перехода к верхнему уровню иерархии. Добавим в пример
элемент SiteMapPath.

Для этого необходимо добавить еще одну строку между
заголовком и содержимым мастер-страницы и просто поместить в нее
элемент SiteMapPath. Результат
представлен на рис.
7.7.

Рис. 7.7.  Добавление в
приложение элемента SiteMapPath

Использование частей карты сайта

В некоторых случаях необходимо выводить на экран
структуру некоторой части Web-приложения, а не всю ее, как это было
до сих пор. Например, может потребоваться, чтобы корневой узел не
содержал в себе все остальные элементы приложения. Точнее, в
структуре эта иерархия должна сохраняться, а на экран выводиться
иначе. Для реализации этого эффекта возможно установить свойство
ShowStartingNode элемента SiteMapDataSource равным true. В этом случае корневой элемент на экран
выводиться не будет (рис.
7.8).

Рис. 7.8.  Результат
отключения вывода на экран корневого элемента иерархии страниц
Web-приложения

Переход к нему будет возможен посредством SiteMapPath. В случае же, если необходимо
выводить корневой элемент, но так, чтобы остальные элементы
приложения не входили в него, необходимо изменить карту сайта, добавив фиктивный узел, не
привязанный к какому-либо элементу приложения.

Навигация с использованием программирования

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

Рассмотрим простейшие принципы создания подобных
элементов.

Доступ к карте сайта можно
организовать посредством API-интерфейса, который предоставляется
классом SiteMap. Этот класс содержит
статические свойства CurrentNode и RootNode. Эти свойства возвращают объект SiteMapNode, с помощью которого можно
извлекать информацию из карты сайта, т.
е. обращаться к свойствам url, description, title
и т. д. Объект SiteMapNode содержит
следующий ряд свойств, с помощью которых можно управлять навигацией:

ParentNode

Возвращает узел, расположенный
на один уровень выше относительно текущего. В случае, если
текущим является корневой узел, возвращает null.

ChildNodes

Возвращает коллекцию всех
дочерних узлов. Проверяет свойство HasChildNodes, чтобы узнать, существуют
ли дочерние узлы.

PreviousSibling

Возвращает предыдущий узел,
который находится на том же уровне; если такого не существует,
возвращает null.

NextSibling

Возвращает следующий узел,
который находится на том же уровне; если такого не существует,
возвращает null.

Следующий код устанавливает значение элемента Label, находящегося в заголовке страницы,
равным значению поля description
текущего узла карты сайта:

lbl_BannerText.Text = SiteMap.CurrentNode.Description;

Еще один пример демонстрирует возможность создания
гиперссылок, осуществляющих перемещение к последующей или к
предыдущей странице.

protected void Page_Load(object sender, EventArgs e)
{
if (SiteMap.CurrentNode.NextSibling != null)
{
hl_Next.NavigateUrl = SiteMap.CurrentNode.NextSibling.Url;
hl_Next.Visible = true;
}
else
{
hl_Next.Visible = false;
}

if (SiteMap.CurrentNode.PreviousSibling != null)
{
hl_Previous.NavigateUrl = SiteMap.CurrentNode.
PreviousSibling.Url;
hl_Previous.Visible = true;
}
else
{
hl_Previous.Visible = false;
}
}

Здесь элементы hl_Next и
hl_Previos являются элементами hyperlink. Данный пример позволяет
перемещаться к предыдущей либо последующей страницам иерархии
приложения в пределах одного уровня. Пример выполнения приложения
представлен на рис.
7.9.

Рис. 7.9.  Окно
приложения, реализующего программируемую навигацию

Как видно из рисунка, при активной четвертой странице
переход к следующей странице невозможен, т. к. она является
вложенной и относится к следующему уровню иерархии.

При создании навигации можно
не ограничиваться только стандартными элементами управления, такими
как TreeView и Menu. Возможно использование и других
элементов управления в связке с картой
сайта. Например, возможно связать элемент GridView с картой
сайта, настроить шаблоны его отображения и использовать как
альтернативный способ организации навигации. Правда этот подход также имеет
ограничения. Так, при нем возможно отображение только элементов
текущего уровня. При необходимости отобразить вложенные элементы
придется применять вложенные элементы управления. Более подробно
использование элемента GridView
описывается далее, в лекции, посвященной работе с базами данных.
Кроме того, о дополнительных возможностях организации навигации в рамках Web-приложения можно узнать
в [1].

Использование MultiView и Wizard

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

Использование элемента MultiView

Данный элемент управления позволяет реализовывать
управление множеством представлений.
Фактически он позволяет создавать несколько представлений, только одно из которых
отображается при работе пользователя с данной страницей. MultiView не имеет пользовательского
интерфейса по умолчанию и отображает те данные, которые в него будут
помещены. Содержимое, добавляемое в MultiView, должно располагаться в элементе
управления View.

Рассмотрим пример создания страницы регистрации
пользователя с использованием MultiView.

Создадим новое Web-приложение и расположим на его
начальной странице элемент управления MultiView. В данный элемент управления добавим
три элемента View. В каждый из элементов
View добавим необходимые элементы для
ввода данных о пользователе. В результате проделанных операций
страница в режиме редактирования дизайна будет выглядеть так, как
показано на рис.
7.10.

Рис. 7.10.  Реализация
шагов регистрации пользователя с помощью MultiView

При попытке запуска приложения в окне браузера мы не
увидим ничего кроме заголовка. Это объясняется тем, что элемент
MultiView отображает тот раздел, индекс
которого указан в свойстве ActiveViewIndex. По умолчанию в данном
свойстве установлено значение -1. Это означает, что ни один из
разделов не будет показан на экране. Изменять значение элемента
ActiveViewIndex необходимо программно.
Это можно делать различными способами. Одним из таких способов
является размещение на странице элемента управления DropDownList, который содержит список,
включающий все разделы (представления) в
MultiView. Реализовать заполнение списка
возможно следующим образом:

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DropDownList1.DataSource = MultiView1.Views;
DropDownList1.DataTextField = "ID";
DropDownList1.DataBind();
}
}

Теперь при выборе из списка какого-либо элемента
необходимо изменять текущее отображение элемента MultiView. Это можно реализовать следующим
образом:

protected void DropDownList1_SelectedIndexChanged(object sender,
EventArgs e)
{
MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex;
}

Не забудьте, что для того, чтобы элемент управления
DropDownList производил немедленное
обновление страницы при изменении текущего элемента списка,
необходимо установить значение свойства AutoPostBack равным true.

Результат выполнения приложения показан на рис.
7.11.

Рис. 7.11.  Результат
работы приложения, реализующего возможность регистрации пользователя
с использованием MultiView

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

В разделы "Регистрация" и "Контрольный_вопрос"
необходимо добавить кнопку

<asp:Button ID="btnNext" runat="server" CommandName="NextView"
Text="последующий >" />

В разделы "Контрольный_вопрос" и
"Дополнительная_информация" добавить кнопку

<asp:Button ID="btnPrev" runat="server" CommandName="PrevView"
Text="< предыдущий" />

Обратите внимание, что помимо стандартных атрибутов
данные кнопки содержат атрибут CommandName. Именно благодаря ему элемент
MultiView определяет действие, которое
необходимо произвести. Кроме двух уже перечисленных действий, NextView и PrevView, допустимы еще два.

SwitchViewByID - позволяет
перейти к представлению с определенным
значением идентификатора ID. При использовании этой команды значение
ID необходимо указывать в свойстве CommandArgument кнопочного элемента
управления.

SwitchViewByIndex -
позволяет перейти к представлению с
определенным числовым индексом, значение которого также задается в
свойстве CommandArgument кнопочного
элемента управления.

Единственным недостатком данного примера является то,
что при использовании кнопок для перехода к последующему или
предыдущему разделу значение элемента управления DropDownList остается всегда неизменным. Для
исправления этого недостатка необходимо добавить следующий код:

protected void MultiView1_ActiveViewChanged(object sender,
EventArgs e)
{
DropDownList1.SelectedIndex = MultiView1.ActiveViewIndex;
}

Результат запуска приложения представлен на рис.
7.12.

Рис. 7.12.  Добавление
кнопок для перемещения к предыдущему или последующему элементу
MultiView

Элемент управления 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

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

Title

Имя шага, соответствующее
тексту ссылок в боковой панели.

StepType

Тип шага; может принимать
значения Auto, Complete, Finish, Start,
Step; определяет тип кнопок навигации, которые будут показаны для
данного шага. Например, в случае установки значения Auto тип шага определяется на основании
позиции в коллекции; это означает, что для первого шага будет
установлена кнопка Start, для
последнего - Finish, а для всех
промежуточных шагов - Step. В
случае установки значения Step
будут отображаться кнопки Next и
Previous и т. д.

AllowReturn

Определяет, может ли
пользователь возвращаться к этому шагу. Если значение свойства
установлено равным false, при переходе к следующему шагу
пользователь уже не может вернуться к
предыдущему.

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

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

Рис. 7.15.  Добавление
шагов создаваемого мастера регистрации

Установим значения свойств DisplaySideBar=false, CancelButton Text=Отмена,
FinishCompleteButtonText=Готово, FinishPreviousButton
Text=Предыдущий, StartNextButtonText=Следующий>, StepNextButton
Text=Следующий>, StepPreviousButtonText=<Предыдущий.

Добавим содержимое первого шага. Для этого установим курсор
внутри области содержимого, как показано на рис.
7.16, и добавим таблицу, аналогичную таблице "Регистрация
элемента MultiView" предыдущего
примера.

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

Перейдем к следующему шагу элемента Wizard. Для этого необходимо ввести его
значение в свойство ActiveStepIndex.
Если значение этого свойства равно -1, будет отображаться первый
шаг последовательности, т.к. это значение соответствует индексу
шага по умолчанию. Первый шаг будет отображаться также, если
значение свойства ActiveStepIndex
будет равно 0. Для перехода ко второму по счету шагу установим
значение этого свойства равным 1.

Введем содержимое второго шага, которое соответствует таблице
"Контрольный вопрос элемента MultiView" предыдущего примера.

Аналогичные действия повторим для третьего шага.

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

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

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

ActiveStepChanged

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

CancelButtonClick

Возникает в момент нажатия
пользователем на кнопку Cancel (Отмена). Данную кнопку можно
добавить в отображение мастера (по умолчанию она не
отображается), установив значение свойства DisplayCancelButton равным true. Если задано значение свойства
CancelDestintionPageUrl, при
нажатии на кнопку Cancel будет происходить переход к странице,
Url которой указан в данном свойстве.

FinishButtonClick

Возникает в момент нажатия на
кнопку Finish.

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

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

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

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

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

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

© gsu.by