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

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

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

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

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

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

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

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

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

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

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

Следующий код устанавливает значение элемента 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;
  }
}

Здесь элементы .

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

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

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

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

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

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

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

Создадим новое Web-приложение и расположим на его начальной странице элемент управления .

При попытке запуска приложения в окне браузера мы не увидим ничего кроме заголовка. Это объясняется тем, что элемент 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.

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.

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

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

Размещенный на странице элемент ).

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

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

Для добавления шагов в ).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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