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

  • Artigo

por Scott Mitchell

Baixar PDF

Analisa técnicas diferentes para definir elementos de cabeçalho> variados <na Página Mestra da página de conteúdo.

Introdução

Novas páginas de master criadas no Visual Studio 2008 têm, por padrão, dois controles ContentPlaceHolder: um chamado heade localizado no <head> elemento ; e outro chamado ContentPlaceHolder1, colocados no Formulário da Web. A finalidade de ContentPlaceHolder1 é definir uma região no Formulário da Web que pode ser personalizada de página por página. O head ContentPlaceHolder permite que as páginas adicionem conteúdo personalizado à <head> seção. (É claro que esses dois ContentPlaceHolders podem ser modificados ou removidos e ContentPlaceHolder adicional pode ser adicionado à página master. Nossa página de master, 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, as metadações usadas por mecanismos de pesquisa ou rastreadores internos e links para recursos externos, como feeds RSS, JavaScript e arquivos CSS. Algumas dessas informações podem ser pertinentes a todas as páginas do site. Por exemplo, talvez você queira importar globalmente as mesmas regras CSS e arquivos JavaScript para cada página ASP.NET. No entanto, há partes do <head> elemento que são específicas da página. O título da página é um exemplo primo.

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

Examinando a Seção da Página Mestra<head>

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

A marcação mostrada no <head> elemento 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 <head> elemento programaticamente. No entanto, é útil em situações em que uma página de conteúdo precisa adicionar marcação estática ao <head> elemento, pois a marcação estática pode ser adicionada declarativamente ao controle conteúdo correspondente em vez de programaticamente.

Além do <title> elemento e head contentPlaceHolder, o elemento da <head> página master deve conter qualquer <head>marcação no nível que seja comum a todas as páginas. Em nosso site, todas as páginas usam as regras CSS definidas no Styles.css arquivo. Consequentemente, atualizamos o <head> elemento no tutorial Criando um layout de Site-Wide com páginas mestras para incluir um elemento correspondente <link> . Nossa Site.master marcação atual <head> da página master é 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: Definir o título de uma página de conteúdo

O título da página da Web é especificado por meio do <title> elemento . É importante definir o título de cada página como um valor apropriado. Ao visitar uma página, seu título é exibido na barra 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.

Observação

Por padrão, o Visual Studio define o <title> elemento na página master como "Página sem título". Da mesma forma, novas páginas de ASP.NET também têm seu <title> conjunto como "Página sem título". Como pode ser fácil esquecer de definir o título da página como um valor apropriado, há muitas páginas na Internet com o título "Página sem título". Pesquisar páginas da Web no Google com esse título retorna cerca de 2.460.000 resultados. Até a Microsoft está suscetível à publicação de páginas da Web com o título "Página sem título". No momento desta escrita, uma pesquisa do Google relatou 236 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 dentro do <title> elemento
  • Usando o Title atributo na <%@ Page %> diretiva
  • Definindo programaticamente a propriedade da Title 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 <title> elemento, pois ele é definido na página master. Portanto, para definir o título de uma página de conteúdo, você pode usar o <%@ Page %> atributo da Title diretiva 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 Title atributo da <%@ Page %> diretiva . Essa propriedade pode ser definida modificando diretamente a <%@ Page %> diretiva ou por meio do janela Propriedades. Vamos examinar as duas abordagens.

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

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

A <%@ Page %> diretiva especifica atributos específicos da página usados pelo mecanismo de ASP.NET ao analisar e compilar a página. Isso inclui seu arquivo de página master, 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 Title atributo como "Página sem título". Altere Default.aspxo atributo de Title "Página sem título" para "Tutoriais de Página Mestra" e exiba a página por meio de um navegador. A Figura 1 mostra a barra título do navegador, que reflete o novo título da página.

A barra de título do navegador agora mostra

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 do janela Propriedades. No janela Propriedades, selecione DOCUMENT na lista suspensa para carregar as propriedades no nível da página, que inclui a Title propriedade . A Figura 2 mostra o janela Propriedades depois Title de ter sido definido como "Tutoriais de Página Mestra".

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

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

Definindo o título da página programaticamente

A marcação da <head runat="server"> página master é convertida em uma HtmlHead instância de classe quando a página é renderizada pelo mecanismo de ASP.NET. A HtmlHead classe tem uma Title propriedade cujo valor é refletido no elemento renderizado <title> . Essa propriedade pode ser acessada por meio de uma classe code-behind de uma página ASP.NET por meio Page.Header.Titlede ; 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 About.aspx classe code-behind da página e crie um manipulador de eventos para o evento da Load página. Em seguida, defina o título da página como "Tutoriais de Página Mestra :: Sobre :: data", em que a data é a data atual. Depois de adicionar esse código, o Page_Load manipulador de eventos 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 About.aspx página.

O título da página é definido programaticamente e inclui a data atual

Figura 03: o título da página é definido programaticamente e inclui a data atual

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

Como vimos na Etapa 1, o título de uma página pode ser definido declarativamente ou programaticamente. 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 caso não especifiquemos explicitamente seu valor. Por exemplo, se em runtime 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 do arquivo da página ASP.NET. A boa notícia é que, com um pouco de trabalho inicial, é possível ter o título atribuído automaticamente.

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

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

Observação

Um exame detalhado da criação e do uso de classes de página base personalizadas está além do escopo desta série de tutoriais.

Criando a classe de página base

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

Adicionar uma pasta App_Code e uma classe chamada BasePage

Figura 04: Adicionar uma App_Code pasta e uma classe nomeada BasePage

Observação

O Visual Studio dá suporte a dois modos de gerenciamento de projetos: Projetos de Site e Projetos de Aplicativo Web. A App_Code pasta foi projetada para ser usada com o modelo de Projeto do Site. Se você estiver usando o modelo do Projeto de Aplicativo Web, coloque a BasePage.vb classe em uma pasta chamada algo diferente App_Codede , 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 base personalizada serve como a classe base para ASP.NET classes code-behind de páginas, ela precisa estender a Page classe.

Public Class BasePage
 Inherits System.Web.UI.Page

End Class

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

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

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 OnLoadComplete método começa determinando se a Title propriedade ainda não foi definida explicitamente. Se a Title propriedade 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 de ASP.NET solicitada – C:\MySites\Tutorial03\Login.aspxpor exemplo – é acessível por meio da Request.PhysicalPath propriedade . O Path.GetFileNameWithoutExtension método é usado para extrair apenas a parte do nome do arquivo e esse nome de arquivo é atribuído à Page.Title propriedade .

Observação

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 caso. Ou seja, considere adicionar código que transforma o nome do arquivo OurBusinessHours.aspx em um título de "Nosso Horário Comercial".

Ter as páginas de conteúdo herdando a classe de página base

Agora precisamos atualizar as páginas ASP.NET em nosso site para derivar da página base personalizada (BasePage) em vez da Page classe . 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 está definido explicitamente, como Default.aspx ou About.aspx, o título especificado explicitamente será usado. Se, no entanto, você visitar uma página cujo título não foi alterado do padrão ("Página sem título"), a classe de página base definirá o título como o nome do arquivo da página.

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

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

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

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

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

A estrutura do mapa do site também pode ser acessada programaticamente de uma classe code-behind de uma 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 BasePage classe criada na Etapa 2 para que ela ofereça essa funcionalidade. Mas primeiro precisamos criar um mapa de site para nosso site.

Observação

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

Criando o Mapa do Site

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

Comece criando um arquivo de mapa de site na pasta raiz do site chamada 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 Mapa do Site. Verifique se o arquivo está nomeado Web.sitemap e clique em Adicionar.

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

Figura 06: Adicionar um arquivo nomeado Web.sitemap à pasta raiz do site (clique para exibir a imagem em tamanho real)

Adicione o seguinte XML ao Web.sitemap arquivo:

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

Este XML define a estrutura de mapa de site hierárquico mostrada na Figura 7.

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

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

Atualizaremos a estrutura do mapa do site em tutoriais futuros à medida que adicionamos novos exemplos.

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

Agora que temos um mapa de site definido, vamos atualizar a página master para incluir controles web de navegação. 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.

Observação

O controle ListView é novo para ASP.NET versão 3.5. Se você estiver usando uma versão anterior do ASP.NET, use o controle Repeater.

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 Lições. O ListView está localizado na seção Dados da Caixa de Ferramentas, juntamente com os outros controles de exibição: GridView, DetailsView e FormView. Defina a propriedade de ID 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 LessonsList ListView

Figura 08: Associar um controle SiteMapDataSource ao controle LessonsList ListView (Clique para exibir a imagem em tamanho real)

Depois de criar o controle SiteMapDataSource, precisamos definir os modelos do ListView para que ele renderize 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 pelo SiteMapDataSource como um item de lista (<li>) que contém um link para a lição específica.

Depois de configurar os modelos do ListView, visite o site. Como mostra a Figura 9, a seção 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 foi 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 de nós de mapa do site retornados pelo SiteMapDataSource é exibido.

A seção Lições contém um item de lista única

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

Para exibir vários níveis, podemos aninhar vários ListViews dentro do ItemTemplate. Essa técnica foi examinada no tutorial Páginas Mestras e Navegação no Site da minha série de tutoriais Trabalhando com Dados. No entanto, para esta série de tutoriais, nosso mapa do site conterá apenas dois níveis: Página Inicial (o nível superior); e cada lição como um filho de Home. Em vez de criar um ListView aninhado, podemos instruir o SiteMapDataSource a não retornar o nó inicial definindo sua ShowStartingNode propriedadeFalsecomo . O efeito líquido é que o SiteMapDataSource começa retornando a segunda camada de nós do 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 marcador Home, a seção Lições agora exibe a saída pretendida.

A seção Lições contém um item de marcador para casa e cada nó filho

Figura 10: a seção Lições contém um item de marcador para casa e cada nó filho (clique para exibir imagem em tamanho real)

Definindo o título com base no mapa do site

Com o mapa do site em vigor, podemos atualizar nossa BasePage classe 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 definido explicitamente 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 BasePage método da OnLoadComplete classe para incluir o seguinte código:

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 OnLoadComplete método começa determinando se o título da página foi definido explicitamente. Se Page.Title for Nothing, uma cadeia de caracteres vazia ou receber 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 SiteMappropriedade da CurrentNodeclasse. CurrentNode retorna a SiteMapNode instância 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 SiteMapNodepropriedade 's Title é 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 do arquivo da página solicitada será usado como o título (como foi feito na Etapa 2).

A Figura 12 mostra a MultipleContentPlaceHolders.aspx página quando exibida por meio de um navegador. Como o título desta página não está 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 outras Page-Specific marcação à<head>seção

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

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

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

Um <meta> elemento de descrição tem o seguinte formulário:

<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 Conteúdo mapeado para o ContentPlaceHolder da head página master. Por exemplo, para definir um <meta> elemento de descrição 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 Conteúdo não é exibida no modo design. Para ver o <meta> elemento de descrição, visite Default.aspx por meio de um navegador. Depois que a página tiver sido carregada, exiba a origem e observe que a <head> seção inclui a marcação especificada no controle Conteúdo.

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

Adicionar marcação programaticamente à<head>região

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

Ser capaz de adicionar conteúdo programaticamente à <head> região é útil quando o conteúdo a ser adicionado é dinâmico. Talvez seja baseado no usuário que está visitando a página; talvez esteja sendo extraída de um banco de dados. Independentemente do motivo, você pode adicionar conteúdo ao HtmlHead adicionando controles à sua Controls coleção da seguinte maneira:

' 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 <meta> elemento de palavras-chave à <head> região, que fornece uma lista delimitada por vírgulas de palavras-chave que descrevem a página. Observe que para adicionar uma <meta> marca, você cria uma HtmlMeta instância, define suas Name propriedades e Content e, em seguida, adiciona-a Headerà coleção do .Controls Da mesma forma, para adicionar programaticamente um <link> elemento, criar um HtmlLink objeto, definir suas propriedades e adicioná-lo à Headercoleção do .Controls

Observação

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

Resumo

Neste tutorial, analisamos várias maneiras de adicionar <head> a marcação de região em uma base página por página. Uma página master deve incluir uma HtmlHead instância (<head runat="server">) com um ContentPlaceHolder. A HtmlHead instância permite que páginas de conteúdo acessem programaticamente a <head> região e defina declarativamente e programaticamente o título da página; o controle ContentPlaceHolder permite que a marcação personalizada seja adicionada à <head> seção declarativamente por meio de um controle content.

Programação feliz!

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 do ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias da Microsoft Web desde 1998. Scott trabalha como consultor independente, treinador e escritor. Seu último livro é Sams Teach Yourself ASP.NET 3.5 em 24 Horas. Scott pode ser contatado em mitchell@4GuysFromRolla.com ou através de seu blog em http://ScottOnWriting.NET.

Agradecimentos Especiais

Esta série de tutoriais foi revisada por muitos revisores úteis. Os principais revisores deste tutorial foram Zack Jones e Suchi Banerjee. Interessado em revisar meus próximos artigos do MSDN? Nesse caso, solte-me uma linha em mitchell@4GuysFromRolla.com.

AnteriorAvançar