Especificar o título, as metamarcas e outros cabeçalhos de HTML na página mestra (VB)

por Scott Mitchell

Baixar código ou baixar PDF

Examina técnicas diferentes para definir os elementos de> de cabeçalho de <de classificação na página mestra da página de conteúdo.

Introdução

As novas páginas mestras criadas no Visual Studio 2008 têm, por padrão, dois controles ContentPlaceHolder: um chamado heade localizado no elemento <head>; e um chamado ContentPlaceHolder1, colocado dentro do formulário da Web. A finalidade do ContentPlaceHolder1 é definir uma região no formulário da Web que possa ser personalizada página por página. O head ContentPlaceHolder permite que as páginas adicionem conteúdo personalizado à seção <head>. (É claro que esses dois ContentPlaceHolders podem ser modificados ou removidos, e ContentPlaceHolder adicional pode ser adicionado à página mestra. Nossa página mestra, Site.master, atualmente tem quatro controles ContentPlaceHolder.)

O elemento HTML <head> serve como um repositório para obter informações sobre o documento da página da Web que não faz parte do próprio documento. Isso inclui informações como o título da página da Web, meta-informações usadas por mecanismos de pesquisa ou rastreadores internos e links para recursos externos, como RSS feeds, JavaScript e arquivos CSS. Algumas dessas informações podem ser pertinentes a todas as páginas no site. Por exemplo, talvez você queira importar globalmente as mesmas regras CSS e arquivos JavaScript para cada página do ASP.NET. No entanto, há partes do <head> elemento que são específicas de página. O título da página é um exemplo primo.

Neste tutorial, examinaremos como definir a marcação de seção <head> global e específica da página na página mestra e em suas páginas de conteúdo.

Examinando a seção<head>da página mestra

O arquivo de página mestra padrão criado pelo Visual Studio 2008 contém a seguinte marcação em sua <head> seção:

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

Observe que o elemento <head> contém um atributo runat="server", que indica que se trata de um controle de servidor (em vez de HTML estático). Todas as páginas ASP.NET derivam da classePage, localizada no namespace System.Web.UI. Essa classe contém uma propriedadeHeader que fornece acesso à região <head> da página. Usando a propriedade Header, podemos definir o título de uma página ASP.NET ou adicionar marcação adicional à seção <head> renderizada. É possível, então, personalizar o elemento <head> de uma página de conteúdo escrevendo um pouco de código no manipulador de eventos Page_Load da página. Examinaremos como definir programaticamente o título da página na etapa 1.

A marcação mostrada no elemento <head> acima também inclui um controle ContentPlaceHolder chamado head. Esse controle ContentPlaceHolder não é necessário, pois as páginas de conteúdo podem adicionar conteúdo personalizado ao elemento <head> de forma programática. No entanto, é útil em situações em que uma página de conteúdo precisa adicionar marcação estática ao elemento <head>, uma vez que a marcação estática pode ser adicionada declarativamente ao controle de conteúdo correspondente em vez de programaticamente.

Além do elemento <title> e head ContentPlaceHolder, o elemento <head> da página mestra deve conter qualquer marcação de nível <head>que seja comum a todas as páginas. Em nosso site, todas as páginas usam as regras de CSS definidas no arquivo Styles.css. Consequentemente, atualizamos o elemento <head> no tutorial criando um layout em todo o site com páginas mestras para incluir um elemento <link> correspondente. A marcação <head> atual de Site.master página mestra é mostrada abaixo.

<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>

Etapa 1: definindo o título de uma página de conteúdo

O título da página da Web é especificado por meio do elemento <title>. É importante definir o título de cada página para um valor apropriado. Ao visitar uma página, seu título é exibido na barra de título do navegador. Além disso, ao marcar uma página, os navegadores usam o título da página como o nome sugerido para o indicador. Além disso, muitos mecanismos de pesquisa mostram o título da página ao exibir os resultados da pesquisa.

Note

Por padrão, o Visual Studio define o elemento <title> na página mestra como "página sem título". Da mesma forma, novas páginas ASP.NET têm suas <title> definidas como "página sem título" também. Como pode ser fácil esquecer de definir o título da página para um valor apropriado, há muitas páginas na Internet com o título "página sem título". Pesquisar o Google para páginas da Web com este título retorna aproximadamente 2.460.000 resultados. Mesmo a Microsoft está suscetível a publicar páginas da Web com o título "página sem título". No momento da redação deste artigo, uma pesquisa do Google relatou 236 dessas páginas da Web no domínio Microsoft.com.

