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

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

  • Статья

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

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

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

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

Элемент управления Menu ASP.NET можно настроить в конструкторе с использованием статических ссылок на страницы или автоматически привязать к источнику иерархических данных, например элементу управления XmlDataSource или SiteMapDataSource.

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

  • Создание базового меню и настройка в нем статических ссылок на страницы.

  • Создание более сложного меню, привязанного к XML-файлу Web.sitemap.

  • Настройка ориентации меню.

  • Настройка нескольких уровней статического отображения и их сравнение с динамическим отображением.

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

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

  • Microsoft Visual Web Developer (Visual Studio).

  • Платформа .NET Framework.

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

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

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

  1. Откройте Visual Web Developer.

  2. В меню Файл выберите Создать, Веб-узел.

    Откроется диалоговое окно Создать веб-узел.

  3. В разделе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

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

    Например, введите имя папки C:\WebSites.

  5. В списке Язык выберите предпочтительный язык программирования.

  6. Нажмите кнопку ОК.

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

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

Первым этапом создания меню для страницы является размещение элемента управления Menu.

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

  1. Перейдите к странице Default.aspx или откройте ее и переключитесь в представление конструирования.

  2. В группе элементов управления Переходы в окне Панель элементов перетащите на страницу элемент управления Menu.

В данном примере меню удобнее расположить не вертикально, а горизонтально.

Горизонтальное расположение элемента управления Menu

  • Щелкните правой кнопкой мыши элемент управления Menu, выберите пункт Свойства, а затем установите для параметра Ориентация значение Горизонтальная.

Настройка базового меню

В данном подразделе описывается задание элементов меню с помощью редактора элементов меню.

Изменение элементов управления Menu

  1. Щелкните правой кнопкой мыши элемент управления Menu и выберите пункт Правка элементов меню.

    Откроется окно Редактор элементов меню.

  2. В области Элементы щелкните значок Добавить корневой элемент.

  3. В области Свойства для нового элемента задайте для параметра Текст значение Домашний, а для параметра NavigateURL значение Default.aspx.

  4. В области Элементы щелкните значок Добавить корневой элемент.

  5. В области Свойства для нового элемента задайте для параметра Текст значение Продукты, а для параметра NavigateURL значение Products.aspx.

  6. В области Элементы щелкните значок Добавить корневой элемент.

  7. В области Свойства для нового элемента задайте для параметра Текст значение Службы, а для параметра NavigateURL значение Services.aspx.

  8. Нажмите кнопку ОК.

Если посмотреть на исходный код Default.aspx, можно увидеть, что элементы меню и ссылки в элементе управления объявляются декларативно.

Создание конечной страницы

  1. В обозревателе решений щелкните правой кнопкой мыши корень веб-узла и выберите команду Добавить новый элемент.

  2. Щелкните Форма Web Forms, имя файла Products.aspx, а затем нажмите кнопку Добавить.

  3. Повторите предыдущие действия для создания файла Services.aspx.

Проверка меню

После размещения страниц и меню можно проверить их работу.

Проверка элемента управления Menu

  1. Щелкните Default.aspx в обозревателе решений и нажмите сочетание клавиш CTRL+F5 для запуска страницы Default.aspx.

  2. Наведите указатель на элементы; в строке состояния обозревателя в нижней части страницы (если она видна) отображаются сведения о подключенной странице.

  3. Щелкните ссылку для перехода к странице.

Создание привязки меню к карте веб-узла

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

В этом примере будет использован второй элемент управления Menu.

Создание второго элемента управления Menu

  • Из группы Панель ссылок в окне Панель элементов перетащите на страницу Default.aspx второй элемент управления Menu.

После этого потребуется файл Web.sitemap для выполнения привязки.

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

  1. В обозревателе решений щелкните правой кнопкой мыши корень веб-узла и выберите команду Добавить новый элемент.

  2. В диалоговом окне Добавить новый элемент <имя_веб-узла> выберите Карта узла.

  3. Нажмите кнопку Добавить.

  4. Поместите в файл Web.sitemap следующий код XML.

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

    <siteMap>
  <siteMapNode title="Home" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products" 
     url="Products.aspx">
      <siteMapNode title="Hardware" 
       description="Hardware choices"
       url="Hardware.aspx" />
      <siteMapNode title="Software" 
       description="Software choices" 
       url="Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" 
     description="Services we offer" 
     url="Services.aspx">
      <siteMapNode title="Training" 
       description="Training classes" 
       url="Training.aspx" />
      <siteMapNode title="Consulting" 
       description="Consulting services" 
       url="Consulting.aspx" />
      <siteMapNode title="Support" 
       description="Support plans" 
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

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

Привязка к карте веб-узла

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

Привязка элемента управления Menu к карте веб-узла

  1. Откройте файл Default.aspx и переключитесь в режим конструирования.

  2. Щелкните смарт-тег, чтобы открыть диалоговое окно Задачи меню.

  3. В диалоговом окне Задачи меню в раскрывающемся списке Выбор источника данных щелкните элемент Добавить новый источник данных.

    Откроется диалоговое окно Мастер настройки источника данных.

  4. Щелкните Карта узла.

    В области Укажите идентификатор для источника данных, отображается имя по умолчанию SiteMapDataSource1.

  5. Нажмите кнопку OК.

Проверка привязки к карте веб-узла

После размещения страниц и меню можно проверить их работу.

Проверка привязки к карте веб-узла

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

  2. Наведите указатель на элемент меню Домашний второго меню, расположенного вертикально.

    Отображаются элементы Продукты и Службы.

  3. Наведите указатель на элемент Продукты.

    Отображаются элементы Аппаратный и Программный.

    Если посмотреть на исходный код Default.aspx, можно увидеть, что в отличии от элемента первого меню элементы задаются необъявленно; вместо этого элемент управления Menu ссылается на источник данных.

Настройка статического и динамического уровней

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

Создание элемента управления Menu с двумя статическими уровнями

  1. На странице Default.aspx в представлении конструирования щелкните правой кнопкой мыши элемент управления Menu и выберите пункт Свойства.

  2. Установите для параметра StaticDisplayLevels значение 2.

Проверка динамического меню

После размещения страниц и меню можно проверить их работу.

Проверка динамического меню

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

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

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

Элемент управления Menu позволяет легко создавать меню переходов. Этот элемент управления можно настроить на динамическое или статическое отображение и привязать к файлу XML карты веб-узла. Для дальнейшего изучения данного вопроса можно выполнить следующее:

См. также

Задачи

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

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

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