Especificar el título, etiquetas meta y otros encabezados HTML en la página maestra (C#)
por Scott Mitchell
Examina diferentes técnicas para definir elementos <head> en la página maestra de la página de contenido.
Introducción
Las nuevas páginas maestras creadas en Visual Studio 2008 tienen, de forma predeterminada, dos controles ContentPlaceHolder: uno llamado head y se encuentran en el elemento <head> y otro denominado ContentPlaceHolder1, colocado dentro del formulario web. El propósito de ContentPlaceHolder1 es definir un área en el formulario web que se puede personalizar en una página a página. El ContentPlaceHolder head permite a las páginas agregar contenido personalizado a la sección <head>. (Por supuesto, estos dos ContentPlaceHolders se pueden modificar o quitar, y se puede agregar un ContentPlaceHolder adicional a la página maestra. Nuestra página maestra, Site.master, actualmente tiene cuatro controles ContentPlaceHolder).
El elemento <head> HTML sirve como repositorio para obtener información sobre el documento de página web que no forma parte del propio documento. Esto incluye información como el título de la página web, la metainformación usada por motores de búsqueda o rastreadores internos, y vínculos a recursos externos, como fuentes RSS, JavaScript y archivos CSS. Parte de esta información puede ser pertinente para todas las páginas del sitio web. Por ejemplo, es posible que quiera importar globalmente las mismas reglas CSS y archivos JavaScript para cada página ASP.NET. Sin embargo, hay partes del elemento <head> que son específicas de la página. El título de la página es un buen ejemplo.
En este tutorial se examina cómo definir el marcado de sección de global y específico de páginas <head> en la página maestra y en sus páginas de contenido.
Examinar la sección de la página maestra <head>
El archivo de página maestra predeterminado creado por Visual Studio 2008 contiene el marcado siguiente en su sección <head>:
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Observe que el elemento <head> contiene un atributo runat="server", que indica que es un control de servidor (en lugar de HTML estático). Todas las páginas ASP.NET derivan de la clase Page, que se encuentra en el espacio de nombres System.Web.UI. Esta clase contiene una propiedad Header que proporciona acceso a la región <head> de la página. Con la propiedad Header podemos establecer un título de página ASP.NET o agregar marcado adicional a la sección <head> representada. Es posible, a continuación, personalizar el elemento de una página de contenido <head> escribiendo un poco de código en el controlador de eventos de la página Page_Load. Examinaremos cómo establecer mediante programación el título de la página en el paso 1.
El marcado que se muestra en el elemento <head> anterior también incluye un control ContentPlaceHolder denominado head. Este control ContentPlaceHolder no es necesario, ya que las páginas de contenido pueden agregar contenido personalizado al elemento <head> mediante programación. Sin embargo, resulta útil, en situaciones en las que una página de contenido necesita agregar marcado estático al elemento <head>, ya que el marcado estático se puede agregar declarativamente al control Content correspondiente en lugar de mediante programación.
Además del elemento <title> y el ContentPlaceHolder head, el elemento <head> de la página maestra debe contener cualquier marcado de nivel <head> común a todas las páginas. En nuestro sitio web, todas las páginas usan las reglas CSS definidas en el archivo Styles.css. Por lo tanto, hemos actualizado el elemento <head> en el tutorial Creación de un diseño de todo el sitio con páginas maestras para incluir un elemento <link> correspondiente. A continuación se muestra el marcado actual <head> de nuestra página maestra Site.master.
<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>
Paso 1: establecer el título de una página de contenido
El título de la página web se especifica a través del elemento <title>. Es importante establecer el título de cada página en un valor adecuado. Al visitar una página, su título se muestra en la barra título del explorador. Además, al marcar una página, los exploradores usan el título de la página como nombre sugerido para el marcador. Además, muchos motores de búsqueda muestran el título de la página al mostrar los resultados de búsqueda.
Nota:
De forma predeterminada, Visual Studio establece el elemento <title> de la página maestra en "Página sin título". Del mismo modo, las páginas nuevas ASP.NET tienen su <title> establecido en "Página sin título" también. Dado que puede ser fácil olvidarse de establecer el título de la página en un valor adecuado, hay muchas páginas en Internet con el título "Página sin título". La búsqueda de páginas web en Google con este título devuelve aproximadamente 2 460 000 resultados. Incluso Microsoft es susceptible a publicar páginas web con el título "Página sin título". En el momento de redactar este documento, una búsqueda de Google informó de 236 páginas web de este tipo en el dominio de Microsoft.com.
Una página ASP.NET puede especificar su título de una de las siguientes maneras:
- Colocando el valor directamente dentro del elemento
<title> - Uso del atributo
Titleen la directiva<%@ Page %> - Establecer mediante programación la propiedad
Titlede la página mediante código comoPage.Title="title"oPage.Header.Title="title".
Las páginas de contenido no tienen ningún elemento <title>, ya que se define en la página maestra. Por lo tanto, para establecer el título de una página de contenido, puede usar el atributo <%@ Page %> de la directiva Title o establecerlo mediante programación.
Establecer el título de la página de forma declarativa
El título de una página de contenido se puede establecer de forma declarativa a través del atributo Title de la directiva <%@ Page %>. Esta propiedad se puede establecer modificando directamente la directiva <%@ Page %> o a través de la ventana Propiedades. Veamos ambos métodos.
En la vista Origen, busque la directiva <%@ Page %>, que se encuentra en la parte superior del marcado declarativo de la página. La directiva <%@ Page %> para Default.aspx sigue:
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
La directiva <%@ Page %> especifica atributos específicos de página utilizados por el motor de ASP.NET al analizar y compilar la página. Esto incluye su archivo de página maestra, la ubicación de su archivo de código y su título, entre otras informaciones.
De forma predeterminada, al crear una nueva página de contenido, Visual Studio establece el atributo Title en Página sin título. Cambie el atributo Title de Default.aspx de "Página sin título" a "Tutoriales de página maestra" y, a continuación, vea la página a través de un explorador. En la ilustración 1 se muestra la barra título del explorador, que refleja el nuevo título de página.
Ilustración 01: la barra de título del explorador muestra ahora "Tutoriales de página maestra" en lugar de "Página sin título"
El título de la página también se puede establecer desde la ventana Propiedades. En la ventana Propiedades, seleccione DOCUMENTO en la lista desplegable para cargar las propiedades de nivel de página, que incluye la propiedad Title. En la ilustración 2 se muestra la ventana Propiedades después de establecer Title en "Tutoriales de página maestra".
Ilustración 02: puede configurar el título desde la ventana Propiedades también
Establecer el título de la página mediante programación
El marcado de la página maestra <head runat="server"> se traduce en una instancia de clase HtmlHead cuando el motor de ASP.NET representa la página. La clase HtmlHead tiene una propiedad Title cuyo valor se refleja en el elemento <title> representado. Esta propiedad es accesible desde una clase de código subyacente de ASP.NET página a través de Page.Header.Title; también se puede acceder a esta misma propiedad a través de Page.Title.
Para practicar la configuración del título de la página mediante programación, vaya a la clase de código subyacente de la página About.aspx y cree un controlador de eventos para el evento de la página Load. A continuación, establece el título de la página como "Tutoriales de la página maestra :: Acerca de :: date", donde date es la fecha actual. Después de agregar este código, el controlador de eventos Page_Load debe ser similar al siguiente:
protected void Page_Load(object sender, EventArgs e)
{
Page.Title = string.Format("Master Page Tutorials :: About :: {0:d}", DateTime.Now);
}
En la ilustración 3 se muestra la barra de título del explorador al visitar la página About.aspx.
Ilustración 03: el título de la página se establece mediante programación e incluye la fecha actual
Paso 2: asignación automática de un título de página
Como vimos en el paso 1, el título de una página se puede establecer mediante declaración o mediante programación. Si olvida cambiar explícitamente el título a algo más descriptivo, la página tendrá el título predeterminado, "Página sin título". Lo ideal es que el título de la página se establezca automáticamente para nosotros en caso de que no especifiquemos explícitamente su valor. Por ejemplo, si en runtime el título de la página es "Página sin título", es posible que deseemos que el título se actualice automáticamente para que sea el mismo que el nombre de archivo de la página ASP.NET. La buena noticia es que, con un poco de trabajo inicial, es posible tener el título asignado automáticamente.
Todas las páginas web ASP.NET derivan de la clase Page en el espacio de nombres System.Web.UI. La clase Page define la funcionalidad mínima necesaria para una página ASP.NET y expone propiedades esenciales como IsPostBack, IsValid, Request y Response, entre muchas otras. A menudo, cada página de una aplicación web requiere características o funcionalidades adicionales. Una forma común de proporcionar esto es crear una clase de página base personalizada. Una clase de página base personalizada es una clase que se crea que deriva de la clase Page e incluye funcionalidad adicional. Una vez creada esta clase base, puede hacer que las páginas de ASP.NET deriven de ella (en lugar de la clase Page), lo que ofrece la funcionalidad extendida a las páginas de ASP.NET.
En este paso se crea una página base que establece automáticamente el título de la página en el nombre de archivo de la página ASP.NET si el título no se ha establecido explícitamente. El paso 3 examina el establecimiento del título de la página en función del mapa del sitio.
Nota:
Un examen exhaustivo de la creación y el uso de clases de página base personalizadas está fuera del ámbito de esta serie de tutoriales.
Creación de la clase de página base
Nuestra primera tarea consiste en crear una clase de página base, que es una clase que extiende la clase Page. Para empezar, agregue una carpeta App_Code al proyecto; para ello, haga clic con el botón derecho en el nombre del proyecto en el Explorador de soluciones, elija Agregar ASP.NET carpeta y, a continuación, seleccione App_Code. A continuación, haga clic con el botón derecho en la carpeta App_Code y agregue una nueva clase denominada BasePage.cs. En la ilustración 4 se muestra el Explorador de soluciones después de agregar la carpeta App_Code y la clase BasePage.cs.
Ilustración 04: agregar una carpeta App_Code y una clase denominada BasePage
Nota:
Visual Studio admite dos modos de administración de proyectos: proyectos de sitio web y proyectos de aplicaciones web. La carpeta App_Code está diseñada para usarse con el modelo de proyecto de sitio web. Si usa el modelo de proyecto de aplicación web, coloque la clase BasePage.cs en una carpeta cuyo nombre no sea App_Code, como Classes. Para obtener más información sobre este tema, consulte Migración de un proyecto de sitio web a un proyecto de aplicación web.
Dado que la página base personalizada sirve como clase base para las clases de clase de código subyacente de las páginas ASP.NET, es necesario extender la clase Page.
public class BasePage : System.Web.UI.Page
{
}
Cada vez que se solicita una página ASP.NET, esta pasa por una serie de fases que culminan con la conversión a HTML de la página solicitada. Podemos pulsar en una fase reemplazando el método OnEvent de la clase Page. Para nuestra página base, vamos a establecer automáticamente el título si no se ha especificado explícitamente por la fase LoadComplete (que, como habrá adivinado, se produce después de la faseLoad).
Para ello, invalide el método OnLoadComplete y escriba el siguiente código:
protected override void OnLoadComplete(EventArgs e)
{
// Set the page's title, if necessary
if (string.IsNullOrEmpty(Page.Title) || Page.Title == "Untitled Page")
{
// Determine the filename for this page
string fileName = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath);
Page.Title = fileName;
}
base.OnLoadComplete(e);
}
El método OnLoadComplete comienza por determinar si la propiedad Title aún no se ha establecido explícitamente. Si la propiedad Title es null, una cadena vacía o tiene el valor "Página sin título", se asigna al nombre de archivo de la página ASP.NET solicitada. La ruta de acceso física a la página ASP.NET solicitada, C:\MySites\Tutorial03\Login.aspx, por ejemplo, es accesible a través de la propiedad Request.PhysicalPath. El método Path.GetFileNameWithoutExtension se usa para extraer solo la parte del nombre de archivo y este nombre de archivo se asigna a la propiedad Page.Title.
Nota:
Le invitamos a mejorar esta lógica para mejorar el formato del título. Por ejemplo, si el nombre de archivo de la página es Company-Products.aspx, el código anterior generará el título "Productos-de-empresa", pero idealmente los guiones se reemplazarían por un espacio, como en "Productos de empresa". Además, considere la posibilidad de agregar un espacio cada vez que se produzca un cambio de caso. Es decir, considere la posibilidad de agregar código que transforme el nombre de archivo OurBusinessHours.aspx en un título de "Nuestras horas laborables".
Hacer que las páginas de contenido hereden la clase de página base
Ahora es necesario actualizar las páginas ASP.NET de nuestro sitio para derivar de la página base personalizada (BasePage) en lugar de la clase Page. Para ello, vaya a cada clase de código subyacente y cambie la declaración de clase de:
public partial class ClassName : System.Web.UI.Page
A:
public partial class ClassName : BasePage
Después de hacerlo, visite el sitio a través de un explorador. Si visita una página cuyo título se establece explícitamente, como Default.aspx o About.aspx, se usa el título especificado explícitamente. Sin embargo, si visita una página cuyo título no se ha cambiado del valor predeterminado ("Página sin título"), la clase de página base establece el título en el nombre de archivo de la página.
En la ilustración 5 se muestra la página MultipleContentPlaceHolders.aspx cuando se ve a través de un explorador. Tenga en cuenta que el título es precisamente el nombre de archivo de la página (menos la extensión), "MultipleContentPlaceHolders".
Ilustración 05: si no se especifica explícitamente un título, se usa automáticamente el nombre de archivo de la página (haga clic para ver la imagen a tamaño completo)
Paso 3: basar el título de la página en el mapa del sitio
ASP.NET ofrece un marco de mapa de sitio sólido que permite a los desarrolladores de páginas definir un mapa de sitio jerárquico en un recurso externo (como un archivo XML o una tabla de base de datos) junto con controles web para mostrar información sobre el mapa de sitio (como los controles SiteMapPath, Menu y TreeView).
También se puede acceder a la estructura del mapa de sitio mediante programación desde la clase de código subyacente de una página ASP.NET. De esta manera, podemos establecer automáticamente el título de una página en el título de su nodo correspondiente en el mapa del sitio. Vamos a mejorar la clase BasePage creada en el paso 2 para que ofrezca esta funcionalidad. Pero primero necesitamos crear un mapa de sitio para nuestro sitio.
Nota:
En este tutorial se asume que el lector ya está familiarizado con las características del mapa del sitio de ASP.NET. Para obtener más información sobre el uso del mapa del sitio, consulte mi serie de artículos de varias partes, Examen de la navegación del sitio de ASP.NET.
Creación del mapa del sitio
El sistema de mapa de sitio se crea sobre el modelo de proveedor, que desacopla la API de mapa de sitio de la lógica que serializa la información del mapa de sitio entre la memoria y un almacén persistente. .NET Framework se incluye con la clase XmlSiteMapProvider, que es el proveedor de mapa de sitio predeterminado. Como su nombre implica, XmlSiteMapProvider usa un archivo XML como almacén de mapas de sitio. Vamos a usar este proveedor para definir nuestro mapa de sitio.
Empiece por crear un archivo de mapa de sitio en la carpeta raíz del sitio web denominada Web.sitemap. Para ello, haga clic con el botón derecho en el nombre del sitio web en el Explorador de soluciones, elija Agregar nuevo elemento y seleccione la plantilla Mapa de sitio. Asegúrese de que el archivo se denomina Web.sitemap y haga clic en Agregar.
Ilustración 06: agregar un archivo denominado Web.sitemap a la carpeta raíz del sitio web (haga clic para ver la imagen a tamaño completo)
Agregue el siguiente código XML al archivo 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>
Este XML define la estructura jerárquica del mapa de sitio que se muestra en la ilustración 7.
Ilustración 07: el mapa del sitio se compone actualmente de tres nodos de mapa de sitio
Actualizaremos la estructura del mapa del sitio en futuros tutoriales a medida que agreguemos nuevos ejemplos.
Actualización de la página maestra para incluir controles web de navegación
Ahora que tenemos un mapa de sitio definido, vamos a actualizar la página maestra para incluir controles web de navegación. En concreto, vamos a agregar un control ListView a la columna izquierda de la sección Lecciones que representa una lista desordenada con un elemento de lista para cada nodo definido en el mapa del sitio.
Nota:
El control ListView es nuevo en ASP.NET versión 3.5. Si usa una versión anterior de ASP.NET, use el control Repeater en su lugar.
Comience quitando el marcado de lista no ordenado existente de la sección Lecciones. A continuación, arrastre un control ListView desde el Cuadro de herramientas y colóquelo debajo del encabezado Lecciones. ListView se encuentra en la sección Datos del Cuadro de herramientas, junto con los demás controles de vista: GridView, DetailsView y FormView. Establezca la propiedad ID de ListView en LessonsList.
En el Asistente para configuración del origen de datos, elija enlazar ListView a un nuevo control SiteMapDataSource denominado LessonsDataSource. El control SiteMapDataSource devuelve la estructura jerárquica del sistema de mapa de sitio.
Ilustración 08: enlazar un control SiteMapDataSource al control ListView LessonsList (haga clic para ver la imagen a tamaño completo)
Después de crear el control SiteMapDataSource, es necesario definir las plantillas de ListView para que represente una lista sin ordenar con un elemento de lista para cada nodo devuelto por el control SiteMapDataSource. Esto se puede lograr mediante el siguiente marcado de plantilla:
<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>
El LayoutTemplate genera el marcado de una lista desordenada (<ul>...</ul>) mientras que el ItemTemplate representa cada elemento devuelto por SiteMapDataSource como un elemento de lista (<li>) que contiene un vínculo a la lección concreta.
Después de configurar las plantillas de ListView, visite el sitio web. Como se muestra en la ilustración 9, la sección Lecciones contiene un solo elemento con viñetas: Inicio. ¿Dónde están las lecciones Acerca de y Uso de múltiples controles ContentPlaceHolder? SiteMapDataSource está diseñado para devolver un conjunto jerárquico de datos, pero el control ListView solo puede mostrar un único nivel de la jerarquía. Por lo tanto, solo se muestra el primer nivel de nodos de mapa de sitio devueltos por SiteMapDataSource.
Ilustración 09: la sección Lecciones contiene un solo elemento de lista (haga clic para ver la imagen a tamaño completo)
Para mostrar varios niveles, podríamos anidar varios ListViews dentro de ItemTemplate. Esta técnica se examinó en el Tutorial Páginas maestras y navegación del sitio de mi serie de tutoriales Trabajar con datos. Sin embargo, para esta serie de tutoriales, nuestro mapa de sitio contendrá solo dos niveles: Inicio (el nivel superior); y cada lección como elemento secundario de Hogar. En lugar de crear un control ListView anidado, podemos indicar a SiteMapDataSource que no devuelva el nodo inicial estableciendo su propiedad ShowStartingNode en false. El efecto neto es que SiteMapDataSource comienza devolviendo el segundo nivel de nodos de mapa de sitio.
Con este cambio, ListView muestra los elementos de viñeta para las lecciones Acerca de y Uso de varios controles ContentPlaceHolder, pero omite un elemento de viñeta para Inicio. Para solucionar esto, podemos agregar explícitamente un elemento de viñeta para Inicio en el LayoutTemplate:
<LayoutTemplate>
<ul>
<li><asp:HyperLink runat="server" ID="lnkLesson"
NavigateUrl="~/Default.aspx" Text="Home" /></li>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</ul>
</LayoutTemplate>
Al configurar SiteMapDataSource para omitir el nodo inicial y agregar explícitamente un elemento de viñeta Inicio, la sección Lecciones muestra ahora la salida prevista.
Ilustración 10: la sección lecciones contiene un elemento de viñeta para inicio y cada nodo secundario (haga clic para ver la imagen a tamaño completo)
Establecimiento del título basado en el mapa del sitio
Con el mapa de sitio implementado, podemos actualizar nuestra clase BasePage para usar el título especificado en el mapa del sitio. Como hicimos en el paso 2, solo queremos usar el título del nodo del mapa del sitio si el desarrollador de páginas no ha establecido explícitamente el título de la página. Si la página que se solicita no tiene un título de página establecido explícitamente y no se encuentra en el mapa del sitio, volveremos a usar el nombre de archivo de la página solicitada (menos la extensión), como hicimos en el paso 2. En la ilustración 11 se muestra este proceso de decisión.
Ilustración 11: en ausencia de un título de página establecido explícitamente, se usa el título del nodo de mapa de sitio correspondiente
Actualice el método OnLoadComplete de la clase BasePage para incluir el siguiente código:
protected override void OnLoadComplete(EventArgs e)
{
// Set the page's title, if necessary
if (string.IsNullOrEmpty(Page.Title) || Page.Title == "Untitled Page")
{
// Is this page defined in the site map?
string newTitle = null;
SiteMapNode current = SiteMap.CurrentNode;
if (current != null)
{
newTitle = current.Title;
}
else
{
// Determine the filename for this page
newTitle = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath);
}
Page.Title = newTitle;
}
base.OnLoadComplete(e);
}
Como antes, el método OnLoadComplete comienza al determinar si el título de la página se ha establecido explícitamente. Si Page.Title es null, una cadena vacía o se le asigna el valor "Página sin título", el código asigna automáticamente un valor a Page.Title.
Para determinar el título que se va a usar, el código comienza haciendo referencia a la SiteMappropiedad de la clase CurrentNode. CurrentNode devuelve la instancia SiteMapNode del mapa del sitio que corresponde a la página solicitada actualmente. Suponiendo que la página solicitada actualmente se encuentra en el mapa del sitio, la propiedad Title de SiteMapNode se asigna al título de la página. Si la página solicitada actualmente no está en el mapa del sitio, CurrentNode devuelve null y el nombre de archivo de la página solicitada se usa como título (como se hizo en el paso 2).
En la ilustración 12 se muestra la página MultipleContentPlaceHolders.aspx cuando se ve a través de un explorador. Dado que el título de esta página no se establece explícitamente, se usa en su lugar el título del nodo de mapa de sitio correspondiente.
Ilustración 12: el título de la página MultipleContentPlaceHolders.aspx se extrae del mapa del sitio
Paso 4: agregar otro marcado específico de página a la sección <head>
Los pasos 1, 2 y 3 examinaron la personalización del elemento <title> página por página. Además de <title>, la sección <head> puede contener elementos <meta> y elementos <link>. Como se indicó anteriormente en este tutorial, la sección <head> de Site.master incluye un elemento <link> a Styles.css. Dado que este elemento <link> se define dentro de la página maestra, se incluye en la sección <head> de todas las páginas de contenido. ¿Pero cómo vamos a agregar elementos <meta> y <link> página por página?
La manera más fácil de agregar contenido específico de página a la sección <head> es crear un control ContentPlaceHolder en la página maestra. Ya tenemos un ContentPlaceHolder de este tipo (denominado head). Por lo tanto, para agregar marcado personalizado <head>, cree un control Content correspondiente en la página y colóquelo allí.
Para ilustrar cómo agregar marcado personalizado <head> a una página, vamos a incluir un elemento de descripción <meta> en nuestro conjunto actual de páginas de contenido. El elemento de descripción <meta> proporciona una breve descripción sobre la página web; la mayoría de los motores de búsqueda incorporan esta información de algún modo al mostrar los resultados de la búsqueda.
Un elemento de descripción <meta> tiene el siguiente formato:
<meta name="description" content="description of the web page" />
Para agregar este marcado a una página de contenido, agregue el texto anterior al control Content que se asigna al encabezado de la página maestra ContentPlaceHolder. Por ejemplo, para definir un elemento de descripción <meta> para Default.aspx, agregue el siguiente marcado:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<meta name="description" content="Welcome to Scott Mitchell's Master Page Tutorials series." />
</asp:Content>
Dado que el encabezado ContentPlaceHolder no está dentro del cuerpo de la página HTML, el marcado agregado al control Content no se muestra en la vista Diseño. Para ver el elemento de descripción <meta> visite Default.aspx a través de un explorador. Una vez cargada la página, vea el origen y observe que la sección <head> incluye el marcado especificado en el control Content.
Dedique un momento a agregar elementos de descripción <meta> a About.aspx, MultipleContentPlaceHolders.aspx y Login.aspx.
Adición de marcado a la región <head> mediante programación
El encabezado ContentPlaceHolder nos permite agregar de forma declarativa marcado personalizado a la región <head> de la página maestra. El marcado personalizado también se puede agregar mediante programación. Recuerde que la propiedad Header de la clase Page devuelve la instancia HtmlHead definida en la página maestra (la <head runat="server">).
Ser capaz de agregar contenido mediante programación a la región <head> es útil cuando el contenido que se va a agregar es dinámico. Quizás se basa en el usuario que visita la página; tal vez se extraiga de una base de datos. Independientemente del motivo, puede agregar contenido a HtmlHead mediante la adición de controles a su colección de controles de la siguiente manera:
// Programmatically add a <meta> element to the Header
HtmlMeta keywords = new HtmlMeta();
keywords.Name = "keywords";
keywords.Content = "master page,asp.net,tutorial";
Page.Header.Controls.Add(keywords);
El código anterior agrega el elemento keywords <meta> a la región <head>, que proporciona una lista delimitada por comas de palabras clave que describen la página. Tenga en cuenta que para agregar una etiqueta <meta>, cree una instancia HtmlMeta, establezca sus propiedades Name y Content y, a continuación, agréguela a la colección Controls de Header. De forma similar, para agregar un elemento <link> mediante programación, crear un objeto HtmlLink, establezca sus propiedades y, a continuación, agregarlo a la colección Controls de Header.
Nota:
Para agregar marcado arbitrario, cree una instancia LiteralControl, establezca su propiedad Text y, a continuación, agréguela a la colección Controls de Header.
Resumen
En este tutorial hemos visto varias maneras de agregar marcado de región <head> página a página. Una página maestra debe incluir una instancia HtmlHead (<head runat="server">) con un ContentPlaceHolder. La instancia HtmlHead permite a las páginas de contenido acceder mediante programación a la región <head> y establecer mediante declaración y mediante programación el título de la página; el control ContentPlaceHolder permite agregar marcado personalizado a la sección <head> mediante declaración a través de un control Content.
¡Feliz programación!
Lecturas adicionales
Para obtener más información sobre los temas tratados en este tutorial, consulte los siguientes recursos:
- Establecer dinámicamente el título de la página en ASP.NET
- Examinar la navegación del sitio de ASP.NET 2.0
- Cómo usar etiquetas meta HTML
- Páginas maestras en ASP.NET
- Uso de controles ListView y DataPager de ASP.NET 3.5
Acerca del autor
Scott Mitchell, autor de varios libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, entrenador y escritor. Su último libro es Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Se puede contactar con Scott en mitchell@4GuysFromRolla.com o a través de su blog en http://ScottOnWriting.NET.
Agradecimientos especiales a
Muchos revisores han evaluado esta serie de tutoriales. Los revisores principales de este tutorial fueron Zack Jones y Suchi Banerjee. ¿Le interesa revisar mis próximos artículos de MSDN? Si es así, escríbame a mitchell@4GuysFromRolla.com.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de