Пошаговое руководство. Программное управление меню ASP.NET

Статья
10/22/2014

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

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

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

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

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

Microsoft Visual Web Developer (Visual Studio);
платформа .NET Framework.

Создание веб-узла

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

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

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

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

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

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

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

Оба меню наследуют содержимое от файла карты Web.sitemap. Создаваемые объекты SiteMapDataSource используются обоими меню, чтобы гарантировать, что в каждом из меню отображается соответствующий раздел карты сайта.

Создание файла Web.sitemap

В окне Обозреватель решений щелкните правой кнопкой мыши имя веб-узла, затем нажмите кнопку Добавить новый элемент.
В диалоговом окне Добавление нового элемента выберите значок Карта веб-узла, затем нажмите кнопку Добавить.

В новый файл добавьте следующий XML-код. XML представляет иерархию выборов меню. Элементы <siteMapNode> являются вложенными. Каждый узел представляет собой элемент меню, который содержит подэлементы, а некоторые подэлементы имеют собственные подэлементы. Под узлом Home находятся три узла второго уровня: Hardware, Software и Support. В данных узлах содержатся различные подкатегории.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home">
    <siteMapNode title="Products">
      <siteMapNode title="Hardware" url="Default.aspx?node=hardware">
        <siteMapNode title="Mouse"/>
        <siteMapNode title="Keyboard"/>
        <siteMapNode title="NetCard"/>
        <siteMapNode title="Monitor"/>
        <siteMapNode title="PC"/>
      </siteMapNode>
      <siteMapNode title="Software" url="Default.aspx?node=software">
        <siteMapNode title="Spreadsheet"/>
        <siteMapNode title="Word Processor"/>
        <siteMapNode title="Presentation"/>
        <siteMapNode title="Mail"/>
        <siteMapNode title="Games"/>
      </siteMapNode>
      <siteMapNode title="Books" url="Default.aspx?node=books">
        <siteMapNode title="Programming"/>
        <siteMapNode title="Debugging"/>
        <siteMapNode title="Testing"/>
        <siteMapNode title="Web Apps"/>
        <siteMapNode title="WinForm Apps"/>
      </siteMapNode>
    </siteMapNode>
    <siteMapNode title="Services">
      <siteMapNode title="Consulting" url="Default.aspx?node=consulting">
        <siteMapNode title="Processes"/>
        <siteMapNode title="Management"/>
        <siteMapNode title="Recruiting"/>
      </siteMapNode>
      <siteMapNode title="Development" url="Default.aspx?node=development">
        <siteMapNode title="Web Apps"/>
        <siteMapNode title="Enterprise Apps"/>
        <siteMapNode title="Database"/>
      </siteMapNode>
    </siteMapNode>
    <siteMapNode title="Support">
      <siteMapNode title="Drivers" url="Default.aspx?node=drivers">
        <siteMapNode title="Audio"/>
        <siteMapNode title="Network"/>
        <siteMapNode title="Printer"/>
        <siteMapNode title="Modem"/>
      </siteMapNode>
      <siteMapNode title="Manuals" url="Default.aspx?node=manuals">
        <siteMapNode title="Applications"/>
        <siteMapNode title="Troubleshooting"/>
        <siteMapNode title="Installation"/>
        <siteMapNode title="Internet"/>
      </siteMapNode>
      <siteMapNode title="Updates" url="Default.aspx?node=updates">
        <siteMapNode title="Release 1"/>
        <siteMapNode title="Game Package"/>
      </siteMapNode>
    </siteMapNode>
  </siteMapNode>
</siteMap>

Сохраните файл.

Разработка первого меню

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

Создание первого меню

В окне Обозреватель решений дважды щелкните страницу Default.aspx, чтобы открыть ее.
Перейдите в представление конструктора.
В группе элементов управления Панель переходов в Панели элементов перетащите на страницу элемент управления Меню.
В окне Свойства задайте значение По горизонтали свойству Ориентация.
Задайте значение «0» параметру MaximumDynamicDisplayLevels.

Это дает гарантию, что ни один раздел меню не появится в виде динамического, всплывающего окна.
Удостоверьтесь в том, что параметру StaticDisplayLevels задано значение «1».

С помощью этого в меню появляется только один уровень.
Щелкните значок смарт-тега в элементе управления Меню.

Появится диалоговое окно Задачи меню.
Выберите пункт Новый источник данных в выпадающем списке Выбрать источник данных.
В окне Мастер настройки источника данных выберите пункт Карта веб-узла.
Примите предложенное по умолчанию имя SiteMapDataSource1 и нажмите кнопку ОК.

Настройка первого источника данных

Поскольку в первом меню отображается только один уровень статических элементов меню, необходимо настроить их источник данных так, чтобы отображалась соответствующая часть файла Web.sitemap. В данном случае это элементы второго уровня: Products, Services и Support.

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

Настройка первого источника данных

Откройте страницу Default.aspx в представлении конструктора, затем щелкните смарт-тег в элементе управления Меню.

Появится диалоговое окно Задачи меню.
Нажмите кнопку Правка привязокMenuItem.
В Редакторе привязок DataBinding менюDataBindings в выпадающем списке Доступные привязки данных выберите элемент SiteMapNode и нажмите кнопку Добавить.
Выберите поле TextField в выпадающем списке Свойства привязки данных и пункт Заголовок в выпадающем меню. Нажмите кнопку ОК.
Выберите элемент управления SiteMapDataSource.
В окне Свойства задайте параметру ShowStartingNode значение False.

Создание второго меню

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

Создание второго меню

Откройте страницу Default.aspx в представлении конструктора, затем перетащите второй элемент управления Меню на страницу под первым элементом управления Меню.
В окне Свойства задайте значение По горизонтали свойству Ориентация.
Щелкните смарт-тег во втором элементе управления Меню.

Появится диалоговое окно Задачи меню.
Выберите пункт Новый источник данных в выпадающем списке Выбрать источник данных.
В окне Мастер настройки источника данных выберите пункт Карта веб-узла.
Примите имя по умолчанию SiteMapDataSource2 и нажмите кнопку ОК.

Настройка второго источника данных

В данном разделе выполняется настройка источника данных для выбора только одного определенного раздела файла Web.sitemap. Чтобы сделать это, начните с первой категории по умолчанию в первом меню, которая является разделом Products файла Web.sitemap. Затем используйте свойство StartingNodeURL, чтобы указать особый атрибут URL в данном файле.

Настройка второй стартовой точки источника данных

Выберите объект SiteMapDataSource2 и задайте его свойству StartingNodeURL значение Default.aspx?node=hardware.
Задайте параметру StartingNodeOffset значение «-1».
Задайте параметру ShowStartingNode значение False.

Добавление кода для координирования меню

Чтобы контролировать второе меню в зависимости от состояния первого меню, выполните перехват события MenuItemClick первого меню и укажите в коде представление файла карты сайта второго меню.

Координирование меню в коде

Откройте страницу Default.aspx в представлении конструктора и выберите элемент Menu1.
В окне Свойства событию MenuItemClick задайте значение Menu1_MenuItemClick.

Создается метод с именем Menu1_MenuItemClick в файле кода программной части для страницы Default.aspx или внутри тегов <script> страницы ASPX при использовании модели однофайловой страницы.

Добавьте следующий выделенный код в метод:

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
  ByVal e As System.Web.UI.WebControls.MenuEventArgs) _
  Handles Menu1.MenuItemClick
  Select Case e.Item.Value
    Case "Products"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware"
    Case "Services"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting"
    Case "Support"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers"
  End Select
End Sub

protected void Menu1_MenuItemClick(Object sender,    
      System.Web.UI.WebControls.MenuEventArgs e)
{
  switch(e.Item.Value)
  {
    case "Products":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
      return;
    case "Services":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";
      return;
    case "Support":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";
      return;
  }
}

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

Сохраните файл.

Тестирование меню

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

Тестирование меню

Нажмите сочетание клавиш CTRL+F5 для запуска страницы.

Появится первое меню со вторым меню, использующим элементы меню под пунктом Продукты в файле Web.sitemap.
Щелкните пункт Службы в первом меню.

Во втором меню теперь отображаются динамические меню Консультирование и Разработка.
Нажмите пункт Поддержка.

Во втором меню отображаются элементы динамического меню Драйверы, Руководства и Обновления.

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

Элемент управления Menu позволяет легко создавать меню переходов и предоставляет программную поддержку для более сложных сценариев. Также можно попробовать следующие варианты:

Примените тему или обложку к элементу управления Menu. Дополнительные сведения см. в разделе Пошаговое руководство. Настройка веб-узла с помощью тем в Visual Studio.
Узнайте больше о структуре переходов по веб-узлу. Дополнительные сведения см. в разделе Общие сведения об структуре переходов веб-узла ASP.NET.
Используйте элемент управления Menu на главной странице, чтобы создать отдельный фрейм переходов (также называемый фреймом навигации), определенный на одной странице. Дополнительные сведения см. в разделе Пошаговое руководство. Создание и использование главных страниц ASP.NET в Visual Web Developer.

См. также

Задачи

Пошаговое руководство. Отображение меню на веб-страницах

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

Общие сведения об элементе управления Menu

Поделиться через

Пошаговое руководство. Программное управление меню ASP.NET

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

Создание веб-узла

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

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

Создание файла Web.sitemap

Разработка первого меню

Создание первого меню

Настройка первого источника данных

Настройка первого источника данных

Создание второго меню

Создание второго меню

Настройка второго источника данных

Настройка второй стартовой точки источника данных

Добавление кода для координирования меню

Координирование меню в коде

Тестирование меню

Тестирование меню

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

См. также

Задачи

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

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