Указание названия, метатегов и других заголовков HTML на эталонной странице (VB)Specifying the Title, Meta Tags, and Other HTML Headers in the Master Page (VB)

по Скотт Митчеллby Scott Mitchell

Скачать код или скачать PDFDownload Code or Download PDF

В этой статье рассматриваются различные методы определения ассортимента <Head> элементов на главной странице со страницы содержимого.Looks at different techniques for defining assorted <head> elements in the Master Page from the content page.

ВведениеIntroduction

Новые главные страницы, созданные в Visual Studio 2008, по умолчанию имеют два элемента управления ContentPlaceHolder: один с именем headи находятся в элементе <head>. и один именованный ContentPlaceHolder1, помещенный в веб-форму.New master pages created in Visual Studio 2008 have, by default, two ContentPlaceHolder controls: one named head, and located in the <head> element; and one named ContentPlaceHolder1, placed within the Web Form. Целью ContentPlaceHolder1 является определение области в веб-форме, которую можно настроить отдельно для каждой страницы.The purpose of ContentPlaceHolder1 is to define a region in the Web Form that can be customized on a page-by-page basis. head ContentPlaceHolder позволяет страницам добавить пользовательское содержимое в раздел <head>.The head ContentPlaceHolder enables pages to add custom content to the <head> section. (Разумеется, эти две элементов управления ContentPlaceHolder можно изменить или удалить, а на главную страницу можно добавить дополнительные ContentPlaceHolder.(Of course, these two ContentPlaceHolders can be modified or removed, and additional ContentPlaceHolder may be added to the master page. Главная страница, Site.master, в настоящее время имеет четыре элемента управления ContentPlaceHolder.)Our master page, Site.master, currently has four ContentPlaceHolder controls.)

Элемент <head> HTML служит в качестве репозитория для сведений о документе веб-страницы, который не является частью самого документа.The HTML <head> element serves as a repository for information about the web page document that is not part of the document itself. Сюда входят такие сведения, как заголовок веб-страницы, метаданные, используемые поисковыми машинами или внутренними поисковыми модулями, а также ссылки на внешние ресурсы, такие как RSS-каналы, JavaScript и CSS-файлы.This includes information such as the web page's title, meta-information used by search engines or internal crawlers, and links to external resources, such as RSS feeds, JavaScript, and CSS files. Некоторые из этих сведений могут быть относящимися ко всем страницам на веб-сайте.Some of this information may be pertinent to all pages in the website. Например, может потребоваться глобально импортировать одни и те же правила CSS и файлы JavaScript для каждой ASP.NET страницы.For example, you might want to globally import the same CSS rules and JavaScript files for every ASP.NET page. Однако существуют части элемента <head>, относящиеся к конкретной странице.However, there are portions of the <head> element that are page-specific. Заголовок страницы является простым примером.The page title is a prime example.

В этом учебнике мы рассмотрим, как определить глобальную и специфическую <head> разметку раздела на главной странице и на страницах содержимого.In this tutorial we examine how to define global and page-specific <head> section markup in the master page and in its content pages.

Изучение раздела<head>главной страницыExamining the Master Page's<head>Section

Файл главной страницы по умолчанию, созданный Visual Studio 2008, содержит следующую разметку в ее <head> разделе:The default master page file created by Visual Studio 2008 contains the following markup in its <head> section:

<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>

Обратите внимание, что элемент <head> содержит атрибут runat="server", который указывает, что это серверный элемент управления (а не статический HTML).Notice that the <head> element contains a runat="server" attribute, which indicates that it is a server control (rather than static HTML). Все страницы ASP.NET являются производными от классаPage, который находится в пространстве имен System.Web.UI.All ASP.NET pages derive from the Page class, which is located in the System.Web.UI namespace. Этот класс содержит свойствоHeader , которое обеспечивает доступ к области <head> страницы.This class contains a Header property that provides access to the page's <head> region. С помощью свойства Header можно задать заголовок страницы ASP.NET или добавить дополнительную разметку в отображаемый <head> раздел.Using the Header property we can set an ASP.NET page's title or add additional markup to the rendered <head> section. Затем можно настроить элемент <head> страницы содержимого, записав фрагмент кода в обработчик событий Page_Load страницы.It is possible, then, to customize a content page's <head> element by writing a bit of code in the page's Page_Load event handler. Мы изучаем, как программно задать заголовок страницы на шаге 1.We examine how to programmatically set the page's title in Step 1.

Разметка, показанная в элементе <head> выше, также включает элемент управления ContentPlaceHolder с именем head.The markup shown in the <head> element above also includes a ContentPlaceHolder control named head. Этот элемент управления ContentPlaceHolder необязателен, так как страницы содержимого могут добавлять настраиваемое содержимое в элемент <head> программным способом.This ContentPlaceHolder control is not necessary, as content pages can add custom content to the <head> element programmatically. Однако это полезно, но в ситуациях, когда странице содержимого необходимо добавить статическую разметку к элементу <head>, так как статическая разметка может быть декларативно добавлена к соответствующему элементу управления содержимым, а не программно.It's useful, however, in situations where a content page needs to add static markup to the <head> element as the static markup can be added declaratively to the corresponding Content control rather than programmatically.

В дополнение к элементу <title> и head ContentPlaceHolder элемент <head> главной страницы должен содержать любую разметку уровня <head>, которая является общей для всех страниц.In addition to the <title> element and head ContentPlaceHolder, the master page's <head> element should contain any <head>-level markup that's common to all pages. На нашем веб-сайте все страницы используют правила CSS, определенные в файле Styles.css.In our website, all pages use the CSS rules defined in the Styles.css file. Следовательно, мы обновили элемент <head> в учебнике Создание макета на уровне сайта с помощью главных страниц , чтобы включить соответствующий элемент <link>.Consequently, we updated the <head> element in the Creating a Site-Wide Layout with Master Pages tutorial to include a corresponding <link> element. Ниже показана разметка текущей <head> главной страницы Site.master.Our Site.master master page's current <head> markup is shown below.

