Crear diseños de página con páginas maestras de vista (VB)

Artículo
03/21/2024

En este tutorial aprenderá a crear un diseño de página común para varias páginas de la aplicación aprovechando las páginas maestras de vista. Puede usar una página maestra de vista, por ejemplo, para definir un diseño de página de dos columnas y usar el diseño de dos columnas para todas las páginas de la aplicación web.

Crear diseños de página con páginas maestras de vista

En este tutorial aprenderá a crear un diseño de página común para varias páginas de la aplicación aprovechando las páginas maestras de vista. Puede usar una página maestra de vista, por ejemplo, para definir un diseño de página de dos columnas y usar el diseño de dos columnas para todas las páginas de la aplicación web.

También puede aprovechar las páginas maestras de vista para compartir contenido común en varias páginas de la aplicación. Por ejemplo, puede colocar el logotipo del sitio web, los vínculos de navegación y los anuncios de banner en una página maestra de vista. De este modo, cada página de la aplicación mostraría este contenido automáticamente.

En este tutorial, aprenderá a crear una nueva página maestra de vista y a crear una nueva página de contenido de vista basada en la página maestra.

Creación de una página maestra

Comencemos creando una página maestra de vista que define un diseño de dos columnas. Para agregar una nueva página maestra de vista a un proyecto de MVC, haga clic con el botón derecho en la carpeta Views\Shared, seleccione la opción de menú Agregar, nuevo elemento y seleccione la plantilla Página maestra de vista de MVC (vea la figura 1).

Figura 01: Adición de una página maestra de vista (haga clic para ver la imagen a tamaño completo)

Puede crear más de una página maestra de vista en una aplicación. Cada página maestra de vista puede definir un diseño de página diferente. Por ejemplo, es posible que quiera que determinadas páginas tengan un diseño de dos columnas y otras páginas para tener un diseño de tres columnas.

Una página maestra de vista es muy similar a una vista estándar ASP.NET MVC. Sin embargo, a diferencia de una vista normal, una página maestra de vista contiene una o más etiquetas <asp:ContentPlaceHolder>. Las etiquetas <contentplaceholder> se usan para marcar las áreas de la página maestra que se pueden invalidar en una página de contenido individual.

Por ejemplo, la página maestra de vista de la lista 1 define un diseño de dos columnas. Contiene dos etiquetas <contentplaceholder>. Una <ContentPlaceHolder> para cada columna.

Lista 1: Views\Shared\Site.master

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.Master.vb" Inherits="MvcApplication1.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title></title>

     <style type="text/css">

     html
     {
           background-color:gray;

     }

     .column
     {
          float:left;
          width:300px;
          border:solid 1px black;
          margin-right:10px;
          padding:5px;
          background-color:white;
          min-height:500px;
     }

     </style>

     <asp:ContentPlaceHolder ID="head" runat="server">
     </asp:ContentPlaceHolder>

</head>
<body>

     <h1>My Website</h1>

     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
     </div>

     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
          </asp:ContentPlaceHolder>
     </div>

</body>
</html>

El cuerpo de la página maestra de vista de la lista 1 contiene dos etiquetas <div> que corresponden a las dos columnas. La clase de columna Hoja de estilos en cascada se aplica a ambas etiquetas <div>. Esta clase se define en la hoja de estilos declarada en la parte superior de la página maestra. Puede obtener una vista previa de cómo se representará la página maestra de vista cambiando a la visa de diseño. Haga clic en la pestaña Diseño de la parte inferior izquierda del editor de código fuente (vea la figura 2).

Figura 02: Vista previa de una página maestra en el diseñador (haga clic para ver la imagen en tamaño completo)

Crear una página de contenido de vista

Después de crear una página maestra de vista, puede crear una o varias páginas de contenido de vista basadas en la página maestra de vista. Por ejemplo, puede crear una página de contenido de vista de índice para el controlador Inicio haciendo clic con el botón derecho en la carpeta Views\Home, seleccionando Agregar, nuevo elemento, seleccionando la plantilla Página de contenido de vista de MVC, escribiendo el nombre Index.aspx y haciendo clic en el botón Agregar (vea la figura 3).

Figura 03: Adición de una nueva página de contenido (haga clic para ver la imagen en tamaño completo)

Después de hacer clic en el botón Agregar, aparece un cuadro de diálogo nuevo que le permite seleccionar una página maestra de vista para asociarla a la página de contenido de la vista (vea la figura 4). Puede ir a la página maestra de vista Site.master que creamos en la sección anterior.

Figura 04: Seleccione una página maestra (haga clic para ver la imagen en tamaño completo)

Después de crear una nueva página de contenido de vista basada en la página maestra Site.master, obtendrá el archivo en la lista 2.

Lista 2: Views\Home\Index.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="MvcApplication1.Index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>

Observe que esta vista contiene una etiqueta <asp:Content> que corresponde a cada una de las etiquetas <asp:ContentPlaceHolder> de la página maestra de vista. Cada etiqueta <asp:Content> incluye un atributo ContentPlaceHolderID que apunta al particular <asp:ContentPlaceHolder> que invalida.