Uma página ASP.NET pode especificar seu título de uma das seguintes maneiras:

  • Colocando o valor diretamente no elemento <title>
  • Usando o atributo Title na diretiva <%@ Page %>
  • Definindo programaticamente a propriedade Title da página usando código como Page.Title="title" ou Page.Header.Title="title".

As páginas de conteúdo não têm um elemento <title>, pois elas são definidas na página mestra. Portanto, para definir o título de uma página de conteúdo, você pode usar o atributo Title da diretiva de <%@ Page %> ou defini-lo programaticamente.

Definindo o título da página declarativamente

O título de uma página de conteúdo pode ser definido declarativamente por meio do atributo Title da diretiva<%@ Page %>. Essa propriedade pode ser definida pela modificação direta da diretiva <%@ Page %> ou por meio do janela Propriedades. Vamos examinar ambas as abordagens.

Na exibição de origem, localize a diretiva <%@ Page %>, que está na parte superior da marcação declarativa da página. A diretiva <%@ Page %> para Default.aspx segue:

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

A diretiva <%@ Page %> especifica atributos específicos de página usados pelo mecanismo ASP.NET ao analisar e compilar a página. Isso inclui seu arquivo de página mestra, o local de seu arquivo de código e seu título, entre outras informações.

Por padrão, ao criar uma nova página de conteúdo, o Visual Studio define o atributo Title como "página sem título". Altere o atributo de Title do Default.aspxde "página sem título" para "tutoriais da página mestra" e exiba a página por meio de um navegador. A Figura 1 mostra a barra de título do navegador, que reflete o título da nova página.

A barra de título do navegador agora mostra "tutoriais de página mestra" em vez de "página sem título"

Figura 01: a barra de título do navegador agora mostra "tutoriais de página mestra" em vez de "página sem título"

O título da página também pode ser definido no janela Propriedades. No janela Propriedades, selecione documento na lista suspensa para carregar as propriedades no nível da página, que inclui a propriedade Title. A Figura 2 mostra o janela Propriedades depois que Title foi definido como "tutoriais da página mestra".

Você pode configurar o título na janela Propriedades, também

Figura 02: você pode configurar o título na janela Propriedades, também

Definindo o título da página programaticamente

A marcação de <head runat="server"> da página mestra é convertida em uma instância de classe deHtmlHead quando a página é renderizada pelo mecanismo de ASP.net. A classe HtmlHead tem uma propriedadeTitle cujo valor é refletido no elemento <title> renderizado. Essa propriedade pode ser acessada da classe code-behind de uma página ASP.NET por meio de Page.Header.Title; essa mesma propriedade também pode ser acessada por meio de Page.Title.

Para praticar a configuração do título da página programaticamente, navegue até a classe code-behind da página About.aspx e crie um manipulador de eventos para o evento Load da página. Em seguida, defina o título da página como "tutoriais da página mestra:: sobre:: Date", em que Data é a data atual. Depois de adicionar esse código, seu manipulador de eventos Page_Load deve ser semelhante ao seguinte:

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

A Figura 3 mostra a barra de título do navegador ao visitar a página About.aspx.

O título da página é definido de forma programática e inclui a data atual

Figura 03: o título da página é definido por meio de programação e inclui a data atual

Etapa 2: atribuindo automaticamente um título de página

Como vimos na etapa 1, o título de uma página pode ser definido declarativamente ou de forma programática. Se você esquecer de alterar explicitamente o título para algo mais descritivo, no entanto, sua página terá o título padrão, "página sem título". O ideal é que o título da página seja definido automaticamente para nós no caso de não especificar explicitamente seu valor. Por exemplo, se no tempo de execução o título da página for "página sem título", talvez queiramos que o título seja atualizado automaticamente para ser o mesmo que o nome de arquivo da página ASP.NET. A boa notícia é que, com um pouco de trabalho antecipado, é possível ter o título atribuído automaticamente.

Todas as páginas da Web ASP.NET derivam da classe Page no namespace System. Web. UI. A classe Page define a funcionalidade mínima necessária para uma página ASP.NET e expõe propriedades essenciais como IsPostBack, IsValid, Requeste Response, entre muitas outras. Muitas vezes, cada página em um aplicativo Web requer recursos ou funcionalidades adicionais. Uma maneira comum de fornecer isso é criar uma classe de página de base personalizada. Uma classe de página de base personalizada é uma classe que você cria que deriva da classe Page e inclui funcionalidade adicional. Depois que essa classe base tiver sido criada, você poderá fazer com que suas páginas ASP.NET derivem dela (em vez da classe Page), oferecendo, assim, a funcionalidade estendida às suas páginas do ASP.NET.

Nesta etapa, criamos uma página de base que define automaticamente o título da página para o nome de arquivo da página ASP.NET se o título não tiver sido definido de outra forma explicitamente. A etapa 3 examina a configuração do título da página com base no mapa do site.

Note

Um exame completo de criação e uso de classes de página de base personalizadas está além do escopo desta série de tutoriais. Para obter mais informações, leia usando uma classe base personalizada para as classes code-behind de páginas ASP.net.

Criando a classe da página de base

Nossa primeira tarefa é criar uma classe de página de base, que é uma classe que estende a classe Page. Comece adicionando uma pasta App_Code ao seu projeto clicando com o botão direito do mouse no nome do projeto na Gerenciador de Soluções, escolhendo Adicionar pasta ASP.NET e, em seguida, selecionando App_Code. Em seguida, clique com o botão direito do mouse na pasta App_Code e adicione uma nova classe chamada BasePage.vb. A Figura 4 mostra a Gerenciador de Soluções depois que a pasta App_Code e a BasePage.vb classe tiverem sido adicionadas.

Adicione uma pasta App_Code e uma classe chamada BasePage

Figura 04: adicionar uma pasta App_Code e uma classe chamada BasePage

Note

O Visual Studio dá suporte a dois modos de gerenciamento de projeto: projetos de site e projetos de aplicativos Web. A pasta App_Code foi projetada para ser usada com o modelo de projeto de site. Se você estiver usando o modelo de projeto de aplicativo Web, coloque a classe BasePage.vb em uma pasta chamada algo diferente de App_Code, como Classes. Para obter mais informações sobre este tópico, consulte migrando um projeto de site para um projeto de aplicativo Web.

Como a página de base personalizada serve como a classe base para classes code-behind de páginas ASP.NET, ele precisa estender a classe Page.

Public Class BasePage
 Inherits System.Web.UI.Page

End Class

Sempre que uma página ASP.NET é solicitada, ela prossegue em uma série de estágios, culminando na página solicitada que está sendo renderizada em HTML. Podemos tocar em um estágio substituindo o método OnEvent da classe Page. Para nossa página de base, vamos definir automaticamente o título se ele não tiver sido explicitamente especificado pelo estágio de LoadComplete (que, como você já deve ter adivinhado, ocorre após o estágio de Load).

Para fazer isso, substitua o método OnLoadComplete e insira o código a seguir:

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

O método OnLoadComplete começa determinando se a propriedade Title ainda não foi definida explicitamente. Se a propriedade Title for Nothing, uma cadeia de caracteres vazia ou tiver o valor "página sem título", ela será atribuída ao nome do arquivo da página ASP.NET solicitada. O caminho físico para a página ASP.NET solicitada-C:\MySites\Tutorial03\Login.aspx, por exemplo, é acessível por meio da propriedade Request.PhysicalPath. O método Path.GetFileNameWithoutExtension é usado para extrair apenas a parte do nome do arquivo, e esse filename é atribuído à propriedade Page.Title.

Note

Convido você a aprimorar essa lógica para melhorar o formato do título. Por exemplo, se o nome de arquivo da página for Company-Products.aspx, o código acima produzirá o título "produtos da empresa", mas, idealmente, o traço será substituído por um espaço, como em "produtos da empresa". Além disso, considere adicionar um espaço sempre que houver uma alteração de maiúsculas e minúsculas. Ou seja, considere adicionar código que transforma o nome de arquivo OurBusinessHours.aspx a um título de "nosso horário comercial".

Fazer com que as páginas de conteúdo herdem a classe de página de base

Agora, precisamos atualizar as páginas ASP.NET em nosso site para derivar da página de base personalizada (BasePage) em vez da classe Page. Para fazer isso, vá para cada classe code-behind e altere a declaração de classe de:

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

Para:

Partial Class About
 Inherits BasePage
   ...
End Class

Depois de fazer isso, visite o site por meio de um navegador. Se você visitar uma página cujo título é definido explicitamente, como Default.aspx ou About.aspx, o título explicitamente especificado será usado. No entanto, se você visitar uma página cujo título não tenha sido alterado do padrão ("página sem título"), a classe de página de base definirá o título como o nome de arquivo da página.