<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>

Шаг 1. Задание заголовка страницы содержимогоStep 1: Setting a Content Page's Title

Заголовок веб-страницы задается с помощью элемента <title>.The web page's title is specified via the <title> element. Важно задать в качестве заголовка каждой страницы соответствующее значение.It is important to set each page's title to an appropriate value. При посещении страницы ее заголовок отображается в заголовке окна браузера.When visiting a page, its title is displayed in the browser's Title bar. Кроме того, при создании закладки страницы браузеры используют заголовок страницы в качестве предлагаемого имени закладки.Additionally, when bookmarking a page, browsers use the page's title as the suggested name for the bookmark. Кроме того, многие поисковые системы отображают заголовок страницы при отображении результатов поиска.Also, many search engines show the page's title when displaying search results.

Note

По умолчанию Visual Studio устанавливает элемент <title> на главной странице в "безымянная страница".By default, Visual Studio sets the <title> element in the master page to "Untitled Page". Аналогичным образом, для новых <title> страниц ASP.NET также задано значение «безымянная страница».Similarly, new ASP.NET pages have their <title> set to "Untitled Page", too. Поскольку можно легко забыть задать для заголовка страницы соответствующее значение, в Интернете будет много страниц с заголовком «безымянная страница».Because it can be easy to forget to set the page's title to an appropriate value, there are many pages on the Internet with the title "Untitled Page". При поиске по Google для веб-страниц этот заголовок возвращает примерно 2 460 000 результатов.Searching Google for web pages with this title returns roughly 2,460,000 results. Даже корпорация Майкрософт уязвима для публикации веб-страниц с заголовком «безымянная страница».Even Microsoft is susceptible to publishing web pages with the title "Untitled Page". На момент написания этой статьи Поиск Google сообщил 236 таких веб-страниц в домене Microsoft.com.At the time of this writing, a Google search reported 236 such web pages in the Microsoft.com domain.

Страница ASP.NET может указывать ее заголовок одним из следующих способов:An ASP.NET page can specify its title in one of the following ways:

  • Путем помещения значения непосредственно в элемент <title>By placing the value directly within the <title> element
  • Использование атрибута Title в директиве <%@ Page %>Using the Title attribute in the <%@ Page %> directive
  • Программная установка свойства Title страницы с помощью кода, например Page.Title="title" или Page.Header.Title="title".Programmatically setting the page's Title property using code like Page.Title="title" or Page.Header.Title="title".

На страницах содержимого отсутствует элемент <title>, как определено на главной странице.Content pages don't have a <title> element, as it's defined in the master page. Таким образом, чтобы задать заголовок страницы содержимого, можно либо использовать атрибут Title директивы <%@ Page %>, либо задать его программным способом.Therefore, to set a content page's title you can either use the <%@ Page %> directive's Title attribute or set it programmatically.

Декларативное задание заголовка страницыSetting the Page's Title Declaratively

Заголовок страницы содержимого можно задать декларативно с помощью атрибута Title директивы<%@ Page %>.A content page's title can be set declaratively through the Title attribute of the <%@ Page %> directive. Это свойство можно задать путем непосредственного изменения директивы <%@ Page %> или с помощью окно свойств.This property can be set by directly modifying the <%@ Page %> directive or through the Properties window. Давайте рассмотрим оба подхода.Let's look at both approaches.

В представлении источника выберите директиву <%@ Page %>, которая находится в верхней части декларативной разметки страницы.From the Source view, locate the <%@ Page %> directive, which is at the top of the page's declarative markup. Директива <%@ Page %> для Default.aspx выглядит следующим образом:The <%@ Page %> directive for Default.aspx follows:

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Title="Untitled Page" %>

Директива <%@ Page %> задает атрибуты, зависящие от страницы, используемые ядром ASP.NET при синтаксическом анализе и компиляции страницы.The <%@ Page %> directive specifies page-specific attributes used by the ASP.NET engine when parsing and compiling the page. К ним относятся файл главной страницы, расположение файла кода и его заголовок, а также другие сведения.This includes its master page file, the location of its code file, and its title, among other information.

По умолчанию при создании страницы содержимого Visual Studio присваивает атрибуту Title значение "безымянная страница".By default, when creating a new content page Visual Studio sets the Title attribute to "Untitled Page". Измените атрибут Title Default.aspxсо страницы "без заголовка" на "учебники по главной странице", а затем просмотрите страницу в браузере.Change Default.aspx's Title attribute from "Untitled Page" to "Master Page Tutorials" and then view the page through a browser. На рис. 1 показан заголовок окна браузера, который отражает заголовок новой страницы.Figure 1 shows the browser's Title bar, which reflects the new page title.

В заголовке окна браузера теперь отображаются "руководства главной страницы", а не "страницы без заголовка"

Рис. 01. в заголовке окна браузера теперь отображаются «учебники по главной странице», а не «безымянная страница»Figure 01: The Browser's Title Bar Now Shows "Master Page Tutorials" Instead of "Untitled Page"

Заголовок страницы также может быть задан из окно свойств.The page's title may also be set from the Properties window. В окно свойств выберите документ из раскрывающегося списка, чтобы загрузить свойства уровня страницы, включая свойство Title.From the Properties window, select DOCUMENT from the drop-down list to load the page-level properties, which includes the Title property. На рис. 2 показан окно свойств после того, как Title был установлен в «учебники по главной странице».Figure 2 shows the Properties window after Title has been set to "Master Page Tutorials".

Название можно также настроить в окне Свойства.

Рис. 02. можно также настроить заголовок из окна «Свойства».Figure 02: You May Configure the Title from the Properties Window, Too

Программная настройка заголовка страницыSetting the Page's Title Programmatically

