Пошаговое руководство. Использование вложенных главных страниц в ASP.NET

Visual Studio 2010

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

Можно вкладывать главные страницы так, что каждая страница будет иметь гибкий макет, но также сохранит согласованный вид на веб-узле. Например, можно создать родительскую главную страницу, в которой баннер компании находится вверху, а элементы управления навигацией по узлу — в столбце сбоку. Затем можно создать дочернюю главную страницу для конкретного отдела или товара, которая использует родительскую главную страницу. Эта дочерняя страница может также играть роль главной страницы для всех других связанных страниц отделов или продукции. Таким образом, каждая линия продуктов или отдел будет иметь согласованный вид, и все страницы будут иметь согласованный общий вид при использовании родительской главной страницы. Дополнительные сведения о главных страницах см. в разделе Главные страницы ASP.NET.

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

  • Создание главной страницы.

  • Создание главной страницы, вложенной в другую главную страницу.

  • Создание страницы ASP.NET с содержимым, которое требуется отобразить на главной странице.

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

  • Visual Studio 2008 или Microsoft Visual Web Developer, экспресс-выпуск. Для загрузки сведений посетите веб-узел Visual Studio Developer Center.

  • .NET Framework 3.5.

  • Дополнительно — JPG-файл, GIF-файл или другой графический файл, который можно использовать в качестве баннера на главной странице. Рекомендуемый размер баннера — не более 780 точек в ширину и 150 точек в высоту. Однако отображение эмблемы не является обязательным, и точный размер рисунка не влияет на успешность прохождения данного пошагового руководства.

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

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

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

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

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

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

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

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

    Например, можно указать следующее: C:\Tasks.

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

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

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

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

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

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

    Откроется диалоговое окно Добавление нового элемента.

  2. В разделе Установленные шаблоны Visual Studio выберите пункт Главная страница.

  3. В поле Имя введите ParentMaster.

  4. Снимите флажок Размещать код в отдельном файле.

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

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

    Новая главная страница откроется в представлении Источник.

В верхней части главной страницы находится объявление @ Master вместо объявления @ Page, которое обычно находится в верхней части страниц ASP.NET. Основная часть страницы содержит элемент управления ContentPlaceHolder, который представляет собой область главной страницы, в которой заменяемое содержимое будет объединяться со страницами содержимого во время выполнения. Более подробно работа с местозаполнителем содержимого будет рассмотрена позже в этом пошаговом руководстве.

Добавление рисунков на родительскую главную страницу

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

Создайте рисунок размером в 780 точек в ширину и 150 точек в высоту для баннера и рисунок размером в 780 точек в ширину и 50 точек в высоту для нижнего колонтитула. Графические объекты используются для того, чтобы показать, как графика на родительской главной странице отобразится на вложенной главной странице. Если таких рисунков нет, их можно создать в Microsoft Paint или в другой графической программе.

Добавление существующего графического файла на веб-узел

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

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

  2. Выберите созданные графические файлы.

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

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

Добавление графики для баннера и нижнего колонтитула в родительскую главную страницу

  1. В представлении Источник, сразу после открывающего тега <form>, добавьте элемент div, который содержит элемент img для рисунка баннера.

    Например, если создан рисунок с именем Banner.gif, разметка для добавления этого рисунка будет выглядеть так:

    <div id="banner">
      <img src="banner.gif" alt="banner graphic" />
    </div>
    
  2. Непосредственно перед закрывающим тегом </form> добавьте элемент div, который содержит элемент img для рисунка нижнего колонтитула.

    Например, если создан рисунок с именем Footer.gif, разметка для добавления этого рисунка будет выглядеть так:

    <div id="banner">
      <img src="footer.gif" alt="footer graphic" />
    </div>
    
  3. Сохраните главную страницу.

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

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

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

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

    Откроется диалоговое окно Добавление нового элемента.

  2. В разделе Установленные шаблоны Visual Studio выберите пункт Главная страница.

  3. В поле Имя введите ChildMaster.

  4. Снимите флажок Размещать код в отдельном файле.

  5. Установите флажок Выбрать главную страницу.

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

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

    На экране появится диалоговое окно Выбор главной страницы.

  8. Выберите родительскую главную страницу, созданную ранее в этом пошаговом руководстве.

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

    Новая главная страница откроется в представлении Источник.

Обратите внимание, что объявление @ Master в верхней части новой главной страницы указывает, что оно ссылается на главную страницу.

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

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

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

  1. Откройте дочернюю главную страницу или переключитесь на нее.

  2. Перейдите в представление Исходный код.

  3. Добавьте следующую разметку во второй раздел элемента управления Content, чтобы создать элементы управления ContentPlaceHolder:

    <div id="2col">
      <asp:ContentPlaceHolder ID="leftcolumn" runat="server">
      </asp:ContentPlaceHolder>
      <asp:ContentPlaceHolder ID="rightcolumn" runat="server">
      </asp:ContentPlaceHolder>
    </div>
    
  4. Сохраните файл.

Дочерняя главная страница теперь имеет элементы управления ContentPlaceHolder, содержащие разметку страницы ASP.NET, которая использует дочернюю главную страницу.

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

Создание страницы, использующей дочернюю главную страницу

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

    Откроется диалоговое окно Добавление нового элемента.

  2. В разделе Установленные шаблоны Visual Studio выберите Форма Web Forms.

  3. В поле Имя введите Задачи.

  4. Поставьте флажок Размещать код в отдельном файле.

  5. Установите флажок Выбрать главную страницу.

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

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

  8. В диалоговом окне Выбор главной страницы выберите дочернюю главную страницу, созданную ранее.

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

    Новая страница содержимого откроется в представлении Источник.

  10. Измените идентификатор первого элемента управления Content на leftcolumn, а идентификатор второго элемента управления Content — на rightcolumn.

  11. Добавьте элементы текста или страницы к левому или правому столбцу элементов управления Content.

  12. Нажмите CTRL+F5, чтобы запустить веб-узел.

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

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

Показ: