Пошаговое руководство. Добавление структуры переходов веб-узла

Статья
11/05/2008

Обновлен: Ноябрь 2007

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

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

В этом пошаговом руководстве вы узнаете, как выполнить следующие задачи:

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

Обязательные компоненты

Для выполнения инструкций данного пошагового руководства необходимы следующие компоненты:

Средство веб-разработки Microsoft Visual Web Developer;
платформа .NET Framework.

Данное пошаговое руководство подразумевает, что вы умеете работать в Visual Web Developer.

Создание веб-узла, включающего примеры страниц и карту веб-узла

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

Создание веб-узла на базе файловой системы

Откройте Visual Web Developer.
В меню Файл выберите Создать веб-узел (или в меню Файл выберите Создать, а затем выберите Веб-узел).

Откроется диалоговое окно Создать веб-узел.
В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.
В крайнем левом окне Расположение выберите Файловая система, а затем в крайнем правом текстовом поле Расположение введите имя папки, в которой предполагается хранить страницы веб-узла.

Например, введите имя папки C:\WebSites\SiteNavigation.
В поле Язык выберите язык программирования, с которым вы предпочитаете работать.

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

Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Создание карты веб-узла

Для использования структуры переходов веб-узла необходим способ описания расположения страниц в веб-узле. Методом по умолчанию является создание XML-файла, который содержит иерархию веб-узла, включая заголовки страницы и URL-адреса.

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

Создание карты веб-узла

В окне обозревателя решений щелкните правой кнопкой мыши на имени веб-узла и выберите пункт Добавить новый элемент.
В диалоговом окне Добавление нового элемента <Путь> :
1. В группе Установленные шаблоны Visual Studio выберите вариант Карта веб-узла.
2. В поле Имя должно содержаться имя Web.sitemap.
  
  Примечание.
  
  Файл должен называться Web.sitemap и отображаться в корне веб-узла.
3. Нажмите Добавить.
Скопируйте следующее XML содержимое в файл Web.sitemap, перезаписав содержимое по умолчанию.
```
<siteMap>
  <siteMapNode title="Home" description="Home" url="~/home.aspx" >
    <siteMapNode title="Products" description="Our products"
         url="~/Products.aspx">
        <siteMapNode title="Hardware" 
             description="Hardware we offer" 
             url="~/Hardware.aspx" />
        <siteMapNode title="Software" 
             description="Software for sale" 
             url="~/Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" description="Services we offer" 
        url="~/Services.aspx">
        <siteMapNode title="Training" description="Training" 
            url="~/Training.aspx" />
        <siteMapNode title="Consulting" description="Consulting" 
            url="~/Consulting.aspx" />
        <siteMapNode title="Support" description="Support" 
            url="~/Support.aspx" />
      </siteMapNode>
  </siteMapNode>
</siteMap>
```
Файл Web.sitemap содержит набор элементов siteMapNode, вложенных в три уровня. Каждый элемент имеет одинаковую структуру. Они различаются только расположением в иерархии XML.

Путь URL страниц, которые определены в примере файла XML, является неполным. Это означает, что все страницы обрабатываются с URL-адресами, которые являются относительными для корня приложения. Однако можно указать любой URL-адрес для конкретной странице — логическая структура, которая определена на карте веб-узла, не обязательно должен соотноситься с физической разметкой страниц в папках.
Сохраните файл и закройте его.

Примечание.
Файл должен называться Web.sitemap и отображаться в корне веб-узла.

Создание страниц для перехода

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

Создание страниц для перехода

В окне обозревателя решений щелкните правой кнопкой мыши на имени веб-узла и выберите пункт Добавить новый элемент.
В диалоговом окне Добавление нового элемента <Путь> :
1. В группе Установленные шаблоны Visual Studio выберите Форма Web Forms.
2. В окне Имя введите Home.aspx, а затем нажмите кнопку Добавить.
Перейдите в представление конструктора.
На странице Home.aspx введите Home, а затем определите формат Заголовок 1.

Повторите эту процедуру и создайте четыре дополнительных страницы с именами Products.aspx, Hardware.aspx, Software.aspx и Training.aspx. Используйте имя страницы (например Products) в качестве заголовка, благодаря чему вы сможете распознать каждую страницу при отображении в обозревателе.

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

Создание меню переходов с использованием элемента управления TreeView

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

Изображение vbVenusSiteNavigation_TreeView1

Добавление древовидного меню переходов

Откройте страницу Home.aspx.
Из группы Данные в панели элементов перетащите элемент управления SiteMapDataSource на страницу.

В конфигурации по умолчанию элемент управления SiteMapDataSource загружает сведения из файла Web.sitemap, который был создан в разделе "Создание карты веб-узла", представленном ранее в этом пошаговом руководстве, поэтому нет необходимости указывать дополнительные сведения для элемента управления.
Из группы Навигация панели элементов перетащите на страницу элемент управления TreeView.
В меню Задачи TreeView в поле Выбор источника данных выберите SiteMapDataSource1.
Сохраните страницу.