Разметка <head runat="server"> главной страницы преобразуется в экземпляр классаHtmlHead , когда страница готовится к просмотру подсистемой ASP.NET.The master page's <head runat="server"> markup is translated into an HtmlHead class instance when the page is rendered by the ASP.NET engine. Класс HtmlHead имеет свойствоTitle , значение которого отражается в отображаемом элементе <title>.The HtmlHead class has a Title property whose value is reflected in the rendered <title> element. Это свойство доступно из класса кода программной части ASP.NET страницы через Page.Header.Title; доступ к этому же свойству также можно получить через Page.Title.This property is accessible from an ASP.NET page's code-behind class via Page.Header.Title; this same property can also be accessed via Page.Title.

Чтобы попрактиковаться в программном задании заголовка страницы, перейдите к классу кода программной части About.aspx страницы и создайте обработчик событий для Load события страницы.To practice setting the page's title programmatically, navigate to the About.aspx page's code-behind class and create an event handler for the page's Load event. Затем задайте заголовок страницы «учебники по главной странице:: about:: Date», где Date — текущая дата.Next, set the page's title to "Master Page Tutorials :: About :: date", where date is the current date. После добавления этого кода обработчик событий Page_Load должен выглядеть следующим образом:After adding this code your Page_Load event handler should look similar to the following:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 Page.Title = String.Format("Master Page Tutorials :: About :: {0:d}", DateTime.Now)
End Sub

На рис. 3 показан заголовок окна браузера при посещении страницы About.aspx.Figure 3 shows the browser's title bar when visiting the About.aspx page.

Заголовок страницы задается программно и включает текущую дату

Рис. 03. заголовок страницы задан программно и включает текущую датуFigure 03: The Page's Title is Programmatically Set and Includes the Current Date

Шаг 2. Автоматическое назначение заголовка страницыStep 2: Automatically Assigning a Page Title

Как было показано на шаге 1, заголовок страницы можно задать декларативно или программно.As we saw in Step 1, a page's title can be set declaratively or programmatically. Если вы забыли явно изменить заголовок на что-то более описательное, страница будет иметь заголовок по умолчанию "без названия".If you forget to explicitly change the title to something more descriptive, however, your page will have the default title, "Untitled Page". В идеале заголовок страницы задается автоматически в случае, если его значение не указано явным образом.Ideally, the page's title would be set automatically for us in the event that we don't explicitly specify its value. Например, если в среде выполнения в качестве заголовка страницы указано «безымянная страница», то может потребоваться, чтобы заголовок автоматически обновлялся так же, как и имя файла ASP.NET страницы.For example, if at runtime the page's title is "Untitled Page", we might want to have the title automatically updated to be the same as the ASP.NET page's filename. Хорошая новость состоит в том, что с небольшим объемом предварительной работы можно автоматически назначить заголовок.The good news is that with a little bit of upfront work it is possible to have the title automatically assigned.

Все веб-страницы ASP.NET являются производными от класса Page в пространстве имен System. Web. UI.All ASP.NET web pages derive from the Page class in the System.Web.UI namespace. Класс Page определяет минимальную функциональность, необходимую для страницы ASP.NET, и предоставляет необходимые свойства, такие как IsPostBack, IsValid, Requestи Response, а также многие другие.The Page class defines the minimal functionality needed by an ASP.NET page and exposes essential properties like IsPostBack, IsValid, Request, and Response, among many others. Часто для каждой страницы веб-приложения требуются дополнительные функции или функции.Oftentimes, every page in a web application requires additional features or functionality. Распространенный способ предоставления этого — создание пользовательского класса базовой страницы.A common way of providing this is to create a custom base page class. Пользовательский класс базовой страницы — это создаваемый класс, производный от класса Page и включающий дополнительные функциональные возможности.A custom base page class is a class you create that derives from the Page class and includes additional functionality. После создания базового класса можно получить от него страницы ASP.NET (а не класс Page), тем самым предлагая расширенные функции для страниц ASP.NET.Once this base class has been created, you can have your ASP.NET pages derive from it (rather than the Page class), thereby offering the extended functionality to your ASP.NET pages.

На этом шаге мы создадим базовую страницу, которая автоматически задает заголовок страницы ASP.NET для имени страницы, если заголовок не был явно задан в противном случае.In this step we create a base page that automatically sets the page's title to the ASP.NET page's filename if the title has not otherwise been explicitly set. На шаге 3 выполняется настройка заголовка страницы на основе схемы узла.Step 3 looks at setting the page's title based on the site map.

Note

Тщательное изучение создания и использования пользовательских классов базовой страницы выходит за рамки этой серии руководств.A thorough examination of creating and using custom base page classes is beyond the scope of this tutorial series. Дополнительные сведения см. в статье Использование пользовательского базового класса для классов кода программной части страниц ASP.NET.For more information, read Using a Custom Base Class for Your ASP.NET Pages' Code-Behind Classes.

Создание базового класса страницыCreating the Base Page Class

Первая задача — создание базового класса страницы, который расширяет класс Page.Our first task is to create a base page class, which is a class that extends the Page class. Для начала добавьте в проект папку App_Code, щелкнув правой кнопкой мыши имя проекта в обозреватель решений, выбрав Добавить папку ASP.NET и выбрав пункт App_Code.Start by adding an App_Code folder to your project by right-clicking on the project name in the Solution Explorer, choosing Add ASP.NET Folder, and then selecting App_Code. Затем щелкните правой кнопкой мыши папку App_Code и добавьте новый класс с именем BasePage.vb.Next, right-click on the App_Code folder and add a new class named BasePage.vb. На рис. 4 показан обозреватель решений после добавления App_Code папки и класса BasePage.vb.Figure 4 shows the Solution Explorer after the App_Code folder and BasePage.vb class have been added.

Добавление папки App_Code и класса с именем Басепаже

Рис. 04. добавление папки App_Code и класса с именем BasePageFigure 04: Add an App_Code Folder and a Class Named BasePage

Note

