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

por Microsoft

Descargar PDF

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.

Creación de diseños de página con ver páginas maestras

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 de su sitio web, enlaces de navegación y 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 de vista

Comencemos creando una página maestra de vista que defina un diseño de dos columnas. Para agregar una nueva página maestra de vista a un proyecto MVC, haga clic con el botón secundario en la carpeta Vistas, Seleccione la opción de menú Agregar, Nuevo elementoy seleccione la plantilla Página maestra de vista MVC (consulte la figura 1).

Adición de una página maestra de vista

Figura 01: Adición de una página maestra de vista(Haga clic para ver la imagen de 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 desee 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 se parece mucho a una vista ESTÁNDAR ASP.NET MVC. Sin embargo, a diferencia de una vista <asp:ContentPlaceHolder> normal, una página maestra de vista contiene una o más etiquetas. Las <contentplaceholder> etiquetas se utilizan 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 del listado 1 define un diseño de dos columnas. Contiene dos <contentplaceholder> etiquetas. Uno <ContentPlaceHolder> para cada columna.

Listado 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 <div> de vista en el listado 1 contiene dos etiquetas que corresponden a las dos columnas. La clase de columna Hoja de <div> estilos en cascada se aplica a ambas etiquetas. 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 renderizará la página maestra de vista cambiando a la vista Diseño. Haga clic en la pestaña Diseño en la parte inferior izquierda del editor de código fuente (consulte la figura 2).

Vista previa de una página maestra en el diseñador

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

Creación de 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 de inicio haciendo clic con el botón secundario en la carpeta Vistas, Inicio, seleccionando Agregar, Nuevo elemento, seleccionando la plantilla Página de contenido de vista MVC, escribiendo el nombre Index.aspx y haciendo clic en el botón Agregar (consulte la figura 3).

Adición de una página de contenido de vista

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

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

Selección de una página maestra

Figura 04: Selección de una página maestra(Haga clic para ver la imagen de 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 el listado 2.

Listado 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 <asp:Content> vista contiene una etiqueta <asp:ContentPlaceHolder> que corresponde a cada una de las etiquetas de la página maestra de la vista. Cada <asp:Content> etiqueta incluye un atributo ContentPlaceHolderID <asp:ContentPlaceHolder> que apunta a la particular que reemplaza.

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

Cualquier contenido que desee mostrar en una página <asp:Content> de contenido de vista debe colocarse dentro de una etiqueta. Si coloca cualquier contenido HTML u otro contenido fuera de estas etiquetas, obtendrá un error cuando intente ver la página.

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

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

Listado 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 en el listado 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 vista se combina con el contenido de la página maestra de vista.

La página de contenido de la vista de índice

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

Modificación del contenido de la página maestra de view

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, desea 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. Entonces, ¿cómo personaliza el título de la página para cada página de contenido de vista?

Hay dos maneras de modificar el título que muestra una página de contenido de vista. En primer lugar, puede asignar un título <%@ page %> de página al atributo title de la directiva declarada en la parte superior de una página de contenido de vista. Por ejemplo, si desea asignar el título de página "Super Great Website" a la vista de índice, puede incluir la siguiente directiva en la parte superior de la vista de í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 de índice se representa en el explorador, el título deseado aparece en la barra de título del navegador:

Barra de título del navegador

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

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

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

Tenga en <asp:ContentPlaceHolder> cuenta que la etiqueta del listado 4 incluye contenido predeterminado: un título predeterminado y metaetiquetas predeterminadas. Si no invalida <asp:ContentPlaceHolder> esta etiqueta en una página de contenido de vista individual, se mostrará el contenido predeterminado.

La página de vista de <asp:ContentPlaceHolder> contenido en el listado 5 reemplaza la etiqueta para mostrar un título personalizado y metaetiquetas personalizadas.

Listado 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 páginas de contenido. Ha aprendido a crear nuevas páginas maestras de vista y a crear páginas de contenido de vista basadas en ellas. También examinamos cómo puede modificar el contenido de una página maestra de vista desde una página de contenido de vista determinada.