Проверка древовидного меню переходов

Теперь можно выполнить промежуточную проверку системы переходов.

Проверка меню переходов

Для запуска страницы Home.aspx нажмите CTRL+F5.

В дереве показаны два уровня узлов.
Выберите Products для просмотра страницы Products.
- Если страница Products.aspx не создана, щелкните ссылку на созданную страницу.

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

Отображение журнала переходов с помощью элемента управления SiteMapPath

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

Отображение журнала переходов

Откройте страницу Products.aspx и переключитесь в представление конструктора.
Из группы Навигация панели элементов перетащите на страницу элемент управления SiteMapPath, поместите курсор перед элементом управления SiteMapPath, а затем нажмите клавишу ВВОД для создания новой строки.

Элемент управления SiteMapPath отображает положение текущей страницы в иерархии страниц. По умолчанию элемент управления SiteMapPath представляет иерархию, созданную в файле Web.sitemap. Например при отображении страницы Products.aspx элемент управления SiteMapPath отображает следующий путь:

Home > Products
Повторите эту процедуру для других страниц, созданных в этом пошаговом руководстве, за исключением страницы Home.

Даже если вы не поместили элемент управления SiteMapPath на каждой странице, в целях тестирования необходим элемент управления на странице на каждом уровне иерархии веб-узла (например на страницах Products.aspx и Hardware.aspx).

Проверка журнала переходов

Можно проверить переходы по страницам путем просмотра страниц, которые находятся на втором и третьем уровне иерархии.

Проверка переходов по страницам

Откройте страницу Home.aspx, а затем нажмите CTRL+F5 для выполнения страницы.
Используйте элемент управления TreeView для перехода на страницу Products.

В том расположении на странице, где размещен элемент управления SiteMapPath, отображается приблизительно следующий путь:

Home > Products
Нажмите Home для возврата на страницу Home.
Используйте элемент управления TreeView для перехода на страницу Hardware.

На этом этапе отобразится приблизительно следующий путь:

Home > Products > Hardware

Все имена страниц, отображаемые элементом управления SiteMapPath, являются ссылками, за исключением последней, которая представляет текущую страницу. Можно преобразовать текущий узел в ссылку, задав для свойства RenderCurrentNodeAsLink элемента управления SiteMapPath значение true.

Элемент управления SiteMapPath позволяет пользователям перемещаться назад по иерархии веб-узла, но не допускает перехода на страницу, которая не находится в текущем пути иерархии.

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

Добавление меню переходов в виде меню

Откройте страницу Products.aspx и переключитесь в представление конструктора.
Из группы Навигация панели элементов перетащите на страницу элемент управления Menu.
В меню Задачи меню в окне Выбор источника данных выберите NewDataSource.
В мастере настройки источника данных — <Datasourcename> выберите Карта узла, а затем нажмите OK.
Сохраните страницу.

Проверка меню переходов в виде меню

Теперь можно выполнить промежуточную проверку системы переходов.

Проверка меню переходов

Закройте Задачи меню.
Откройте страницу Home.aspx.
Для запуска страницы Home.aspx нажмите CTRL+F5.

В дереве показаны два уровня узлов.
Выберите Products для просмотра страницы Products.
- Если страница Products.aspx не создана, щелкните ссылку на созданную страницу.
В меню переходов наведите указатель мыши на ссылку Home, чтобы развернуть меню.

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

Объединение структуры переходов веб-узла с главными страницами

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

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

Создание главной страницы для переходов

В окне обозревателя решений щелкните правой кнопкой мыши на имени веб-узла и выберите пункт Добавить новый элемент.
В диалоговом окне Добавление нового элемента <Путь> :
1. В группе Установленные шаблоны Visual Studio выберите Главная страница.
2. В поле Имя введите Navigation.master и нажмите кнопку Добавить.
Перейдите в представление конструктора.

Появляется главная страница с элементом управления ContentPlaceHolder по умолчанию.

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

Добавление элементов управления навигацией на главную страницу

Выберите элемент управления ContentPlaceHolder, нажмите СТРЕЛКУ ВЛЕВО, а затем нажмите ВВОД.

При этом перед элементом управления ContentPlaceHolder вставляется пустая строка.
Из группы Данные панели элементов перетащите на главную страницу элемент управления SiteMapDataSource и поместите его над элементом управления ContentPlaceHolder.

Примечание.

Не помещайте элемент управления SiteMapDataSource на элемент управления ContentPlaceHolder.

По умолчанию элемент управления SiteMapDataSource будет использовать файл Web.sitemap, созданный в разделе "Создание карты веб-узла", который представлен ранее в пошаговом руководстве.
Выберите элемент управления SiteMapDataSource, нажмите СТРЕЛКУ ВПРАВО, а затем нажмите ВВОД.

