Карта сайта ASP.NET 2.0 создает структуру навигации по сайту.

Автор：Eve Cole Время обновления：2009-06-30 16:47:46

Если вы когда-либо путешествовали по незнакомому месту, вы знаете, насколько важны карты — они могут помочь сделать ваше путешествие более комфортным. Тот же принцип применим и к веб-сайтам. Веб-сайт должен предоставлять посетителям простую, но гибкую структуру навигации, чтобы они могли легко переходить к различным частям веб-сайта. ASP.NET 2.0 предоставляет функцию SiteMap, которая помогает реализовать эту функцию. В этой статье объясняется, что такое карты сайта, и описывается, как разработать структуру навигации веб-сайта, которая их использует.

1. Карта сайта

Карта сайта — это XML-файл (с расширением .sitemap), который подробно описывает всю навигационную структуру вашего веб-сайта. Вы можете использовать файлы карты сайта в соответствии со всеми вашими требованиями.

Пример поможет объяснить файлы карты сайта. На рис. 1 показана структура каталогов примера веб-сайта.

Рисунок 1. Структура веб-сайта.

На рисунке домашняя страница (Default.aspx) и страница «Свяжитесь с нами» (contact.aspx) расположены в корневой папке веб-сайта. Также есть две подпапки: «Продукты» и «Услуги». В каждой подпапке есть две веб-формы: соответствующие Product1.aspx и Product2.aspx, а также Service1.aspx и Service2.aspx.

Теперь просто выполните следующие действия, и вы сможете использовать карту сайта для описания структуры вашего веб-сайта:

1. Создайте новый веб-сайт с помощью VS.NET 2005.

2. Щелкните веб-сайт правой кнопкой мыши и выберите «Добавить новый элемент...».

3. Выберите Карта сайта в диалоговом окне «Добавить новый элемент...» (см. рис. 2) и назовите ее Web.sitemap.

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

Введите следующую XML-разметку в файл web.sitemap:

＜?xml version="1.0"coding="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Главная" описание="Мой веб-сайт"＞
＜siteMapNode url="~/products/default.aspx" title="Продукты"＞
＜siteMapNode url="~/products/product1.aspx" title="Первый продукт" /＞
＜siteMapNode url="~/products/product2.aspx" title="Второй продукт" /＞
＜/siteMapNode＞
＜siteMapNode url="~/services/default.aspx" title="Services"＞
＜siteMapNode url="~/services/service1.aspx" title="Первая служба" /＞
＜siteMapNode url="~/services/service2.aspx" title="Вторая служба" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Свяжитесь с нами" /＞
＜/siteMapNode＞
＜/Карта сайта＞

Корневой файл карты сайта — siteMap. Он содержит узел siteMapNode и в зависимости от структуры вашего сайта может содержать несколько узлов siteMapNode.

Этот тег siteMapNode имеет четыре важных атрибута (см. таблицу 1).

В заголовке

описания	свойства
отображается	заголовок страницы. Это свойство часто используется элементами управления навигацией для отображения заголовка URL-адреса.
url	отображает URL-адрес страницы, описанной этим узлом.
описание	указывает описание этой страницы. Вы можете использовать это описание для отображения содержимого подсказки.
роли.	Используя обрезку безопасности (обсуждается позже), этот атрибут определяет роли, которым разрешен доступ к этой странице.

Таблица 1. Важные атрибуты тега <siteMapNode>

Это формирует вашу карту сайта. Теперь вы можете использовать его для целей навигации.
2. Как использовать карту сайта

Вы можете использовать файл карты сайта, созданный в предыдущем разделе, тремя распространенными способами:

· Использование элемента управления SiteMapPath.

· Использование элемента управления источником данных SiteMap.

· Использование класса SiteMap

Элемент управления SiteMapPath позволяет создавать навигационные цепочки. На рисунке 3 показано, что такое «хлебная крошка».

Рисунок 3. Навигация по навигационной цепочке.

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

ASP.NET 2.0 также поставляется с хорошим набором элементов управления навигацией, включая TreeView и меню. С помощью элемента управления источником данных SiteMap вы можете привязать файлы карты сайта к этим элементам управления.