A Figura 5 mostra a página de MultipleContentPlaceHolders.aspx quando exibida por meio de um navegador. Observe que o título é precisamente o nome de arquivo da página (menos a extensão), "MultipleContentPlaceHolders".

se um título não for especificado explicitamente, o nome de arquivo da página será usado automaticamente

Figura 05: se um título não for especificado explicitamente, o nome de arquivo da página será usado automaticamente (clique para exibir a imagem em tamanho normal)

Etapa 3: baseando o título da página no mapa do site

O ASP.NET oferece uma estrutura de mapa do site robusta que permite que os desenvolvedores de página definam um mapa de site hierárquico em um recurso externo (como um arquivo XML ou uma tabela de banco de dados) junto com controles da Web para exibir informações sobre o mapa do site (como SiteMapPath, Menu e controles TreeView).

A estrutura do mapa do site também pode ser acessada programaticamente por meio de uma classe code-behind da página ASP.NET. Dessa maneira, podemos definir automaticamente o título de uma página para o título de seu nó correspondente no mapa do site. Vamos aprimorar a classe de BasePage criada na etapa 2 para que ela ofereça essa funcionalidade. Mas primeiro precisamos criar um mapa do site para nosso site.

Note

Este tutorial pressupõe que o leitor já esteja familiarizado com o ASP. Recursos do mapa do site da rede. Para obter mais informações sobre como usar o mapa do site, consulte minha série de artigos de várias partes, examinando ASP. Navegação do site da rede.

Criando o mapa do site

O sistema de mapa do site é criado acima do modelo de provedor, que DISSOCIA a API do mapa do site da lógica que serializa informações de mapa do site entre a memória e um repositório persistente. O .NET Framework é fornecido com a classeXmlSiteMapProvider, que é o provedor de mapa do site padrão. Como o nome indica, XmlSiteMapProvider usa um arquivo XML como seu repositório de mapa do site. Vamos usar esse provedor para definir nosso mapa de site.

Comece criando um arquivo de mapa do site na pasta raiz do site chamado Web.sitemap. Para fazer isso, clique com o botão direito do mouse no nome do site em Gerenciador de Soluções, escolha Adicionar novo item e selecione o modelo de mapa do site. Verifique se o arquivo é nomeado Web.sitemap e clique em Adicionar.

adicionar um arquivo chamado Web. sitemap à pasta raiz do site

Figura 06: adicionar um arquivo chamado Web.sitemap à pasta raiz do site (clique para exibir a imagem em tamanho normal)

Adicione o seguinte XML ao arquivo de Web.sitemap:

<?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>

Esse XML define a estrutura hierárquica do mapa do site mostrada na Figura 7.

O mapa do site é composto atualmente de três nós de mapa do site

Figura 07: o mapa do site é composto atualmente de três nós de mapa do site

Atualizaremos a estrutura do mapa do site em Tutoriais futuros à medida que adicionarmos novos exemplos.

Atualizando a página mestra para incluir controles de navegação na Web

Agora que temos um mapa do site definido, vamos atualizar a página mestra para incluir controles de navegação na Web. Especificamente, vamos adicionar um controle ListView à coluna à esquerda na seção lições que renderiza uma lista não ordenada com um item de lista para cada nó definido no mapa do site.

Note

O controle ListView é novo no ASP.NET versão 3,5. Se você estiver usando uma versão anterior do ASP.NET, use o controle Repeater em vez disso. Para obter mais informações sobre o controle ListView, consulte usando os controles ListView e DataPager do ASP.net 3.5.

Comece removendo a marcação de lista não ordenada existente da seção lições. Em seguida, arraste um controle ListView da caixa de ferramentas e solte-o abaixo do título de lições. O ListView está localizado na seção de dados da caixa de ferramentas, junto com os outros controles de exibição: GridView, DetailsView e FormView. Defina a propriedade ID do ListView como LessonsList.

No assistente de configuração da fonte de dados, escolha associar o ListView a um novo controle SiteMapDataSource chamado LessonsDataSource. O controle SiteMapDataSource retorna a estrutura hierárquica do sistema de mapa do site.

associar um controle SiteMapDataSource ao controle de ListView da Liçõeslist

Figura 08: associar um controle SiteMapDataSource ao controle de ListView da liçõeslist (clique para exibir a imagem em tamanho normal)

Depois de criar o controle SiteMapDataSource, precisamos definir os modelos de ListView para que ele processe uma lista não ordenada com um item de lista para cada nó retornado pelo controle SiteMapDataSource. Isso pode ser feito usando a seguinte marcação de modelo:

<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>