Visual Studio поддерживает два режима управления проектами: проекты веб-сайтов и проекты веб-приложений.Visual Studio supports two modes of project management: Web Site Projects and Web Application Projects. Папка App_Code предназначена для использования с моделью проекта веб-сайта.The App_Code folder is designed to be used with the Web Site Project model. Если вы используете модель проекта веб-приложения, поместите класс BasePage.vb в папку с именем, отличным от App_Code, например Classes.If you are using the Web Application Project model, place the BasePage.vb class in a folder named something other than App_Code, such as Classes. Дополнительные сведения об этом разделе см. в статье Перенос проекта веб-сайта в проект веб-приложения.For more information on this topic, refer to Migrating a Web Site Project to a Web Application Project.

Поскольку настраиваемая базовая страница служит базовым классом для классов кода программной части ASP.NET Pages, ей необходимо расширить класс Page.Because the custom base page serves as the base class for ASP.NET pages' code-behind classes, it needs to extend the Page class.

Public Class BasePage
 Inherits System.Web.UI.Page

End Class

При запросе страницы ASP.NET она проходит через ряд этапов, улучшалась на запрашиваемой странице в формат HTML.Whenever an ASP.NET page is requested it proceeds through a series of stages, culminating in the requested page being rendered into HTML. Можно коснуться к этапу, переопределив метод OnEvent Page класса.We can tap into a stage by overriding the Page class's OnEvent method. Для нашей базовой страницы автоматически задается заголовок, если он не был явно указан на этапе LoadComplete (что, как вы могли предположить, происходит после этапа Load).For our base page let's automatically set the title if it has not been explicitly specified by the LoadComplete stage (which, as you might have guessed, occurs after the Load stage).

Для этого переопределите метод OnLoadComplete и введите следующий код:To accomplish this, override the OnLoadComplete method and enter the following code:

Protected Overrides Sub OnLoadComplete(ByVal e As EventArgs)
 ' Set the page's title, if necessary
 If String.IsNullOrEmpty(Page.Title) OrElse Page.Title = "Untitled Page" Then
 ' Determine the filename for this page
 Dim fileName As String = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath)

 Page.Title = fileName
 End If

 MyBase.OnLoadComplete(e)
End Sub

Метод OnLoadComplete начинается с определения того, было ли свойство Title еще не задано явным образом.The OnLoadComplete method starts by determining if the Title property has not yet been explicitly set. Если свойство Title имеет Nothing, пустую строку или имеет значение "безымянная страница", оно назначается имени файла запрошенной страницы ASP.NET.If the Title property is Nothing, an empty string, or has the value "Untitled Page", it is assigned to the filename of the requested ASP.NET page. Физический путь к запрошенной странице ASP.NET-C:\MySites\Tutorial03\Login.aspx, например, доступен через свойство Request.PhysicalPath.The physical path to the requested ASP.NET page - C:\MySites\Tutorial03\Login.aspx, for example - is accessible via the Request.PhysicalPath property. Метод Path.GetFileNameWithoutExtension используется для извлечения только части имени файла, а затем это имя файла присваивается свойству Page.Title.The Path.GetFileNameWithoutExtension method is used to pull out just the filename portion, and this filename is then assigned to the Page.Title property.

Note

Я предлагаю улучшить эту логику, чтобы улучшить формат заголовка.I invite you to enhance this logic to improve the format of the title. Например, если имя файла страницы — Company-Products.aspx, приведенный выше код будет создавать название «Company-Products», но в идеале дефис будет заменен пробелом, как в «продуктах компании».For example, if the page's filename is Company-Products.aspx, the above code will produce the title "Company-Products", but ideally the dash would be replaced with a space, as in "Company Products". Кроме того, рекомендуется добавлять пробел при изменении регистра.Also, consider adding a space whenever there's a case change. То есть рассмотрите возможность добавления кода, который преобразует имя файла OurBusinessHours.aspx в заголовок «наши рабочие часы».That is, consider adding code that transforms the filename OurBusinessHours.aspx to a title of "Our Business Hours".

Наследование страниц содержимого базовым классом страницыHaving the Content Pages Inherit the Base Page Class

Теперь нам нужно обновить страницы ASP.NET на сайте, чтобы они были производными от настраиваемой базовой страницы (BasePage) вместо класса Page.We now need to update the ASP.NET pages in our site to derive from the custom base page (BasePage) instead of the Page class. Для этого перейдите к каждому классу кода программной части и измените объявление класса:To accomplish this go to each code-behind class and change the class declaration from:

Partial Class About
 Inherits System.Web.UI.Page
   ...
End Class

на:To:

Partial Class About
 Inherits BasePage
   ...
End Class

После этого посетите сайт в браузере.After doing so, visit the site through a browser. Если вы посещаете страницу, заголовок которой явно задан, например Default.aspx или About.aspx, используется явно заданный заголовок.If you visit a page whose title is explicitly set, such as Default.aspx or About.aspx, the explicitly specified title is used. Однако если вы посещаете страницу, заголовок которой не был изменен со страницы по умолчанию («страница без заголовка»), то класс базовой страницы задает для заголовка имя файла страницы.If, however, you visit a page whose title has not been changed from the default ("Untitled Page"), the base page class sets the title to the page's filename.

На рис. 5 показана страница MultipleContentPlaceHolders.aspx при просмотре в браузере.Figure 5 shows the MultipleContentPlaceHolders.aspx page when viewed through a browser. Обратите внимание, что заголовок представляет собой точное имя файла страницы (меньше расширения), "Мултиплеконтентплацехолдерс".Note that the title is precisely the page's filename (less the extension), "MultipleContentPlaceHolders".

если заголовок не указан явно, имя файла страницы используется автоматическиIf a Title is Not Explicitly Specified, the Page's Filename is Automatically Used

Рис. 05. Если заголовок не указан явно, имя файла страницы используется автоматически (щелкните, чтобы просмотреть изображение с полным размером)Figure 05: If a Title is Not Explicitly Specified, the Page's Filename is Automatically Used (Click to view full-size image)

Шаг 3. Создание заголовка страницы на карте узлаStep 3: Basing the Page Title on the Site Map