В некоторых случаях встроенные элементы управления навигацией могут не соответствовать вашим требованиям. В этом случае вы можете программно получить доступ к файлу карты сайта и прочитать различные узлы siteMapNode. Затем вы можете создать собственную структуру навигации, используя свойства title и URL siteMapNode.

3. Используйте элемент управления SiteMapPath.

Прежде чем вдаваться в подробности, давайте сначала создадим необходимую нам структуру каталогов и веб-форму. Сначала добавьте на сайт две папки «Продукты» и «Услуги». Затем добавьте новую главную страницу MasterPage.master. Затем добавьте веб-формы, показанные в таблице 2, и обязательно задайте для них главную страницу при их добавлении.

Папка	имени веб-формы
Default.aspx	Корневой веб-сайт
Contact.aspx	Корневой веб-сайт
Default.aspx	Продукты
Product1.aspx	Продукты
Product2.aspx	Продукты
Default.aspx	Службы
Service1.aspx	Службы
Service2.aspx	Службы

Таблица 2. Список веб-форм

Теперь откройте главную страницу, которую вы добавили ранее. Перетащите на него элемент управления Label и элемент управления SiteMapPath. Затем установите для свойства Text метки значение «Добро пожаловать!».

В следующем списке показаны все теги на странице MasterPage.master:

＜%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="сервер"＞
＜title＞Страница без названия＜/title＞
＜/голова＞
<тело>
＜form id="form1" runat="server"＞
<дел>
＜asp:Label ID="Label1" runat="server" Font-Size="XX-Large" ForeColor="Blue" Text="Добро пожаловать!"＞＜/asp:Label＞＜br /＞
<asp:SiteMapPath ID="SiteMapPath1" runat="сервер"
Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : "＞
＜PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜CurrentNodeStyle ForeColor="#333333" /＞
＜NodeStyle Font-Bold="True" ForeColor="#7C6F57" /＞
＜RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜/asp:SiteMapPath＞
＜бр /＞
＜бр /＞
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
＜/asp:contentplaceholder＞
＜/дел＞
＜/форма＞
＜/тело＞
＜/html＞

Теперь откройте Default.aspx из корневой папки. Default.aspx должен выглядеть так, как показано на рисунке 4.

Рис. 4. Пример запуска Default.aspx.

Чтобы создать эту страницу, добавьте таблицу с 4 строками и 1 столбцом. Перетащите элемент управления Label в верхнюю строку и установите для его свойства Text значение «Добро пожаловать на наш веб-сайт!». Затем перетащите три элемента управления HyperLink в оставшиеся строки и задайте их свойства Text и NavigateUrl, как показано в таблице 3.

Идентификатор гиперссылки	Свойство текста	NavigateUrl Свойство
HyperLink1	Продукты	~/products/default.aspx
Службы	HyperLink2	~/Services/default.aspx
HyperLink3	Свяжитесь с нами	~/contact.aspxТаблица

3. Настройка свойств гиперссылок

В следующем списке показана полная разметка в Default.aspx:

＜%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Title="Страница без названия" %＞
<asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Сервер">
＜центр＞
<таблица>
＜тр＞
＜td ширина="60%"＞
<asp:Label ID="Label1" runat="server" Font-Size="X-Large"
Text="Добро пожаловать на наш веб-сайт!"＞＜/asp:Label＞＜/td＞
＜/тр＞
＜тр＞
＜td ширина="60%"＞
<asp:HyperLink ID="HyperLink1" runat="сервер"
Font-Size="X-Large" NavigateUrl="~/Products/Default.aspx">Продукты
＜/asp:HyperLink＞＜/td＞
＜/тр＞
＜тр＞
＜td ширина="60%"＞
<asp:HyperLink ID="HyperLink2" runat="server" Font-Size="X-Large"
NavigateUrl="~/Services/Default.aspx">Сервисы
＜/asp:HyperLink＞＜/td＞
＜/тр＞
＜тр＞
＜td ширина="60%"＞
<asp:HyperLink ID="HyperLink3" runat="сервер"
Font-Size="X-Large" NavigateUrl="~/Contact.aspx">Свяжитесь с нами
＜/asp:HyperLink＞＜/td＞
＜/тр＞
＜/таблица＞
＜/центр＞
＜/asp:Content＞

