LAV_ СИТспец_маг2014-15 / Модуль1_2013-14 / Web-приложения ASP_NET
.doc
Рассматриваются вопросы организации навигации по страницам 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
Рис. 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 содержит следующий ряд свойств, с помощью которых можно управлять навигацией:
Следующий код устанавливает значение элемента 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 кнопочного элемента управления. SwitcViewByIndex - позволяет перейти к представлению с определенным числовым индексом, значение которого также задается в свойстве 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 Каждому шагу соответствует свой набор свойств. Наиболее важными из них являются следующие:
В качестве примера создадим аналог примера регистрации пользователя, рассмотренного ранее, с использованием элемента MultiView. Для этого разместим внутри страницы элемент Wizard и определим для него следующие свойства:
Рис. 7.15. Добавление шагов создаваемого мастера регистрации
Рис. 7.16. Добавление содержимого очередного шага мастера регистрации
Результат проделанной работы и шаги мастера представлены на рис. 7.17.
Рис. 7.17. Добавление содержимого очередного шага мастера регистрации Важным аспектом использования элемента Wizard является возможность программирования его реакции на возникающие события. Самыми важными событиями, обработка которых должна осуществляться Wizard, являются следующие:
Очень полезную функциональность предоставляет метод GetHistory, возвращающий коллекцию объектов WizardStepBase, представляющих собой шаги, которые уже прошел пользователь. Первый объект коллекции представляет последний шаг, к которому обращался пользователь, второй - предпоследний и т. д. Краткие итоги Современные Web-приложения представляют собой сложную совокупность взаимосвязанных страниц. При разработке такого приложения необходимо уделять внимание не только дизайну, но и организации удобной навигации. При реализации больших Web-приложений, содержащих большое количество страниц, целесообразно использовать карты сайта, предоставляющие удобный механизм определения структуры страниц приложения в виде XML-файла достаточно простой структуры. Реализация самого механизма навигации внутри приложения реализуется с применением стандартных элементов управления, таких как SiteMapPath, Menu, TreeView. Используя в качестве источника данных XML-файл, содержащий описание структуры приложения, данные элементы управления позволяют отображать ее, а также осуществлять переход к любым определенным в рамках данной структуры узлам. Каждый из элементов управления содержит уникальный набор свойств, позволяющих определить правила отображения структуры приложения, а также возможность перехода к его узлам. Использование перечисленных выше элементов управления дает возможность реализовывать полноценную систему навигации по страницам Web-приложения без применения элементов программирования. Очень часто этих приемов оказывается достаточно для реализации навигации, однако в ряде случаев приходится прибегать к реализации системы навигации по страницам Web-приложения с использованием программных средств навигации. Это нужно в том случае, когда необходима реализация нестандартных принципов навигации. В этом случае возможна организация доступа к карте сайта посредством API-интерфейса, предоставляемого классом SiteMap. Очень часто при реализации Web-приложения бывает необходимо организовывать взаимодействие пользователя со многими страницами, логически сильно связанными друг с другом. Наиболее предпочтительным решением в данном случае является использование элементов управления, позволяющих реализовывать управление множеством представлений, а также механизм мастеров, содержащих логику пошагового алгоритма выполнения каких-либо действий. В ASP.NET для этих целей существуют такие компоненты, как MultiView и Wizard. |
Add
New Item. В открывшемся окне выберем пункт
Site Map и нажмем кнопку OK.