O LayoutTemplate gera a marcação para uma lista não ordenada (<ul>...</ul>) enquanto o ItemTemplate renderiza cada item retornado por SiteMapDataSource como um item de lista (<li>) que contém um link para a lição específica.

Depois de configurar os modelos de ListView, visite o site. Como mostra a Figura 9, a seção de lições contém um único item com marcadores, página inicial. Onde estão as lições sobre e usando vários controles ContentPlaceHolder? O SiteMapDataSource é projetado para retornar um conjunto hierárquico de dados, mas o controle ListView só pode exibir um único nível da hierarquia. Consequentemente, somente o primeiro nível dos nós de mapa do site retornado por SiteMapDataSource é exibido.

seção de lições contém um único item de lista

Figura 09: a seção de lições contém um único item de lista (clique para exibir a imagem em tamanho normal)

Para exibir vários níveis, poderíamos aninhar vários ListViews dentro do ItemTemplate. Essa técnica foi examinada nas páginas mestras e no tutorial de navegação do site da série de tutoriais de trabalho com dados. No entanto, para esta série de tutoriais, nosso mapa de site conterá apenas dois níveis: Home (o nível superior); e cada lição como um filho de casa. Em vez de criar um ListView aninhado, podemos instruir o SiteMapDataSource a não retornar o nó inicial definindo sua propriedadeShowStartingNode como False. O efeito de rede é que o SiteMapDataSource começa retornando a segunda camada de nós de mapa do site.

Com essa alteração, o ListView exibe itens de marcador para as lições sobre e usando vários controles ContentPlaceHolder, mas omite um item de marcador para página inicial. Para corrigir isso, podemos adicionar explicitamente um item de marcador para Home no LayoutTemplate:

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

Ao configurar o SiteMapDataSource para omitir o nó inicial e adicionar explicitamente um item de marcador doméstico, a seção lições exibe a saída pretendida.

seção de lições contém um item de marcador para página inicial e cada nó filho

Figura 10: a seção de lições contém um item de marcador para página inicial e cada nó filho (clique para exibir a imagem em tamanho normal)

Definindo o título com base no mapa do site

Com o mapa do site em vigor, podemos atualizar nossa classe BasePage para usar o título especificado no mapa do site. Como fizemos na etapa 2, só queremos usar o título do nó do mapa do site se o título da página não tiver sido explicitamente definido pelo desenvolvedor da página. Se a página que está sendo solicitada não tiver um título de página definido explicitamente e não for encontrada no mapa do site, voltaremos a usar o nome de arquivo da página solicitada (menos a extensão), como fizemos na etapa 2. A Figura 11 ilustra esse processo de decisão.

Na ausência de um título de página definido explicitamente, o título do nó do mapa do site correspondente é usado

Figura 11: na ausência de um título de página definido explicitamente, o título do nó do mapa do site correspondente é usado

Atualize o método OnLoadComplete da classe BasePage para incluir o código a seguir:

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

Como antes, o método OnLoadComplete começa determinando se o título da página foi definido explicitamente. Se Page.Title for Nothing, uma cadeia de caracteres vazia ou for atribuído o valor "página sem título", o código atribuirá automaticamente um valor a Page.Title.

Para determinar o título a ser usado, o código começa referenciando a propriedadeCurrentNodeda classeSiteMap. CurrentNode retorna a instância de SiteMapNode no mapa do site que corresponde à página solicitada no momento. Supondo que a página solicitada no momento seja encontrada no mapa do site, a propriedade Title do SiteMapNodeé atribuída ao título da página. Se a página solicitada no momento não estiver no mapa do site, CurrentNode retornará Nothing e o nome de arquivo da página solicitada será usado como o título (como foi feito na etapa 2).

A Figura 12 mostra a página de MultipleContentPlaceHolders.aspx quando exibida por meio de um navegador. Como o título desta página não é definido explicitamente, o título do nó do mapa do site correspondente é usado.

O título da página MultipleContentPlaceHolders. aspx é extraído do mapa do site

Figura 12: o título da página MultipleContentPlaceHolders. aspx é extraído do mapa do site

Etapa 4: adicionar outra marcação específica de página à seção<head>

As etapas 1, 2 e 3 observaram a personalização do elemento <title> de acordo com a página. Além de <title>, a seção <head> pode conter elementos de <meta> e elementos de <link>. Conforme observado anteriormente neste tutorial, Site.masterseção <head> inclui um elemento <link> para Styles.css. Como esse elemento de <link> é definido na página mestra, ele é incluído na seção <head> para todas as páginas de conteúdo. Mas como vamos adicionar <meta> e <link> elementos de uma base página por página?