Теперь откройте Default.aspx из папки «Продукты» и создайте его, как показано на рисунке 5.

Рисунок 5: Страница по умолчанию папки «Продукты».

В таблице 4 перечислены все гиперссылки, используемые в веб-формах.

Идентификатор гиперссылки	Текстовое свойство	NavigateUrl Свойство
HyperLink1	Первый продукт	~/products/product1.aspx
HyperLink2	Второй продукт	~/products/product2.aspx

Таблица 4. Информация гиперссылки на странице «По умолчанию» в папке «Продукты»

Следуя тому же принципу, создайте Default.aspx из папки Services, результат показан на рисунке 6.

Рисунок 6. Страница по умолчанию папки «Службы»

В Таблице 5 перечислена информация о гиперссылках, используемая в веб-формах.

Идентификатор гиперссылки	Текстовое свойство	NavigateUrl Свойство
HyperLink1	First Service	~/Services/service1.aspx
HyperLink2	Second Service	~/Services/service2.aspx

Таблица 5. Информация о гиперссылке на странице «По умолчанию» в папке «Продукты»

Наконец, добавьте тег к каждой веб-форме и установите ее свойство Text, как показано в таблице 6.

Метка Форма

Текстовый атрибут	имени веб-формы.
~/Contact.aspx	Свяжитесь с нами
~/Products/Product1.aspx	Первые сведения о продукте
~/Products/Product2.aspx	Вторые сведения о продукте
~/Services/Service1.aspx	Сведения о первой услуге
~/Services/Service2. aspx	сведений о второй службе

6: установка свойства Text метки из оставшейся веб-формы

Теперь запустите Default.aspx из корневой папки и перейдите на страницу Product1.aspx. На рис. 7 показан пример запуска веб-формы.

Рисунок 7. Пример запуска Product1.aspx.

Обратите внимание, как атрибуты title и URL файла web.sitemap используются для создания «хлебных крошек». Также обратите внимание, как родительский элемент отображается вместе с текущим заголовком страницы. Попробуйте перейти на различные страницы и наблюдать за элементом управления SiteMapPath.

4. Используйте элемент управления источником данных SiteMap.

Использование карт сайта не ограничивается элементом управления SiteMapPath. Вы также можете прикрепить карту сайта к элементу управления с возможностью навигации (например, TreeView). В следующем примере вы будете использовать тот же файл карты сайта для реализации привязки к элементу управления TreeView.

Добавьте на веб-сайт новую веб-форму SiteMapDataSourceDemo.aspx. Затем перетащите в форму элемент управления источником данных SiteMap (SiteMapDataSource1) и элемент управления TreeView (TreeView1). Установите для свойства DataSourceID этого элемента управления TreeView значение SiteMapDataSource1. Кроме того, установите для свойства ShowLines элемента управления TreeView значение true. Вот полная разметка со страницы SiteMapDataSourceDemo.aspx:

＜%@ Page Language="C#" AutoEventWireup="true"
CodeFile="SiteMapDataSourceDemo.aspx.cs"
Inherits="SiteMapDataSourceDemo" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="сервер"＞
＜title＞Страница без названия＜/title＞
＜/голова＞
<тело>
＜form id="form1" runat="server"＞
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ШоуЛайнс="Истина"＞
＜/asp:TreeView＞
＜asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /＞
＜/форма＞
＜/тело＞
＜/html＞

Теперь запустите веб-форму и посмотрите, как та же структура навигации автоматически создается в TreeView (см. рис. 8).

Рисунок 8. Привязка файла карты сайта к элементу управления TreeView.

5. Используйте класс SiteMap.

Отображение данных карты сайта в элементе управления SiteMapPath или TreeView работает отлично. Однако иногда вам может потребоваться разработать собственную логику генерации. Например, вы можете разработать собственный элемент управления навигацией, который отображает родительский элемент только вертикально. В этом случае вам необходимо получить доступ к файлу карты сайта программным способом. Класс SiteMap позволяет добиться именно этого.