Observe, además, que la página de vista de contenido de la lista 2 no contiene ninguna de las etiquetas HTML de apertura y cierre normales. Por ejemplo, no contiene las etiquetas de apertura y cierre <html> o <head>. Todas las etiquetas de apertura y cierre normales se encuentran en la página maestra de vista.

Cualquier contenido que quiera mostrar en una página de contenido de vista debe colocarse dentro de una etiqueta <asp:Content>. Si coloca algún código HTML u otro contenido fuera de estas etiquetas, recibirá un error al intentar ver la página.

No es necesario invalidar todas las etiquetas <asp:ContentPlaceHolder> de una página maestra en una página de vista de contenido. Solo tiene que invalidar una etiqueta <asp:ContentPlaceHolder> cuando quiera reemplazar la etiqueta por contenido determinado.

Por ejemplo, la vista Índice modificada de la lista 3 contiene solo dos etiquetas <asp:Content>. Cada una de las etiquetas <asp:Content> incluye texto.

Lista 3: Views\Home\Index.aspx (modified)

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="MvcApplication1.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     <h1>Content in first column!</h1>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

     <h1>Content in second column!</h1>

</asp:Content>

Cuando se solicita la vista de la lista 3, representa la página en la figura 5. Observe que la vista representa una página con dos columnas. Observe, además, que el contenido de la página de contenido de la vista se combina con el contenido de la página maestra de vista.

Figura 05: La página de contenido de vista de Índice (haga clic para ver la imagen a tamaño completo)

Modificar el contenido de la página maestra de vista

Un problema que se produce casi inmediatamente al trabajar con páginas maestras de vista es el problema de modificar el contenido de la página maestra de vista cuando se solicitan diferentes páginas de contenido de vista. Por ejemplo, quiere que cada página de la aplicación web tenga un título único. Sin embargo, el título se declara en la página maestra de vista y no en la página de contenido de la vista. Por lo tanto, ¿cómo se personaliza el título de la página para cada página de contenido de la vista?

Hay dos maneras de modificar el título mostrado por una página de contenido de vista. En primer lugar, puede asignar un título de página al atributo title de la directiva <%@ page %> declarada en la parte superior de una página de contenido de vista. Por ejemplo, si quiere asignar el título de página "Super Great Website" a la vista Índice, puede incluir la siguiente directiva en la parte superior de la vista Índice:

<%@ page title="Super Great Website" language="VB" masterpagefile="~/Views/Shared/Site.Master"
            autoeventwireup="true" codebehind="Index.aspx.vb" inherits="MvcApplication1.Views.Home.Index"%>

Cuando la vista Índice se representa en el explorador, el título deseado aparece en la barra de título del explorador:

Hay un requisito importante que debe cumplir una página de vista maestra para que el atributo title funcione. La página maestra de vista debe contener una etiqueta <head runat="server"> en lugar de una etiqueta normal <head> para su encabezado. Si la etiqueta <head> no incluye el atributo runat="server", el título no aparecerá. La página maestra de vista predeterminada incluye la etiqueta <head runat="server"> necesaria.

Un enfoque alternativo para modificar el contenido de la página maestra de una página de contenido de vista individual es encapsular la región que desea modificar en una etiqueta <asp:ContentPlaceHolder>. Por ejemplo, imagine que quiere cambiar no solo el título, sino también las etiquetas meta, representadas por una página de vista maestra. La página de vista maestra de la lista 4 contiene una etiqueta <asp:ContentPlaceHolder> dentro de su etiqueta <head>.

Lista 4: Views\Shared\Site2.master

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site2.Master.vb" Inherits="MvcApplication1.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

     <asp:ContentPlaceHolder ID="head" runat="server">
          <title>Please change my title</title>
          <meta name="description" content="Please provide a description" />
          <meta name="keywords" content="keyword1,keyword2" />
     </asp:ContentPlaceHolder>
</head>
<body>
     <div>

          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    
          </asp:ContentPlaceHolder>
     </div>
</body>
</html>

Observe que la etiqueta <asp:ContentPlaceHolder> de la lista 4 incluye contenido predeterminado: un título predeterminado y etiquetas meta predeterminadas. Si no invalida esta etiqueta <asp:ContentPlaceHolder> en una página de contenido de vista individual, se mostrará el contenido predeterminado.

La página de vista de contenido de la lista 5 invalida la etiqueta <asp:ContentPlaceHolder> para mostrar un título personalizado y etiquetas meta personalizadas.

Lista 5: Views\Home\Index2.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="false" CodeBehind="Index2.aspx.vb" Inherits="MvcApplication1.Index2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>The Index2 Page</title>
     <meta name="description" content="Description of Index2 page" />
     <meta name="keywords" content="asp.net,mvc,cool,groovy" />    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     Just some content in the body of the page.

</asp:Content>

Resumen

Este tutorial le proporcionó una introducción básica para ver páginas maestras y ver páginas de contenido. Ha aprendido a crear nuevas páginas maestras de vista y a crear páginas de contenido de vistas basadas en ellas. También hemos examinado cómo puede modificar el contenido de una página maestra de vista desde una página de contenido de vista determinada.

Anterior Siguiente

Crear diseños de página con páginas maestras de vista (VB)