A maneira mais fácil de adicionar conteúdo específico à página na seção <head> é criando um controle ContentPlaceHolder na página mestra. Já temos esse ContentPlaceHolder (chamado head). Portanto, para adicionar marcação de <head> personalizada, crie um controle de conteúdo correspondente na página e coloque a marcação nela.

Para ilustrar como adicionar marcação de <head> personalizada a uma página, vamos incluir um elemento de descrição de <meta> para nosso conjunto atual de páginas de conteúdo. O elemento de descrição de <meta> fornece uma breve descrição sobre a página da Web; a maioria dos mecanismos de pesquisa incorpora essas informações em algum formato ao exibir os resultados da pesquisa.

Um elemento de descrição de <meta> tem o seguinte formato:

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

Para adicionar essa marcação a uma página de conteúdo, adicione o texto acima ao controle de conteúdo que mapeia para o head ContentPlaceHolder da página mestra. Por exemplo, para definir um elemento de descrição de <meta> para Default.aspx, adicione a seguinte marcação:

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

Como o head ContentPlaceHolder não está dentro do corpo da página HTML, a marcação adicionada ao controle de conteúdo não é exibida no modo de exibição de Design. Para ver o elemento de descrição de <meta>, visite Default.aspx por meio de um navegador. Depois que a página for carregada, exiba a origem e observe que a seção <head> inclui a marcação especificada no controle de conteúdo.

Reserve um tempo para adicionar <meta> elementos de descrição a About.aspx, MultipleContentPlaceHolders.aspxe Login.aspx.

Adicionando marcação de forma programática à região de<head>

O head ContentPlaceHolder nos permite adicionar declarativamente uma marcação personalizada à região <head> da página mestra. A marcação personalizada também pode ser adicionada programaticamente. Lembre-se de que a propriedade Header da classe Page retorna a instância HtmlHead definida na página mestra (a <head runat="server">).

A capacidade de adicionar conteúdo ao <head> região de forma programática é útil quando o conteúdo a ser adicionado é dinâmico. Talvez seja baseado no usuário que visita a página; Talvez ele esteja sendo extraído de um banco de dados. Independentemente do motivo, você pode adicionar conteúdo ao HtmlHead adicionando controles à sua coleção de Controls, desta forma:

' 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)

O código acima adiciona o elemento de palavras-chave <meta> à região <head>, que fornece uma lista delimitada por vírgulas de palavras-chave que descrevem a página. Observe que para adicionar uma marcação de <meta> você cria uma instância de HtmlMeta , define suas propriedades Name e Content e, em seguida, adiciona-as à coleção Headerdo Controls. Da mesma forma, para adicionar programaticamente um elemento <link>, crie um objeto HtmlLink , defina suas propriedades e, em seguida, adicione-o à coleção de Controls do Header.

Note

Para adicionar uma marcação arbitrária, crie uma instância de LiteralControl , defina sua propriedade Text e, em seguida, adicione-a à coleção de Controls do Header.

Resumo

Neste tutorial, examinamos várias maneiras de adicionar <head> marcação de região de acordo com a página. Uma página mestra deve incluir uma instância de HtmlHead (<head runat="server">) com um ContentPlaceHolder. A instância de HtmlHead permite que as páginas de conteúdo acessem programaticamente a região de <head> e para definir de forma declarativa e programática o título da página; o controle ContentPlaceHolder permite que a marcação personalizada seja adicionada à seção <head> declarativamente por meio de um controle de conteúdo.

Boa programação!

Leitura adicional

Para obter mais informações sobre os tópicos discutidos neste tutorial, consulte os seguintes recursos:

Sobre o autor

Scott Mitchell, autor de vários livros sobre ASP/ASP. net e fundador da 4GuysFromRolla.com, tem trabalhado com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, instrutor e escritor independentes. Seu livro mais recente é que a Sams ensina a ASP.NET 3,5 em 24 horas. Scott pode ser contatado em mitchell@4GuysFromRolla.com ou por meio de seu blog em http://ScottOnWriting.NET.

Agradecimentos especiais a

Esta série de tutoriais foi revisada por muitos revisores úteis. Os revisores potenciais para este tutorial foram Zack Jones e Banerjee. Está interessado em revisar meus artigos futuros do MSDN? Em caso afirmativo, solte-me uma linha em mitchell@4GuysFromRolla.com.