ASP.NET предлагает надежную платформу карт сайта, позволяющую разработчикам страниц определять иерархическую карту узла во внешнем ресурсе (например, в XML-файле или таблице базы данных) вместе с веб-элементами управления для отображения сведений о карте узла (например, SiteMapPath). Меню и элементы управления TreeView).ASP.NET offers a robust site map framework that enables page developers to define a hierarchical site map in an external resource (such as an XML file or database table) along with Web controls for displaying information about the site map (such as the SiteMapPath, Menu, and TreeView controls).

Доступ к структуре карт узла также можно получить программно из класса кода программной части страницы ASP.NET.The site map structure can also be accessed programmatically from an ASP.NET page's code-behind class. Таким образом, можно автоматически задать заголовок страницы в качестве заголовка соответствующего узла на карте узла.In this manner we can automatically set a page's title to the title of its corresponding node in the site map. Попробуем усовершенствовать класс BasePage, созданный на шаге 2, чтобы он предложит эту функцию.Let's enhance the BasePage class created in Step 2 so that it offers this functionality. Но сначала нам нужно создать карту узла для нашего сайта.But first we need to create a site map for our site.

Note

В этом учебнике предполагается, что читатель уже знаком с ASP. Функции схемы веб-узла NET.This tutorial assumes the reader already is familiar with ASP.NET's site map features. Дополнительные сведения об использовании карт веб-узлов см. в статье о нескольких статьях, посвященной ASP. Навигация в Интернете.For more information on using the site map, consult my multi-part article series, Examining ASP.NET's Site Navigation.

Создание схемы узлаCreating the Site Map

Система сопоставления узлов построена на основе модели поставщика, которая отделяет API карт сайта от логики, которая сериализует сведения о карте узла между памятью и постоянным хранилищем.The site map system is built atop the provider model, which decouples the site map API from the logic that serializes site map information between memory and a persistent store. .NET Framework поставляется с классомXmlSiteMapProvider, который является поставщиком схемы сайта по умолчанию.The .NET Framework ships with the XmlSiteMapProvider class, which is the default site map provider. Как следует из названия, XmlSiteMapProvider использует XML-файл в качестве хранилища карт веб-узла.As its name implies, XmlSiteMapProvider uses an XML file as its site map store. Давайте будем использовать этот поставщик для определения схемы узла.Let's use this provider for defining our site map.

Начните с создания файла схемы узла в корневой папке веб-сайта с именем Web.sitemap.Start by creating a site map file in the website's root folder named Web.sitemap. Для этого щелкните правой кнопкой мыши имя веб-сайта в обозреватель решений, выберите команду Добавить новый элемент и выберите шаблон "Схема сайта".To accomplish this, right-click on the website name in Solution Explorer, choose Add New Item, and select the Site Map template. Убедитесь, что файл имеет имя Web.sitemap и нажмите кнопку Добавить.Ensure that the file is named Web.sitemap and click Add.

добавить файл с именем Web. Sitemap в корневую папку веб-сайтаAdd a File Named Web.sitemap to the Website's Root Folder

Рис. 6. Добавление файла с именем Web.sitemap в корневую папку веб-сайта (щелкните, чтобы просмотреть изображение с полным размером)Figure 06: Add a File Named Web.sitemap to the Website's Root Folder (Click to view full-size image)

Добавьте следующий XML-код в файл Web.sitemap:Add the following XML to the Web.sitemap file:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="~/Default.aspx" title="Home">
 <siteMapNode url="~/About.aspx" title="About the Author" />
 <siteMapNode url="~/MultipleContentPlaceHolders.aspx" title="Using Multiple ContentPlaceHolder Controls" />
 </siteMapNode>
</siteMap>

Этот XML-код определяет иерархическую структуру карт узла, показанную на рис. 7.This XML defines the hierarchical site map structure shown in Figure 7.

В настоящее время схема узла состоит из трех узлов карт узла.

Рис. 07. в настоящее время схема узла состоит из трех узлов карт узлаFigure 07: The Site Map is Currently Composed of Three Site Map Nodes

При добавлении новых примеров мы будем обновлять структуру карт узла в следующих учебных курсах.We will update the site map structure in future tutorials as we add new examples.

Обновление главной страницы для включения навигации через веб-элементы управленияUpdating the Master Page to Include Navigation Web Controls

Теперь, когда у нас есть определенная схема узла, обновите главную страницу, чтобы она включала веб-элементы управления для навигации.Now that we have a site map defined, let's update the master page to include navigation Web controls. В частности, добавим элемент управления ListView к левому столбцу в разделе «уроки», который отображает неупорядоченный список с элементом списка для каждого узла, определенного в карте узла.Specifically, let's add a ListView control to the left column in the Lessons section that renders an unordered list with a list item for each node defined in the site map.

Note

Элемент управления ListView является новым для ASP.NET версии 3,5.The ListView control is new to ASP.NET version 3.5. Если вы используете предыдущую версию ASP.NET, используйте вместо этого элемент управления Repeater.If you are using a prior version of ASP.NET, use the Repeater control instead. Дополнительные сведения об элементе управления ListView см. в разделе Использование элементов управления ListView и DataPager для ASP.NET 3.5.For more information on the ListView control, see Using ASP.NET 3.5's ListView and DataPager Controls.

Сначала удалите существующую разметку неупорядоченного списка из раздела уроки.Start by removing the existing unordered list markup from the Lessons section. Затем перетащите элемент управления ListView с панели элементов и поместите его под заголовком «уроки».Next, drag a ListView control from the Toolbox and drop it beneath the Lessons heading. ListView находится в разделе данных панели элементов наряду с другими элементами управления представления: GridView, DetailsView и FormView.The ListView is located in the Data section of the Toolbox, alongside the other view controls: the GridView, DetailsView, and FormView. Задайте для свойства ID ListView значение LessonsList.Set the ListView's ID property to LessonsList.

В мастере настройки источника данных выберите привязку ListView к новому элементу управления SiteMapDataSource с именем LessonsDataSource.From the Data Source Configuration Wizard choose to bind the ListView to a new SiteMapDataSource control named LessonsDataSource. Элемент управления SiteMapDataSource возвращает иерархическую структуру из системы карт сайта.The SiteMapDataSource control returns the hierarchical structure from the site map system.

