Опубликован: 14.11.2006 | Доступ: свободный | Студентов: 5898 / 532 | Оценка: 4.18 / 3.74 | Длительность: 16:37:00
ISBN: 978-5-9556-0085-7
Лекция 12:

Шаблоны дизайна страниц ASP .NET

< Лекция 11 || Лекция 12: 1234 || Лекция 13 >
Аннотация: Описывается тип страниц Master Page, программное управление шаблонами дизайна, вложенные шаблоны дизайна, последовательность событий страницы при наличии Master Page.

Шаблоны дизайна — это визуальное наследование страниц, впервые появившееся в ASP .NET 2.0. Вы можете создавать основу для любого количества страниц приложения. Шаблоны позволяют легче создавать и поддерживать приложения. Visual Studio 2005 включает поддержку создания и редактирования шаблонов страниц. Эта лекция рассматривает использование шаблонов страниц в приложении и начинается с объяснения их преимуществ.

Примечание: терминология в этой области не устоялась. В некоторых книгах используют выражение "эталонные страницы". Можно применять термин "главная страница", хотя его можно спутать с Default.aspx.

Зачем нужны шаблоны дизайна страниц?

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

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

Некоторые разработчики копируют и вставляют повторяющиеся элементы во всех страницах. Это неэффективно, ведь если нужно изменить одну деталь в этих общих элементах, изменения придется вводить во всех страницах. Можно помещать повторяющиеся куски кода во включаемые файлы с помощью команды HTML include. Но так трудно увидеть окончательный вид страницы в среде разработки! В ASP .NET 1.1 стало возможным создавать пользовательские элементы управления. Можно создать такой элемент с нужным содержанием и помещать его на все страницы. Развитием этой идеи стало создание шаблонов страниц. Это тоже пользовательский элемент управления, только он находится не в странице, а вне ее.

Основы Master Pages

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

Начиная с этой лекции, будем разбирать проект, который Visual Studio 2005 создает по шаблону Personal Web Site Starter Kit. В нем показаны шаблоны страниц, темы и персонализация, навигация. Элементы управления навигации сосредоточены на странице шаблона Default.master. И это естественное решение, так как навигация нужна везде.

В страницу шаблона также включают общие заголовки и нижние колонтитулы.

Это единственный тип страниц, где возможно разместить специальные элементы управления ContentPlaceHolder. Они определяют место, в которое дочерние страницы данного мастера могут помещать свое собственное содержание. Когда ASP .NET получает запрос отобразить дочернюю страницу, она сливает ее код с кодом главной страницы, в результате генерируется HTML, в котором не видно никаких "швов".

Когда дочерняя страница редактируется в среде разработки, на вкладке Design видна полная страница вместе с элементами из шаблона, но они показаны серым цветом. Их редактировать нельзя. Можно редактировать то, что находится в элементах Content.

В диалоге Add New Item выберите тип страницы Master Page. Как и обычные страницы, их можно создавать с отделенным кодом или кодом, встроенным в страницу. Это никак не влияет на модель разделения кода дочерних страниц. Кроме того, главная и дочерняя страницы могут разрабатываться на разных языках.

Чтобы получить четкое разделение страницы на логические части, используют таблицы. Построим таблицу с тремя строками, где в верхней строке находится заголовок всех страниц, а во второй — произвольное содержание; она состоит из двух ячеек, в каждой из которых по одному ContentPlaceHolder. В нижнем ряду располагается правовая информация. Таблица создается очень легко из меню Layout-Insert Table. Создайте таблицу 2 на 3. После этого объедините ячейки верхней и нижней строк, а в среднюю вставьте ContentPlaceHolder. Создайте содержание заголовка и подвала. Должна получиться подобная страница:

<%@ Master Language="C#" AutoEventWireup="true" 
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Привет!</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr bgcolor="#6699cc">
                <td colspan="2" style="vertical-align: middle;
    color: white;
    text-align: center;">Школа программирования ASP.NET 2.0
                </td>
            </tr>
            <tr>
                <td style="width: 100px" valign="top">
        <asp:contentplaceholder id="ContentPlaceHolder1" 
runat="server">
        </asp:contentplaceholder>
                </td>
                <td style="width: 100px" valign="top">
                    <asp:ContentPlaceHolder 
ID="ContentPlaceHolder2" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span style="font-size: 8pt">Copyright © 
2006 - Школа ASP.NET 2.0</span></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Первое отличие этой страницы от обычной в том, что она начинается с директивы Master, а не Page. Класс мастер-страницы определен в файле MasterPage.master.cs:

public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Класс шаблона — наследник System.Web.UI.MasterPage, который в свою очередь наследует от System.Web.UI.UserControl.

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

< Лекция 11 || Лекция 12: 1234 || Лекция 13 >
Алексей Савельев
Алексей Савельев

https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx

Денис Прокофьев
Денис Прокофьев

Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с web.sitemap и не требует определения SiteMapDataSource.

Моя карта сайта состоит из двух страниц, вложенных друг в друга. asp:Menu, asp:TreeView отбображаются как ожидалось, а вот asp:SiteMapPath - нет. Он не виден нигде. Однако на его месте формируется разметка: <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Проход по ссылкам навигации</a><a id="SiteMapPath1_SkipLink"></a></span> - т.е. элемент отрабатывает.

В словах xHTML это выглядит так: <asp:SiteMapPath ID="SiteMapPath1" runat="server" />. Причем не важно - внутри тега form или снаружи - всегда одинаково.

Т.к. другие нав. ЭУ работают через простой источник данных без ошибок, делаю вывод - карта составлена правильно. ИД: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Карта: <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/L11_1_simplePage.aspx" title="Страница 1"  description="Простая страница 1." >
    <siteMapNode url="~/L11_1SimplePage2.aspx" title="Страница 2"  description="Простая страница 2" />
  </siteMapNode>
</siteMap>

Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319