ASP.Net. Лекция 11. Навигация по сайту (исходники)Источник: ASPNET Mania Асмик Гаряка
До сих пор мы создавали отдельные страницы. Веб-приложения, которые обычно создаются для работы в Интернет, состоят из большого количества взаимосвязанных страниц. Переход с одной страницы на другую происходит по гиперссылкам. На многих сайтах создаются различные средства для путешествий по страницам. Панели навигации располагаются в верхней части страницы в виде полосы, справа или слева в виде древовидной структуры.
Для того, чтобы упростить разработку такой функциональности, в ASP.NET 2.0 предоставлено возможность в виде готовых элементов управления навигации. Site MapСтруктура навигации должна быть описана в карте сайта. Она находится в файле .sitemap формата XML, который можно создать в диалоге New File, выбрав пункт Site Map. Имя этого файла умолчанию - web.sitemap. Карта сайта служит источником информации для всех элементов управления группы Navigation. С ней можно работать программно с помощью класса SiteMap или через элемент управления-источник данных SiteMapDataSource. Узлы siteMapNode могут вкладываться друг в друга, создавая иерархию. Логика вложенности узлов никак не связана с физическим расположением файлов. Каждый атрибут url в файле .sitemap должен быть уникальным. Схема формата .sitemap
Чтобы сделать карту сайта доступной для элементов управления, используется провайдер типа XmlSiteMapProvider. Можно разработать собственный провайдер. Редактирование карты сайта в Visual Studio 2005 облегчается с помощью технологии IntelliSense. Атрибут title узла карты сайта создает текстовое описание страницы. Он используется как текст гиперссылки, создаваемой в TreeView или Menu. Атрибут description задает текст подсказки(Tooltip), связанной с этой гиперссылкой. Атрибут url описывает путь к странице внутри веб-сайта. При этом для страниц в корневой директории достаточно указать их название. Если страница находится в поддиректории, путь указывается с помощью прямого слеша.
Элементы управления для навигации по сайту - Treeview, Menu, SiteMenuPath. Некоторые элементы навигации могут работать с картой напрямую, например, SiteMenuPath, но Menu и Treeview могут показывать карту сайта, только получая данные из SiteMapDataSource. Элемент управления SiteMapPathПодобную панель, которая показывает путь от главной страницы к текущей, часто называют breadcrumb (хлебные крошки). MSDN Home > ASP.NET Developer Center > Reference > Using ASP.NET Controls Вероятно, это связано со сказкой о Мальчике-с-Пальчик, который бросал хлебные крошки по пути в лес, чтобы найти путь домой. Пользователь большого и сложного веб-узла тоже должен знать, где он находится, и не потеряться в лабиринте. Поэтому можно назвать этот элемент еще и нитью Ариадны. Он состоит из последовательности гиперссылок на все вышестоящие узлы сайта. Текущая страница отображена простым текстом. Эту настройку можно изменить, установив свойство RenderCurrentNodeAsLink в True. Для того, чтобы на странице работал этот элемент, даже не нужно источника данных. Он автоматически читает карту сайта из файла Web.sitemap. Достаточно просто перетащить его на страницу. Имеются 4 свойства стиля, каждый из которых задается отдельно: для корневого элемента, для разделителя, обычного узла и текущего узла. У SiteMapPath имеется такая же возможность автоформатирования, как и у многих других элементов управления. Свойство PathDirection позволяет изменить направление от корня к текущей странице на обратное. Например, если у вас был таким: Главная : Игра : Таблица ,то после изменения значения PathDirection на CurrentToRoot станет таким: Таблица : Игра : Главная Текстовый атрибут PathSeparator задает разделитель между узлами. Например, в первом примере это " > ", который ставится по умолчанию, а во втором " : ". Пробелы здесь существенны. Похожие атрибуты был и в календаре - к примеру NextMonthText. Для того, чтобы задать изображения, в качестве разделителя, можно использовать шаблон PathSeparatorTemplate.
Свойство ParentLevelsDisplayed позволяет ограничить количество отображаемых родительских узлов. Если оно равно -1(по умолчанию), то показываются все узлы. Если подержать курсор мыши над элементом, появится подсказка, текст которой берется из атрибута description соответствующего узла карты сайта. Отключить отображение подсказки можно с помощью свойства ShowToolTips="false". Всего имеется 4 шаблона: PathSeparatorTemplate, NodeTemplate, RootTemplate и CurrentNodeTemplate, с помощью которых можно вставлять любые элементы управления в различные части SiteMapPath. Для каждой из частей можно определить и собственный стиль. SiteMapDataSourceИсточник данных SiteMapDataSource работает с помощью провайдера SiteMapProvider. Этот источник данных не поддерживает кеширование, как другие. Он может быть связан только с файлом карты сайта. В простейшем виде объявляется так:
Свойство ShowStartingNode определяет, будет ли элемент читать корневой узел карты сайта. Если не установлено, то в коллекцию узлов попадут только дочерние элементы корневого узла. StartFromCurrentNode =False задает возможность читать только узлы, начиная с текущей страницы. Свойство FlatDepth задает количество уровней вложенности, которое читается из карты сайта. По умолчанию это -1, то есть читаются все доступные уровни. SiteMapProvider может быть полезным при написании собственных провайдеров карты сайта. SiteMapViewType определяет форму представления узлов. По умолчанию это Tree. Если значение равно Path, то будет читаться путь между корневым узлом и текущим, как в элементе управления SiteMapPath. TreeViewЭлемент TreeView создан специально для показа иерархической информации. Он может черпать информацию как из любого XML-файла через XmlDataSource, так и из карты сайта посредством SiteMapDataSource. Как следует из его названия, TreeView показывает данные в виде дерева, причем его узлы можно раскрывать и закрывать, выбирать отдельные «листья». При этом будут запускаться события, которые можно обработать. TreeView состоит из узлов , которые соединены между собой отношениями «родитель-потомок». У одного родителя может быть один или несколько потомков. Узлы, у которых нет родителя, называются корневыми . Их в элементе управления может быть несколько. Узлы, у которых нет потомков, называются листьями . При декларации TreeView на странице узлы описываются тегами TreeNode. Допускается любой уровень вложенности узлов друг в друга. Узлы элемента управления можно редактировать визуально
Если нужно программно добавлять дочерние узлы, свойство PopulateOnDemand нужно установить в true. Внешний вид TreeView можно менять самым разнообразным способом. Можно включить показ линий, соединяющих узлы.
Внешний вид линий можно отредактировать, при этом с помощью средства TreeView Line Generator будут созданы изображения для всех ее фрагментов. Вместо текста в узлах можно показывать изображения, заданные свойством ImageUrl. Свойство ImageSet имеет набор предопределенных значков для разных типов узлов. Например, MSDN придаст вашему дереву сходство с TreeView на сайте msdn.com, а XPFileExplorer с программой Explorer в Windows XP. В качестве изображения для узлов можно задать любые картинки.
Если источником данных служит XmlDataSource, то его узлы можно привязать к элементу TreeView. Создайте на странице Treeview. У него есть «умный ярлык», который позволит настроить источник данных. Настройка происходит так же, как и у элемента управления Xml. После этого нужно настроить способы показа данных. По умолчанию он будет показывать названия узлов, а не их внутреннее содержание. В SmartTag выберите пункт Edit TreeNode Databindings. В результате в редакторе должен появиться примерно такой текст.
Значение TextField используется, если нужно показать значения атрибутов узла в исходном XML-файле, а #InnerText указывает текст между открывающими и закрывающими теками узла. Если выбираем источником данных SiteMap, то на странице создается еще один элемент управления SiteMapDataSource.
На странице элемент TreeView будет выглядеть так: Содержательная часть этого меню находится в файле карты сайта, а форматирование производится в свойствах TreeView. Свойство AutoGenerateDataBindings позволяет автоматически заполнять узлы информацией из карты сайта. Программное управление TreeView.У TreeView есть множество событий. Событие SelectedNodeChanged запускается, когда пользователь выбирает узел.
Можно программно раскрывать и закрывать узлы.
Событие TreeNodePopulate позволяет динамически заполнять узлы, при этом можно экономить память, если заполнять узлы только по требованию после расрытия родительского узла. Событие TreeNodePopulate вызывается, если действие(например, раскрытие) проведено с узлом, у которого SelectAction настроен на это действие. В следующем примере заполним значения элемента управления TreeView из базы данных Northwind. Родительские узлы - категории продуктов, которые заполняются данными о продуктах тогда, когда узел необходимо раскрыть.
Вспомогательная функция устанавливает соединение с базой данных и возвращает SqlDataReader - самый быстрый способ чтения данных.
При работе с базами данных важно перехватывать исключения.
Конструктор TreeNode может вызываться без параметров, но он перегружен. Вариант, который здесь используется, позволяет задать текст узла и значение Value(заполняется значением CategoryID), которое необходимо, чтобы найти в базе продукты этой категории. При раскрытии узла с категорией будет вызываться обработчик.
TreeView позволяет не только показывать информацию, но ставить флажки рядом с узлами. Это полезно, если в нем содержится информация о товарах, при этом пользователь может выбрать некоторые из них. Свойство ShowCheckBoxes допускает 5 значений: None, Root, Parent, Leaf, All.
При этом рядом с узлами-листьями появляются флажки. Значение флажков можно прочитать программно.
Флажки стоят у родительских узлов, потому что именно там находятся названия блюд. В обработчике можно динамически показывать сумму текущего заказа.
Цена записана в первом дочернем поле с индексом 0. При этом обращаться свойство Text было бы неправильно, потому что там находится отформатированный текст, например «306 руб.», который нельзя преобразовать в число. Элемент управления MenuВыпадающее меню можно создать средствами одного только css. Это красивое решение, но требует большого объема кода. Также необходимо предусмотреть возможность просмотра разными браузерами. Большинство разработчиков создают меню с помощью JavaScript. В ASP.NET 2.0 создание выпадающего меню любого уровня вложенности требует всего 2 строчек.
Вся остальная работа достается ASP.NET. А ее много, чтобы убедиться в это, посмотрите сгенерированный код в браузере. Menu идеален для отображения большого количества иерархической информации. Занимая мало места, узлы меню раскрываются при наведении курсора мыши. Стрелка рядом с пунктом меню означает, что в нем есть подменю. Вместо стрелки можно использовать изображение, задав свойство DynamicPopOutImageUrl. Картинки также можно использовать в качестве разделителей между пунктами меню. Menu допускает горизонтальную и вертикальную ориентацию, которая задается свойством Orientation. При горизонтальной ориентации можно получить полоску меню. Меню состоит из статической и динамической частей, каждый со своим набором стилей.
Стили можно поменять «одним махом» с помощью автоформатирования. Статические пункты отображаются постоянно, а динамические при выборе родительских узлов. Для этого автоматически генерируется код JavaScript. Свойство StaticDisplayLevels по умолчанию равно 1, то есть показываются только главные пункты меню, а остальные появляются в момент наведения мышки. Если это значение изменить, получим статическое многоуровневое меню. На странице разные меню можно привязать к разным источникам SiteMapDataSource, тогда при одной карте сайте они будут показывать его разные подмножества.
Одно из меню должно показывать разделы сайта, второе - возможности пользователя.
Пункты меню могут быть описаны на странице, а также добавлены программно.
Когда элемент управления привязан к карте сайта, то пункты меню представляют собой гиперссылки на страницы. Событие MenuItemClick позволяет определить поведение страницы при выборе пунктов меню, когда он заполняется другими способами, например, через XmlDataSource. В параметре MenuEventArgs находится информация и о выбранном пункте, и о родительском узле.
ЗаключениеБогатые возможности системы навигации ASP.NET 2.0 позволяют отделить логическое представление карты сайта от его визуального представления, сэкономить время на разработку. |