привязка элемента управления SiteMapDataSource к элементу управления ListView ЛессонслистBind a SiteMapDataSource Control to the LessonsList ListView Control

Рис. 08. привязка элемента управления SiteMapDataSource к элементу управления ListView Лессонслист (щелкните, чтобы просмотреть изображение с полным размером)Figure 08: Bind a SiteMapDataSource Control to the LessonsList ListView Control (Click to view full-size image)

После создания элемента управления SiteMapDataSource необходимо определить шаблоны ListView таким образом, чтобы он отображал неупорядоченный список с элементом списка для каждого узла, возвращенного элементом управления SiteMapDataSource.After creating the SiteMapDataSource control, we need to define the ListView's templates so that it renders an unordered list with a list item for each node returned by the SiteMapDataSource control. Это можно сделать с помощью следующей разметки шаблона:This can be accomplished using the following template markup:

<asp:ListView ID="LessonsList" runat="server" DataSourceID="LessonsDataSource">
 <LayoutTemplate>
 <ul>
 <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
 </ul>
 </LayoutTemplate>
 
 <ItemTemplate>
 <li><asp:HyperLink runat="server" ID="lnkLesson" NavigateUrl='<%# Eval("Url") %>'
 Text='<%# Eval("Title") %>' /></li>
 </ItemTemplate>
</asp:ListView>

LayoutTemplate создает разметку для неупорядоченного списка (<ul>...</ul>), пока ItemTemplate отображает каждый элемент, возвращенный SiteMapDataSource как элемент списка (<li>), содержащий ссылку на определенное занятие.The LayoutTemplate generates the markup for an unordered list (<ul>...</ul>) while the ItemTemplate renders each item returned by the SiteMapDataSource as a list item (<li>) that contains a link to the particular lesson.

После настройки шаблонов ListView посетите веб-сайт.After configuring the ListView's templates, visit the website. Как показано на рис. 9, в разделе «уроки» содержится один маркированный элемент Home.As Figure 9 shows, the Lessons section contains a single bulleted item, Home. Где находятся занятия о и использовании нескольких элементов управления ContentPlaceHolder?Where are the About and Using Multiple ContentPlaceHolder Controls lessons? SiteMapDataSource предназначен для возврата иерархического набора данных, но элемент управления ListView может отображать только один уровень иерархии.The SiteMapDataSource is designed to return a hierarchical set of data, but the ListView control can only display a single level of the hierarchy. Поэтому отображается только первый уровень узла карт веб-сайта, возвращенный SiteMapDataSource.Consequently, only the first level of site map nodes returned by the SiteMapDataSource is displayed.

раздел "уроки" содержит один элемент спискаThe Lessons Section Contains a Single List Item

Рис. 09. раздел уроки содержит один элемент списка (щелкните, чтобы просмотреть изображение с полным размером).Figure 09: The Lessons Section Contains a Single List Item (Click to view full-size image)

Чтобы отобразить несколько уровней, можно вложить несколько элементов ListView в ItemTemplate.To display multiple levels we could nest multiple ListViews within the ItemTemplate. Этот метод был проверен на главных страницах и в руководстве по переходу на веб-узел статьи работа с учебниками по работе с данными.This technique was examined in the Master Pages and Site Navigation tutorial of my Working with Data tutorial series. Однако в этой серии руководств на карте узла будет содержаться всего два уровня: Главная (верхний уровень); и каждый урок в качестве ребенка дома.However, for this tutorial series our site map will contain just a two levels: Home (the top level); and each lesson as a child of Home. Вместо создания вложенного ListView мы можем указать SiteMapDataSource не возвращать начальный узел, задав свойствуShowStartingNode значение False.Rather than crafting a nested ListView, we can instead instruct the SiteMapDataSource to not return the starting node by setting its ShowStartingNode property to False. Результатом этого является то, что SiteMapDataSource начинает с возврата второго уровня узлов карт узла.The net effect is that the SiteMapDataSource starts by returning the second tier of site map nodes.

В результате этого изменения ListView отображает элементы маркированного списка About и using of Controls (элементы управления ContentPlaceHolder), но не содержит элемент маркированного списка для дома.With this change, the ListView displays bullet items for the About and Using Multiple ContentPlaceHolder Controls lessons, but omits a bullet item for Home. Чтобы устранить эту проблему, можно явно добавить элемент маркированного списка для домашнего LayoutTemplate:To remedy this, we can explicitly add a bullet item for Home in the LayoutTemplate:

<LayoutTemplate>
 <ul>
 <li><asp:HyperLink runat="server" ID="lnkLesson"
 NavigateUrl="~/Default.aspx" Text="Home" /></li>
 <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
 </ul>
</LayoutTemplate>

Если настроить SiteMapDataSource на пропуск начального узла и явно добавить элемент маркированного списка, в разделе уроки теперь отображаются предполагаемые выходные данные.By configuring the SiteMapDataSource to omit the starting node and explicitly adding a Home bullet item, the Lessons section now displays the intended output.

разделе "уроки" содержится элемент маркированного списка для домашней страницы и каждого дочернего узлаThe Lessons Section Contains a Bullet Item for Home and Each Child Node

Рис. 10. в разделе "уроки" содержится элемент маркированного меню "Главная" и "каждый дочерний узел" (щелкните, чтобы просмотреть изображение с полным размером)Figure 10: The Lessons Section Contains a Bullet Item for Home and Each Child Node (Click to view full-size image)

Задание заголовка на основе схемы узлаSetting the Title Based on the Site Map