При этом под элементом управления SiteMapDataSource вставляется пустая строка.
В меню Таблица выберите Вставить таблицу, а затем вставьте таблицу с шириной 100 процентов, включающую один ряд и два столбца.
Из группы Навигация в панели элементов перетащите элемент управления TreeView в левую ячейку таблицы.
В меню Задачи TreeView в поле Выбор источника данных выберите SiteMapDataSource1.
Из группы Навигация в панели элементов перетащите элемент управления SiteMapPath в правую ячейку таблицы.
В правой ячейке щелкните пустую область, а затем нажмите клавиши SHIFT+ВВОД для создания новой строки.
Перетащите элемент управления ContentPlaceholder в правую ячейку таблицы и разместите его под элементом управления SiteMapPath.

Примечание.
Не помещайте элемент управления SiteMapDataSource на элемент управления ContentPlaceHolder.

При использовании главной страницы, страницы веб-узла представляются как страницы содержимого. Страницы содержимого используют элементы управления Content для определения текста и элементов управления, отображаемых в элементе управления ContentPlaceholder главной страницы. Поэтому необходимо повторно создать страницы Home, Products и Hardware в качестве страниц содержимого.

Создание страниц содержимого для веб-узла

В обозревателе решений щелкните правой кнопкой страницу Home.aspx, выберите Удалить, а затем нажмите OK.
Повторите шаг 1 для страниц Products.aspx, Software.aspx, Training.aspx и Hardware.aspx и любых других созданных страниц.

Страницы будут созданы повторно как страницы содержимого, которые используют главную страницу.
В окне обозревателя решений щелкните правой кнопкой мыши имя на имени веб-узла и выберите пункт Добавить новый элемент.
В диалоговом окне Добавление нового элемента:
1. В группе Установленные шаблоны Visual Studio выберите Web Forms.
2. В поле Имя введите Home.aspx.
3. Установите флажокВыбрать главную страницу.
4. Нажмите кнопку Добавить.
Откроется диалоговое окно Выбор главной страницы.
В группе Содержимое папки выберите Navigation.master, а затем нажмите OK.

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

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

Здесь можно добавить содержимое для конкретной страницы.
Введите Home, а затем отформатируйте текст как Заголовок 1.

Вы создали статический текст (а именно заголовок) для страницы Home.
Повторите шаги 3–8 для создания страницы содержимого Products.aspx и Hardware.aspx. В шаге 8 введите Products и Hardware соответствующим образом вместо Home.

Поверка элементом управления переходами на главной странице

Проверка с главными страницами и страницами содержимого аналогична проверке отдельных страниц.

Поверка элементом управления переходами на главной странице

Откройте страницу Products.aspx, а затем нажмите CTRL+F5 для выполнения страницы.

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

Отображается страница Hardware, имеющая ту же структуру, что и страница Products, за исключением того, что элемент управления SiteMapPath отображает другой путь.

Следующие действия

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

Форматирование элемента управления SiteMapPath для настройки внешнего вида. Элемент управления поддерживает различные функции для управления способом отображения ссылок. Дополнительные сведения см. в разделе SiteMapPath.
Настройка отображения страниц в элементе управления TreeView. Например, можно выделить текущую страницу в древовидном узле.
Программная работа со сведениями о переходах веб-узла. Элемент управления SiteMapPath доступен на текущей странице, которую можно использовать для программного отображения сведений о переходах.
Использование другого хранилища данных для сведений карты веб-узла. Вместо использования XML-файла карты веб-узла по умолчанию может потребоваться использование существующей карты веб-узла или хранение сведений карты веб-узла в базе данных. Структура переходов веб-узла ASP.NET использует модель поставщика. Можно создать компонент для управления сведениями карты веб-узла, а затем настроить приложение для использования этого компонента вместо поставщика карты веб-узла по умолчанию. Дополнительные сведения см. в разделе Поставщики в структуре переходов веб-узла ASP.NET.

См. также

Share via

Пошаговое руководство. Добавление структуры переходов веб-узла

Обязательные компоненты

Создание веб-узла, включающего примеры страниц и карту веб-узла

Создание веб-узла на базе файловой системы

Создание веб-узла на базе файловой системы

Создание карты веб-узла

Создание карты веб-узла

Создание страниц для перехода

Создание страниц для перехода

Создание меню переходов с использованием элемента управления TreeView

Добавление древовидного меню переходов

Проверка древовидного меню переходов

Проверка меню переходов

Отображение журнала переходов с помощью элемента управления SiteMapPath

Отображение журнала переходов

Проверка журнала переходов

Проверка переходов по страницам

Создание меню переходов с использованием элемента управления Menu

Добавление меню переходов в виде меню

Проверка меню переходов в виде меню

Проверка меню переходов

Объединение структуры переходов веб-узла с главными страницами

Создание главной страницы для переходов

Добавление элементов управления навигацией на главную страницу

Создание страниц содержимого для веб-узла

Поверка элементом управления переходами на главной странице

Поверка элементом управления переходами на главной странице

Следующие действия

См. также

Задачи

Основные понятия

Другие ресурсы

Дополнительные ресурсы