Этот путь SiteMap имеет два важных свойства: RootNode и CurrentNode. Все их типы — SiteMapNode, и оба они позволяют ссылаться на корневой узел и текущий узел карты сайта соответственно. В таблице 7 перечислены некоторые важные свойства класса SiteMapNode.

Описание	свойства
ChildNodes	представляет коллекцию всех дочерних узлов текущего узла.
HasChildNodes	указывает, имеет ли узел карты сайта дочерние узлы (истина/ложь).
Title	возвращает значение атрибута title, указанного в файле карты сайта.
Url	возвращает в файле карты сайта. Значение указанного атрибута URL-адреса.
Описание	возвращает значение атрибута описания, указанного в файле карты сайта.
ParentNode	указывает ссылку на родительский узел карты сайта текущего узла.

Таблица 7. Некоторые важные атрибуты класса SiteMapNode.

В следующем примере используется путь SiteMap для доступа к одному узлу файла карты сайта. Затем программно добавьте их в элемент управления TreeView.

Добавьте веб-форму под названием SiteMapCustom.aspx. Затем перетащите на него элемент управления TreeView. Добавьте код листинга в событие Page_Load этой веб-формы:

protected void Page_Load (отправитель объекта, EventArgs e)
{
int count = SiteMap.RootNode.ChildNodes.Count;
for (int i = 0; i < count; i++)
{
SiteMapNode smNode=SiteMap.RootNode.ChildNodes[i];
TreeNode tvNode = новый TreeNode(smNode.Title, "", "", smNode.Url, "");
TreeView1.Nodes.Add(tvNode);
если (smNode.HasChildNodes)
{
int childCount=smNode.ChildNodes.Count;
for (int j = 0; j <childCount; j++)
{
SiteMapNode smChildNode = smNode.ChildNodes[j];
TreeNode tvChildNode = новый TreeNode(smChildNode.Title,
"", "",
smChildNode.Url, "");
tvNode.ChildNodes.Add(tvChildNode);
}
}
}
}

Здесь вы сначала получаете общее количество дочерних узлов в корневом узле. Затем вы просматриваете коллекцию ChildNodes корневого узла. На каждой итерации вы создаете новый экземпляр класса TreeNode и указываете его заголовок и URL-адрес в его конструкторе. Затем вы добавляете этот TreeNode в коллекцию узлов TreeView. Затем вы проверяете, есть ли у текущего SiteMapNode дочерние узлы. Если есть, вы пересекаете его и повторяете процесс создания TreeNode. Обратите внимание, что на этот раз вы добавляете новые TreeNodes в коллекцию ChildNodes текущего объекта TreeNode.

Обратите внимание, что вы используете 2 в цикле, потому что знаете, что существует только два уровня вложенности. Чтобы сделать вашу логику более общей, вы можете использовать рекурсию для заполнения TreeView.

Запустите веб-форму, и вы снова увидите нечто похожее на рисунок 8.

6. Используйте меры безопасности.

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

Чтобы протестировать обновленную систему безопасности, вам необходимо включить функции членства и ролей вашего сайта. Откройте файл web.config и добавьте следующие теги:

＜режим аутентификации="Формы" /＞
＜разрешение＞
＜запретить пользователей="?"＞＜/запретить＞
＜/авторизация＞

Здесь вы установили режим аутентификации «Формы». Вы также можете установить правила авторизации, чтобы анонимным пользователям был заблокирован доступ к сайту. Затем вам необходимо включить функцию управления ролями, добавив в файл web.config следующие флаги:

＜roleManager включен = "true" /＞

Затем выберите «Веб-сайт>Конфигурация ASP.NET» в меню VS.NET, чтобы открыть инструмент управления веб-сайтом. Используйте этот инструмент, чтобы добавить две роли: ProductTesters и ServiceTesters (см. рис. 9). Когда пользователь, принадлежащий к роли ProductTesters, входит в систему, вы хотите отображать только ссылки, связанные с продуктом, в элементе управления TreeView навигации. Аналогично, когда пользователь, принадлежащий роли ServiceTesters, регистрируется, в TreeView должны отображаться только ссылки, связанные с сервисом.

Рисунок 9. Добавление ролей с помощью инструментов управления веб-сайтом.

Используйте инструмент управления веб-сайтом, чтобы создать двух пользователей с именами user1 и user2. Добавьте пользователя user1 в роль ProductTesters и пользователя user2 в роль ServiceTesters (см. рис. 10).

Рисунок 10. Создание пользователей с помощью инструментов управления веб-сайтом.

Примечание. По умолчанию информация о пользователях и ролях хранится в базе данных ASPNETDB в папке App_Data вашего веб-сайта. Эта база данных автоматически создается ASP.NET, если она не существует.

Теперь добавьте на сайт новый файл карты сайта SecurityTrimming.sitemap и введите следующие теги:

＜?xml version="1.0"coding="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Главная" описание="Мой веб-сайт"＞
＜siteMapNode title="Products" roles="ProductTesters"＞
＜siteMapNode url="~/products/product1.aspx" title="Первый продукт" /＞
＜siteMapNode url="~/products/product2.aspx" title="Второй продукт" /＞
＜/siteMapNode＞
＜siteMapNode title="Services" roles="ServiceTesters"＞
＜siteMapNode url="~/services/service1.aspx" title="Первая служба" /＞
＜siteMapNode url="~/services/service2.aspx" title="Вторая служба" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Свяжитесь с нами" /＞
＜/siteMapNode＞
＜/Карта сайта＞

Большая часть разметки здесь такая же, как и в файле web.sitemap. Однако к продуктам и услугам добавлен важный атрибут — siteMapNodes:roles. Атрибут roles указывает роли, которые могут получить доступ к этому узлу и его дочерним узлам. Поскольку ссылки, связанные с продуктами, отображаются только для пользователей, принадлежащих к роли ProductTesters, вы установите для атрибута roles siteMapNode Products значение ProductTesters. Следуя той же логике, вы должны установить для атрибута roles сайта Services siteMapNode значение ServiceTesters. SiteMapNodes без указанного атрибута roles доступны всем пользователям. Также обратите внимание, что узлы продуктов и услуг больше не имеют указанных атрибутов URL.

Теперь вам необходимо настроить поставщика карты сайта и включить обновление безопасности, чтобы элемент управления источником данных SiteMap мог работать в соответствии с вашими требованиями. Добавьте следующие теги в файл web.config:

<siteMap defaultProvider="myprovider" Enabled="true">
＜провайдеры＞
＜добавить имя="мойпровайдер"
type="System.Web.XmlSiteMapProvider"
siteMapFile="SecurityTrimming.sitemap"
SecurityTrimmingEnabled="true" />
＜/провайдеры＞

Здесь вы добавляете раздел <siteMap> и указываете поставщика, который указывает на файл SecurityTrimming.sitemap. Обратите внимание, что для атрибута securityTrimmingEnabled здесь установлено значение true для поддержки обрезки безопасности. После настройки раздела <siteMap> элемент управления источником данных SiteMap автоматически «подхватывает» эти параметры из этого раздела.

Добавьте на веб-сайт новую веб-форму под названием Login.aspx. Затем перетащите на него элемент управления входом и задайте для его свойства DestinationPageUrl значение «~/SiteMapDataSourceDemo.aspx». Обратите внимание, что вы ранее разработали SiteMapDataSourceDemo.aspx.

Запустите Login.aspx (см. рис. 11) и введите учетные данные для пользователя user1.

Рисунок 11: Страница входа в систему

После успешного входа в систему вы должны увидеть TreeView, показанный на рисунке 12. Поскольку пользователь1 принадлежит роли ProductTesters, ссылка на сервис скрыта.

Рисунок 12. Используйте безопасный ремонт

7. Резюме

Карта сайта — это файл XML, содержащий все детали структуры вашего веб-сайта. Вы можете использовать файлы карты сайта для создания структур навигации. Три распространенных способа использования файлов карты сайта: использование элемента управления SiteMapPath, использование элемента управления источником данных SiteMap или использование класса SiteMap. Вы также можете использовать функцию, называемую обрезкой безопасности, для поддержки ролевой безопасности для создаваемых навигационных ссылок. Вместе эти элементы управления и классы помогают создать профессиональную структуру навигации для вашего веб-сайта.