Используя карту узла, мы можем обновить наш BasePage класс, чтобы использовать заголовок, указанный на карте узла.With the site map in place, we can update our BasePage class to use the title specified in the site map. Как мы делали на шаге 2, мы хотим использовать заголовок узла «схема узла» только в том случае, если заголовок страницы не был явно задан разработчиком страницы.As we did in Step 2, we only want to use the site map node's title if the page's title has not been explicitly set by the page developer. Если запрашиваемая страница не имеет явно заданного заголовка страницы и не найдена на карте узла, мы вернемся к использованию имени файла запрошенной страницы (меньше расширения), как было сделано на шаге 2.If the page being requested does not have an explicitly set page title and is not found in the site map, then we'll fall back to using the requested page's filename (less the extension), as we did in Step 2. На рис. 11 показан этот процесс принятия решений.Figure 11 illustrates this decision process.

При отсутствии явно заданного заголовка страницы используется соответствующий заголовок узла схемы узла.

Рис. 11. при отсутствии явно заданного заголовка страницы используется соответствующий заголовок узла схемы узлаFigure 11: In the Absence of an Explicitly Set Page Title, the Corresponding Site Map Node's Title is Used

Обновите метод OnLoadComplete класса BasePage, чтобы включить в него следующий код:Update the BasePage class's OnLoadComplete method to include the following code:

Protected Overrides Sub OnLoadComplete(ByVal e As EventArgs)
 ' Set the page's title, if necessary
 If String.IsNullOrEmpty(Page.Title) OrElse Page.Title = "Untitled Page" Then
 ' Is this page defined in the site map?
 Dim newTitle As String = Nothing

 Dim current As SiteMapNode = SiteMap.CurrentNode
 If current IsNot Nothing Then
 newTitle = current.Title
 Else
 ' Determine the filename for this page
 newTitle = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath)
 End If

 Page.Title = newTitle
 End If

 MyBase.OnLoadComplete(e)
End Sub

Как и ранее, метод OnLoadComplete начинается с определения того, задан ли заголовок страницы явно.As before, the OnLoadComplete method starts by determining whether the page's title has been explicitly set. Если Page.Title имеет Nothing, пустую строку или присваивается значение "безымянная страница", код автоматически назначает значение Page.Title.If Page.Title is Nothing, an empty string, or is assigned the value "Untitled Page" then the code automatically assigns a value to Page.Title.

Чтобы определить используемый заголовок, код начинается со ссылки на свойствоCurrentNode классаSiteMap.To determine the title to use, the code starts by referencing the SiteMap class's CurrentNode property. CurrentNode возвращает экземпляр SiteMapNode в карте узла, соответствующий текущей запрошенной странице.CurrentNode returns the SiteMapNode instance in the site map that corresponds to the currently requested page. Если запрошенная в данный момент страница найдена в карте узла, свойство Title SiteMapNodeприсваивается заголовку страницы.Assuming the currently requested page is found within the site map, the SiteMapNode's Title property is assigned to the page's title. Если запрашиваемая в данный момент страница отсутствует на карте узла, CurrentNode возвращает Nothing и имя файла запрашиваемой страницы используется в качестве заголовка (как было сделано на шаге 2).If the currently requested page is not in the site map, CurrentNode returns Nothing and the requested page's filename is used as the title (as was done in Step 2).

На рис. 12 показана страница MultipleContentPlaceHolders.aspx при просмотре в браузере.Figure 12 shows the MultipleContentPlaceHolders.aspx page when viewed through a browser. Так как заголовок этой страницы не задан явно, вместо него используется соответствующий заголовок узла схемы узла.Because this page's title is not explicitly set, its corresponding site map node's title is used instead.

Заголовок страницы Мултиплеконтентплацехолдерс. aspx извлекается из схемы узла.

Рис. 12. заголовок страницы мултиплеконтентплацехолдерс. aspx извлекается из схемы узлаFigure 12: The MultipleContentPlaceHolders.aspx Page's Title is Pulled from the Site Map

Шаг 4. Добавление в раздел<head>другой разметки для конкретной страницыStep 4: Adding Other Page-Specific Markup to the<head>Section

Шаги 1, 2 и 3 Просмотрели настройку элемента <title> на каждой странице.Steps 1, 2, and 3 looked at customizing the <title> element on a page-by-page basis. Помимо <title>, раздел <head> может содержать элементы <meta> и элементы <link>.In addition to <title>, the <head> section may contain <meta> elements and <link> elements. Как отмечалось ранее в этом руководстве, <head> раздел Site.masterсодержит элемент <link> для Styles.css.As noted earlier in this tutorial, Site.master's <head> section includes a <link> element to Styles.css. Поскольку этот элемент <link> определен на главной странице, он включается в раздел <head> для всех страниц содержимого.Because this <link> element is defined within the master page, it is included in the <head> section for all content pages. Но как мы добавим <meta> и <link> элементы по отдельности на странице?But how do we go about adding <meta> and <link> elements on a page-by-page basis?

Самый простой способ добавить в раздел <head> содержимое, относящееся к странице, — создать элемент управления ContentPlaceHolder на главной странице.The easiest way to add page-specific content to the <head> section is by creating a ContentPlaceHolder control in the master page. У нас уже есть такой элемент ContentPlaceHolder (с именем head).We already have such a ContentPlaceHolder (named head). Таким образом, чтобы добавить настраиваемую разметку <head>, создайте соответствующий элемент управления содержимым на странице и поместите там разметку.Therefore, to add custom <head> markup, create a corresponding Content control in the page and place the markup there.

Чтобы продемонстрировать Добавление пользовательской <head> разметки на страницу, включите элемент <meta> Description в наш текущий набор страниц содержимого.To illustrate adding custom <head> markup to a page, let's include a <meta> description element to our current set of content pages. Элемент Description <meta> содержит краткое описание веб-страницы. Большинство поисковых систем включают эту информацию в некоторую форму при отображении результатов поиска.The <meta> description element provides a brief description about the web page; most search engines incorporate this information in some form when displaying search results.

Элемент Description <meta> имеет следующую форму:A <meta> description element has the following form:

<meta name="description" content="description of the web page" />

