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

Visual Studio 2010

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

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

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

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

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

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

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

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

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

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

  • Программное обеспечение Visual Studio или Visual Web Developer Express, установленное на компьютере.

    ПримечаниеПримечание

    Если используется Visual Studio, в пошаговом руководстве предполагается, что при первом запуске Visual Studio была выбрана коллекция параметров Веб-разработка. Дополнительные сведения см. в разделе Практическое руководство. Выбор параметров среды веб-разработки.

Для этого пошагового руководства создается пустой проект веб-сайта, в который добавляется страница.

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

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

  1. Откройте Visual Studio или Visual Web Developer Express.

  2. В меню Файл выберите пункт Новый веб-узел.

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

  3. В разделе Установленные шаблоны щелкните Visual Basic или VisualC# и выберите пункт Пустой веб-сайт ASP.NET.

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

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

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

    Visual Studio создает проект веб-сайта, который содержит файл Web.config.

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

  7. Выберите Веб-форма, задайте имя файла "Default.aspx" и нажмите Добавить.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  5. В области Свойства задайте для свойства Text значение "Продукты", а для свойства NavigateURL — значение Products.aspx.

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

  7. В области Свойства задайте для свойства Text значение "Услуги", а для параметра NavigateURL — значение Services.aspx.

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

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

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

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

  2. Щелкните веб-форму, назовите файл 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. Нажмите кнопку ОК.

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

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

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

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

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

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

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

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

  4. Закройте окно браузера.

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

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

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

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

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

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

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

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

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

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

Показ: