Criar layouts de página com Exibir páginas mestras (C#)
pela Microsoft
Neste tutorial, você aprenderá a criar um layout de página comum para várias páginas em seu aplicativo aproveitando o modo de exibição master páginas. Você pode usar um modo de exibição master página, por exemplo, para definir um layout de página de duas colunas e usar o layout de duas colunas para todas as páginas em seu aplicativo Web.
Criando layouts de página com exibir páginas mestras
Neste tutorial, você aprenderá a criar um layout de página comum para várias páginas em seu aplicativo aproveitando o modo de exibição master páginas. Você pode usar um modo de exibição master página, por exemplo, para definir um layout de página de duas colunas e usar o layout de duas colunas para todas as páginas em seu aplicativo Web.
Você também pode aproveitar o modo de exibição master páginas para compartilhar conteúdo comum em várias páginas em seu aplicativo. Por exemplo, você pode colocar o logotipo do site, links de navegação e anúncios de faixa em uma exibição master página. Dessa forma, cada página em seu aplicativo exibiria esse conteúdo automaticamente.
Neste tutorial, você aprenderá a criar um novo modo de exibição master página e criar uma nova página de conteúdo de exibição com base na página master.
Criando uma página mestra de exibição
Vamos começar criando um modo de exibição master página que define um layout de duas colunas. Adicione um novo modo de exibição master página a um projeto MVC clicando com o botão direito do mouse na pasta Views\Shared, selecionando a opção de menu Adicionar, Novo Item e selecionando o modelo Página Mestra de Exibição do MVC (consulte a Figura 1).
Figura 01: Adicionando um modo de exibição master página (clique para exibir a imagem em tamanho real)
Você pode criar mais de uma exibição master página em um aplicativo. Cada exibição master página pode definir um layout de página diferente. Por exemplo, talvez você queira que determinadas páginas tenham um layout de duas colunas e outras páginas tenham um layout de três colunas.
Um modo de exibição master página se parece muito com um modo de exibição MVC ASP.NET padrão. No entanto, ao contrário de uma exibição normal, uma exibição master página contém uma ou mais <asp:ContentPlaceHolder> marcas. As <contentplaceholder> marcas são usadas para marcar as áreas da página master que podem ser substituídas em uma página de conteúdo individual.
Por exemplo, o modo de exibição master página na Listagem 1 define um layout de duas colunas. Ele contém duas <contentplaceholder> marcas. Um <ContentPlaceHolder> para cada coluna.
Listagem 1 – Views\Shared\Site.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="MvcApplication1.Views.Shared.Main" %>
<!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>
O corpo do modo de exibição master página na Listagem 1 contém duas <div> marcas que correspondem às duas colunas. A classe de coluna Folha de Estilos em Cascata é aplicada a ambas as <div> marcas. Essa classe é definida na folha de estilos declarada na parte superior da página master. Você pode visualizar como a exibição master página será renderizada alternando para o modo design. Clique na guia Design na parte inferior esquerda do editor de código-fonte (consulte a Figura 2).
Figura 02: Visualizando uma página de master no designer (clique para exibir a imagem em tamanho real)
Criando uma página de conteúdo de exibição
Depois de criar um modo de exibição master página, você pode criar uma ou mais páginas de conteúdo de exibição com base no modo de exibição master página. Por exemplo, você pode criar uma página de conteúdo de exibição de índice para o controlador Página Inicial clicando com o botão direito do mouse na pasta Views\Home, selecionando Adicionar, Novo Item, selecionando o modelo Página de Conteúdo de Exibição do MVC , inserindo o nome Index.aspx e clicando no botão Adicionar (consulte a Figura 3).
Figura 03: Adicionar uma página de conteúdo de exibição (clique para exibir a imagem em tamanho real)
Depois de clicar no botão Adicionar, será exibida uma nova caixa de diálogo que permite selecionar um modo de exibição master página para associar à página de conteúdo de exibição (consulte a Figura 4). Você pode navegar até o Site. master exibir master página que criamos na seção anterior.
Figura 04: Selecionando uma página de master (clique para exibir a imagem em tamanho real)
Depois de criar uma nova página de conteúdo de exibição com base no Site. master master página, você obtém o arquivo na Listagem 2.
Listagem 2 – Views\Home\Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.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 essa exibição contém uma <asp:Content> marca que corresponde a cada uma das <asp:ContentPlaceHolder> marcas na exibição master página. Cada <asp:Content> marca inclui um atributo ContentPlaceHolderID que aponta para o específico <asp:ContentPlaceHolder> que ele substitui.
Observe, além disso, que a página de exibição de conteúdo na Listagem 2 não contém nenhuma das marcas HTML normais de abertura e fechamento. Por exemplo, ele não contém as marcas de abertura e fechamento <html> ou <head> . Todas as marcas normais de abertura e fechamento estão contidas no modo de exibição master página.
Qualquer conteúdo que você deseja exibir em uma página de conteúdo de exibição deve ser colocado dentro de uma <asp:Content> marca. Se você colocar qualquer HTML ou outro conteúdo fora dessas marcas, receberá um erro ao tentar exibir a página.
Você não precisa substituir todas as <asp:ContentPlaceHolder> marcas de uma página master em uma página de exibição de conteúdo. Você só precisa substituir uma <asp:ContentPlaceHolder> marca quando quiser substituir a marca por um conteúdo específico.
Por exemplo, a exibição índice modificada na Listagem 3 contém apenas duas <asp:Content> marcas. Cada uma das <asp:Content> marcas inclui algum texto.
Listagem 3 – Views\Home\Index.aspx (modified)
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.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>
Quando o modo de exibição na Listagem 3 é solicitado, ele renderiza a página na Figura 5. Observe que o modo de exibição renderiza uma página com duas colunas. Observe, além disso, que o conteúdo da página de conteúdo de exibição é mesclado com o conteúdo da página master de exibição
Figura 05: a página Conteúdo da exibição de índice (clique para exibir a imagem em tamanho real)
Modificando o conteúdo da página mestra de exibição
Um problema que você encontra quase imediatamente ao trabalhar com o modo de exibição master páginas é o problema de modificar o modo de exibição master conteúdo da página quando diferentes páginas de conteúdo de exibição são solicitadas. Por exemplo, você deseja que cada página em seu aplicativo Web tenha um título exclusivo. No entanto, o título é declarado no modo de exibição master página e não na página de conteúdo de exibição. Então, como você personaliza o título da página para cada página de conteúdo de exibição?
Há duas maneiras de modificar o título exibido por uma página de conteúdo de exibição. Primeiro, você pode atribuir um título de página ao atributo de título da <%@ page %> diretiva declarada na parte superior de uma página de conteúdo de exibição. Por exemplo, se você quiser atribuir o título da página "Site Super Ótimo" à exibição Índice, poderá incluir a seguinte diretiva na parte superior da exibição Índice:
<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>
Quando a exibição Índice é renderizada no navegador, o título desejado aparece na barra de título do navegador:
Há um requisito importante que uma página de exibição master deve atender para que o atributo de título funcione. O modo de exibição master página deve conter uma <head runat="server"> marca em vez de uma marca normal <head> para seu cabeçalho. Se a <head> marca não incluir o atributo runat="server", o título não será exibido. O modo de exibição padrão master página inclui a marca necessária<head runat="server">.
Uma abordagem alternativa para modificar master conteúdo da página de uma página de conteúdo de exibição individual é encapsular a região que você deseja modificar em uma <asp:ContentPlaceHolder> marca. Por exemplo, imagine que você deseja alterar não apenas o título, mas também as marcas meta, renderizadas por uma página de exibição master. A página de exibição master na Listagem 4 contém uma <asp:ContentPlaceHolder> marca dentro de sua <head> marca.
Listagem 4 – Views\Shared\Site2.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.Master.cs" Inherits="MvcApplication1.Views.Shared.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 a <asp:ContentPlaceHolder> marca na Listagem 4 inclui conteúdo padrão: um título padrão e marcas meta padrão. Se você não substituir essa <asp:ContentPlaceHolder> marca em uma página de conteúdo de exibição individual, o conteúdo padrão será exibido.
A página de exibição de conteúdo na Listagem 5 substitui a <asp:ContentPlaceHolder> marca para exibir um título personalizado e marcas meta personalizadas.
Listagem 5 – Views\Home\Index2.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.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>
Resumo
Este tutorial forneceu uma introdução básica para exibir master páginas e exibir páginas de conteúdo. Você aprendeu a criar uma nova exibição master páginas e criar páginas de conteúdo de exibição com base nelas. Também examinamos como você pode modificar o conteúdo de um modo de exibição master página de uma página de conteúdo de exibição específica.