Чтобы добавить эту разметку на страницу содержимого, добавьте приведенный выше текст в элемент управления содержимым, который сопоставляется с headом ContentPlaceHolder главной страницы.To add this markup to a content page, add the above text to the Content control that maps to the master page's head ContentPlaceHolder. Например, чтобы определить элемент описания <meta> для Default.aspx, добавьте следующую разметку:For example, to define a <meta> description element for Default.aspx, add the following markup:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <meta name="description" content="Welcome to Scott Mitchell's Master Page Tutorials series." />
</asp:Content>

Поскольку head ContentPlaceHolder находится не в теле HTML-страницы, разметка, добавленная в элемент управления содержимым, не отображается в представление конструирования.Because the head ContentPlaceHolder is not within the HTML page's body, the markup added to the Content control is not displayed in the Design view. Чтобы просмотреть элемент описания <meta> посетите Default.aspx через браузер.To see the <meta> description element visit Default.aspx through a browser. После загрузки страницы просмотрите источник и обратите внимание, что <head> раздел содержит разметку, указанную в элементе управления содержимым.After the page has been loaded, view the source and note that the <head> section includes the markup specified in the Content control.

Потратьте время на добавление элементов описания <meta> в About.aspx, MultipleContentPlaceHolders.aspxи Login.aspx.Take a moment to add <meta> description elements to About.aspx, MultipleContentPlaceHolders.aspx, and Login.aspx.

Добавление разметки в<head>область программными средствамиProgrammatically Adding Markup to the<head>Region

head ContentPlaceHolder позволяет декларативно добавлять пользовательскую разметку в область <head> главной страницы.The head ContentPlaceHolder allows us to declaratively add custom markup to the master page's <head> region. Пользовательская разметка также может быть добавлена программно.Custom markup may also be added programmatically. Помните, что свойство Header Page класса возвращает экземпляр HtmlHead, определенный на главной странице (<head runat="server">).Recall that the Page class's Header property returns the HtmlHead instance defined in the master page (the <head runat="server">).

Возможность программного добавления содержимого в <head> область полезна, когда добавляемое содержимое является динамическим.Being able to programmatically add content to the <head> region is useful when the content to add is dynamic. Возможно, он основан на посещении страницы пользователем. возможно, он извлекается из базы данных.Perhaps it's based on the user visiting the page; maybe it's being pulled from a database. Независимо от причины можно добавить содержимое в HtmlHead, добавив элементы управления в его Controlsную коллекцию следующим образом:Regardless of the reason, you can add content to the HtmlHead by adding controls to its Controls collection like so:

' Programmatically add a <meta> element to the Header
Dim keywords As New HtmlMeta()
keywords.Name = "keywords"
keywords.Content = "master page,asp.net,tutorial"

Page.Header.Controls.Add(keywords)

Приведенный выше код добавляет элемент <meta> keywords в область <head>, которая предоставляет разделенный запятыми список ключевых слов, описывающих страницу.The above code adds the <meta> keywords element to the <head> region, which provides a comma-delimited list of keywords that describe the page. Обратите внимание, что для добавления тега <meta> можно создать экземпляр HtmlMeta , задать его свойства Name и Content, а затем добавить его в коллекцию Header``Controls.Note that to add a <meta> tag you create an HtmlMeta instance, set its Name and Content properties, and then add it to the Header's Controls collection. Аналогично, чтобы программно добавить элемент <link>, создайте объект HtmlLink , задайте его свойства, а затем добавьте его в коллекцию Controls Header.Similarly, to programmatically add a <link> element, create an HtmlLink object, set its properties, and then add it to the Header's Controls collection.

Note

Чтобы добавить произвольную разметку, создайте экземпляр LiteralControl , задайте его свойство Text, а затем добавьте его в коллекцию Controls Header.To add arbitrary markup, create a LiteralControl instance, set its Text property, and then add it to the Header's Controls collection.

СводкаSummary

В этом учебнике мы рассмотрели различные способы добавления разметки <head> региона в зависимости от страницы.In this tutorial we looked at a variety of ways to add <head> region markup on a page-by-page basis. Главная страница должна содержать экземпляр HtmlHead (<head runat="server">) с ContentPlaceHolder.A master page should include an HtmlHead instance (<head runat="server">) with a ContentPlaceHolder. HtmlHead экземпляр позволяет страницам содержимого программно получать доступ к области <head>, а также декларативно и программно задавать заголовок страницы; элемент управления ContentPlaceHolder позволяет декларативно добавлять пользовательскую разметку в раздел <head> с помощью элемента управления содержимым.The HtmlHead instance allows content pages to programmatically access the <head> region and to declaratively and programmatically set the page's title; the ContentPlaceHolder control enables custom markup to be added to the <head> section declaratively through a Content control.

Поздравляем с программированием!Happy Programming!

Дополнительные материалыFurther Reading

Дополнительные сведения о разделах, обсуждаемых в этом руководстве, см. в следующих ресурсах:For more information on the topics discussed in this tutorial, refer to the following resources:

Об автореAbout the Author

Скотт Митчелл, автор нескольких книг по ASP/ASP. NET и основатель 4GuysFromRolla.com, работал с веб-технологиями майкрософт с 1998.Scott Mitchell, author of multiple ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Скотт работает как независимый консультант, преподаватель и модуль записи.Scott works as an independent consultant, trainer, and writer. Его последняя книга — Sams обучать себя ASP.NET 3,5 за 24 часа.His latest book is Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Скотт можно получить по адресу mitchell@4GuysFromRolla.com или через свой блог по адресу http://ScottOnWriting.NET.Scott can be reached at mitchell@4GuysFromRolla.com or via his blog at http://ScottOnWriting.NET.

Специальная благодарностьSpecial Thanks To

Эта серия руководств была рассмотрена многими полезными рецензентами.This tutorial series was reviewed by many helpful reviewers. Потенциальным рецензентам для этого учебника были Зак Jones и Сучи Банержи.Lead reviewers for this tutorial were Zack Jones and Suchi Banerjee. Хотите ознакомиться с моими будущими статьями MSDN?Interested in reviewing my upcoming MSDN articles? Если это так, расположите строку в mitchell@4GuysFromRolla.com.If so, drop me a line at mitchell@4GuysFromRolla.com.