Vários ContentPlaceHolders e conteúdo padrão (VB)
por Scott Mitchell
Examina como adicionar vários espaços reservados de conteúdo a uma página master, bem como especificar o conteúdo padrão nos espaços reservados de conteúdo.
Introdução
No tutorial anterior, examinamos como as páginas de master permitem que ASP.NET desenvolvedores criem um layout consistente em todo o site. As páginas mestras definem ambas as marcações comuns a todas as suas páginas de conteúdo e regiões personalizáveis em uma base página por página. No tutorial anterior, criamos uma página de master simples (Site.master) e duas páginas de conteúdo (Default.aspx e About.aspx). Nossa página master consistia em dois ContentPlaceHolders chamados head e MainContent, que estavam localizados no elemento e no <head> Web Form, respectivamente. Embora as páginas de conteúdo tivessem dois controles de conteúdo, especificamos apenas a marcação para aquela correspondente a MainContent.
Conforme evidenciado pelos dois controles ContentPlaceHolder no Site.master, uma página master pode conter vários ContentPlaceHolders. Além disso, a página master pode especificar a marcação padrão para os controles ContentPlaceHolder. Uma página de conteúdo, então, pode, opcionalmente, especificar sua própria marcação ou usar a marcação padrão. Neste tutorial, analisamos o uso de vários controles de conteúdo na página master e vemos como definir a marcação padrão nos controles ContentPlaceHolder.
Etapa 1: Adicionar controles ContentPlaceHolder adicionais à página mestra
Muitos designs de site contêm várias áreas na tela que são personalizadas página a página. Site.master, a página master que criamos no tutorial anterior, contém um único ContentPlaceHolder no Formulário da Web chamado MainContent. Especificamente, este ContentPlaceHolder está localizado dentro do mainContent<div> elemento .
A Figura 1 mostra Default.aspx quando exibida por meio de um navegador. A região circulada em vermelho é a marcação específica da página correspondente a MainContent.
Figura 01: a região circulada mostra a área atualmente personalizável em uma base página por página (clique para exibir a imagem em tamanho real)
Imagine que, além da região mostrada na Figura 1, também precisamos adicionar itens específicos de página à coluna esquerda abaixo das seções Lições e Notícias. Para fazer isso, adicionamos outro controle ContentPlaceHolder à página master. Para acompanhar, abra a Site.master página master no Visual Web Developer e arraste um controle ContentPlaceHolder da Caixa de Ferramentas para o designer após a seção Notícias. Defina ContentPlaceHolder como IDLeftColumnContent.
Figura 02: Adicionar um controle ContentPlaceHolder à coluna esquerda da página mestra (clique para exibir a imagem em tamanho real)
Com a adição do LeftColumnContent ContentPlaceHolder à página master, podemos definir o conteúdo para essa região em uma base página por página, incluindo um controle Content na página cujo ContentPlaceHolderID está definido LeftColumnContentcomo . Examinamos esse processo na Etapa 2.
Etapa 2: Definindo o conteúdo para o novo ContentPlaceHolder nas páginas de conteúdo
Ao adicionar uma nova página de conteúdo ao site, o Desenvolvedor da Web visual cria automaticamente um controle Conteúdo na página para cada ContentPlaceHolder na página master selecionada. Depois de adicionar um LeftColumnContent ContentPlaceHolder à nossa página master na Etapa 1, novas páginas de ASP.NET agora terão três controles de Conteúdo.
Para ilustrar isso, adicione uma nova página de conteúdo ao diretório raiz chamado MultipleContentPlaceHolders.aspx associado à Site.master página master. O Visual Web Developer cria esta página com a seguinte marcação declarativa:
<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="MultipleContentPlaceHolders.aspx.vb" Inherits="MultipleContentPlaceHolders" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
</asp:Content>
Insira algum conteúdo no controle Conteúdo que faz referência a MainContent ContentPlaceHolders (Content2). Em seguida, adicione a seguinte marcação ao Content3 controle Content (que faz referência ao LeftColumnContent ContentPlaceHolder):
<h3>Page-Specific Content</h3>
<ul>
<li>This content is defined in the content page.</li>
<li>The master page has two regions in the Web Form that are editable on a
page-by-page basis.</li>
</ul>
Depois de adicionar essa marcação, visite a página por meio de um navegador. Como mostra a Figura 3, a marcação colocada no Content3 controle Conteúdo é exibida na coluna esquerda abaixo da seção Notícias (circulada em vermelho). A marcação colocada em Content2 é exibida na parte direita da página (circulada em azul).
Figura 03: A coluna à esquerda agora inclui Page-Specific conteúdo abaixo da seção Notícias (clique para exibir a imagem em tamanho real)
Definindo conteúdo em páginas de conteúdo existentes
A criação de uma nova página de conteúdo incorpora automaticamente o controle ContentPlaceHolder que adicionamos na Etapa 1. Mas nossas duas páginas de conteúdo existentes - About.aspx e Default.aspx - não têm um controle De conteúdo para o LeftColumnContent ContentPlaceHolder. Para especificar o conteúdo para este ContentPlaceHolder nessas duas páginas existentes, precisamos adicionar um controle De conteúdo nós mesmos.
Ao contrário da maioria dos controles da Web ASP.NET, a Caixa de Ferramentas do Desenvolvedor da Web visual não inclui um item de controle de conteúdo. Podemos digitar manualmente a marcação declarativa do controle de conteúdo no modo de exibição Origem, mas uma abordagem mais fácil e rápida é usar o modo design. Abra a About.aspx página e alterne para o modo design. Como ilustra a Figura 4, o LeftColumnContent ContentPlaceHolder aparece no modo design; se você passar o mouse sobre ele, o título exibido diz: "LeftColumnContent (Mestre)." A inclusão de "Mestre" no título indica que não há controle de conteúdo definido na página para este ContentPlaceHolder. Se houver um controle content para o ContentPlaceHolder, como no caso de MainContent, o título será lido: "ContentPlaceHolderID (Personalizado)."
Para adicionar um controle Content para ContentPlaceHolder LeftColumnContent a About.aspx, expanda a marca inteligente contentPlaceHolder e clique no link Criar Conteúdo Personalizado.
Figura 04: o modo de exibição de design para About.aspx mostra o LeftColumnContent ContentPlaceHolder (clique para exibir a imagem em tamanho real)
Clicar no link Criar Conteúdo Personalizado gera o controle de Conteúdo necessário na página e define sua ContentPlaceHolderID propriedade como o contentPlaceHolder.ID Por exemplo, clicar no link Criar Conteúdo Personalizado para LeftColumnContent região no About.aspx adiciona a seguinte marcação declarativa à página:
<asp:Content ID="Content3" runat="server"
contentplaceholderid="LeftColumnContent">
</asp:Content>
Omitindo controles de conteúdo
ASP.NET não exige que todas as páginas de conteúdo incluam controles de conteúdo para cada ContentPlaceHolder definido na página master. Se um controle Content for omitido, o mecanismo de ASP.NET usará a marcação definida no ContentPlaceHolder na página master. Essa marcação é conhecida como o conteúdo padrão do ContentPlaceHolder e é útil em cenários em que o conteúdo de alguma região é comum entre a maioria das páginas, mas precisa ser personalizado para um pequeno número de páginas. A etapa 3 explora a especificação de conteúdo padrão na página master.
Atualmente, Default.aspx contém dois controles content para o head e MainContent ContentPlaceHolders; ele não tem um controle content para LeftColumnContent. Consequentemente, quando Default.aspx é renderizado, o LeftColumnContent conteúdo padrão do ContentPlaceHolder é usado. Como ainda não definimos nenhum conteúdo padrão para este ContentPlaceHolder, o efeito líquido é que nenhuma marcação é emitida para essa região. Para verificar esse comportamento, visite Default.aspx por meio de um navegador. Como mostra a Figura 5, nenhuma marcação é emitida na coluna esquerda abaixo da seção Notícias.
Figura 05: Nenhum conteúdo é renderizado para o LeftColumnContent ContentPlaceHolder (clique para exibir a imagem em tamanho real)
Etapa 3: Especificando o conteúdo padrão na página mestra
Alguns designs de site incluem uma região cujo conteúdo é o mesmo para todas as páginas no site, exceto para uma ou duas exceções. Considere um site que dá suporte a contas de usuário. Esse site requer uma página de logon em que os visitantes podem inserir suas credenciais para entrar no site. Para agilizar o processo de entrada, os designers do site podem incluir caixas de texto de nome de usuário e senha no canto superior esquerdo de cada página para permitir que os usuários entrem sem precisar visitar explicitamente a página de logon. Embora essas caixas de texto de nome de usuário e senha sejam úteis na maioria das páginas, elas são redundantes na página de logon, que já contém caixas de texto para as credenciais do usuário.
Para implementar esse design, você pode criar um controle ContentPlaceHolder no canto superior esquerdo da página master. Cada página que precisasse exibir as caixas de texto de nome de usuário e senha no canto superior esquerdo criaria um controle de Conteúdo para este ContentPlaceHolder e adicionaria a interface necessária. A página de logon, por outro lado, omitiria a adição de um controle de Conteúdo para este ContentPlaceHolder ou criaria um controle De conteúdo sem marcação definida. A desvantagem dessa abordagem é que precisamos lembrar de adicionar as caixas de texto nome de usuário e senha a cada página que adicionamos ao site (exceto para a página de logon). Isso está pedindo problemas. É provável que esqueçamos de adicionar essas caixas de texto a uma página ou duas ou, pior, talvez não implementemos a interface corretamente (talvez adicionando apenas uma caixa de texto em vez de duas).
Uma solução melhor é definir as caixas de texto de nome de usuário e senha como o conteúdo padrão do ContentPlaceHolder. Ao fazer isso, só precisamos substituir esse conteúdo padrão nessas poucas páginas que não exibem as caixas de texto nome de usuário e senha (a página de logon, por exemplo). Para ilustrar a especificação de conteúdo padrão para um controle ContentPlaceHolder, vamos implementar o cenário discutido.
Observação
O restante deste tutorial atualiza nosso site para incluir uma interface de logon na coluna à esquerda para todas as páginas, exceto a página de logon. No entanto, este tutorial não examina como configurar o site para dar suporte a contas de usuário. Para obter mais informações sobre este tópico, consulte meus tutoriais de Autenticação de Formulários, Autorização, Contas de Usuário e Funções .
Adicionando um ContentPlaceHolder e especificando seu conteúdo padrão
Abra a Site.master página master e adicione a seguinte marcação à coluna à esquerda entre a DateDisplay seção Rótulo e Lições:
<asp:ContentPlaceHolder ID="QuickLoginUI" runat="server">
<asp:Login ID="QuickLogin" runat="server"
TitleText="<h3>Sign In</h3>"
FailureAction="RedirectToLoginPage">
</asp:Login>
</asp:ContentPlaceHolder>
Depois de adicionar essa marcação, o modo design da página master deverá ser semelhante à Figura 6.
Figura 06: a página mestra inclui um controle de logon (clique para exibir a imagem em tamanho real)
Este ContentPlaceHolder, QuickLoginUI, tem um controle da Web de logon como seu conteúdo padrão. O controle Logon exibe uma interface do usuário que solicita ao usuário seu nome de usuário e senha, juntamente com um botão Fazer Logon. Ao clicar no botão Fazer Logon, o controle Logon valida internamente as credenciais do usuário em relação à API de Associação. Para usar esse controle de Logon na prática, você precisa configurar seu site para usar Associação. Este tópico está além do escopo deste tutorial; consulte meus tutoriais de Autenticação de Formulários, Autorização, Contas de Usuário e Funções para obter mais informações sobre como criar um aplicativo Web que dê suporte a contas de usuário.
Fique à vontade para personalizar o comportamento ou a aparência do controle de logon. Definai duas de suas propriedades: TitleText e FailureAction. O TitleText valor da propriedade, que usa como padrão "Logon", é exibido na parte superior da interface do usuário do controle. Definai essa propriedade para que ela exiba o texto "Entrar" como um <h3> elemento. A FailureAction propriedade indica o que fazer se as credenciais do usuário forem inválidas. Ele usa como padrão um valor de Refresh, que deixa o usuário na mesma página e exibe uma mensagem de falha dentro do controle logon. Alterei para RedirectToLoginPage, que envia o usuário para a página de logon no caso de credenciais inválidas. Prefiro enviar o usuário para a página de logon quando um usuário tenta fazer logon de alguma outra página, mas falha, pois a página de logon pode conter instruções e opções adicionais que não se ajustariam facilmente à coluna à esquerda. Por exemplo, a página de logon pode incluir opções para recuperar uma senha esquecida ou criar uma nova conta.
Criando a página de logon e substituindo o conteúdo padrão
Com a página master concluída, nossa próxima etapa é criar a página de logon. Adicione uma página ASP.NET ao diretório raiz do site chamada Login.aspx, associando-a à Site.master página master. Isso criará uma página com quatro controles de conteúdo, um para cada um dos ContentPlaceHolders definidos em Site.master.
Adicione um controle De logon ao MainContent controle Conteúdo. Da mesma forma, fique à vontade para adicionar qualquer conteúdo à LeftColumnContent região. No entanto, deixe o controle Conteúdo do QuickLoginUI ContentPlaceHolder vazio. Isso garantirá que o controle logon não apareça na coluna esquerda da página de logon.
Depois de definir o conteúdo para as MainContent regiões e LeftColumnContent , a marcação declarativa da página de logon deve ser semelhante à seguinte:
<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h2>
Sign In</h2>
<p>
<asp:Login ID="Login1" runat="server" TitleText="">
</asp:Login>
</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
<h3>Sign In Tasks</h3>
<ul>
<li>Create a New Account</li>
<li>Recover Forgotten Password</li>
</ul>
<p>TODO: Turn the above text into links...</p>
</asp:Content>
A Figura 7 mostra essa página quando exibida por meio de um navegador. Como essa página especifica um controle Content para ContentPlaceHolderQuickLoginUI, ela substitui o conteúdo padrão especificado na página master. O efeito líquido é que o controle Logon exibido na exibição Design da página master (consulte a Figura 6) não é renderizado nesta página.
Figura 07: a página de logon reprime o QuickLoginUI conteúdo padrão do ContentPlaceHolder (clique para exibir a imagem em tamanho real)
Usando o conteúdo padrão em novas páginas
Queremos mostrar o controle Logon na coluna esquerda para todas as páginas, exceto a página Logon. Para fazer isso, todas as páginas de conteúdo, exceto a página de logon, devem omitir um controle Content para o QuickLoginUI ContentPlaceHolder. Ao omitir um controle Content, o conteúdo padrão do ContentPlaceHolder será usado.
Nossas páginas de conteúdo existentes – Default.aspx, About.aspxe MultipleContentPlaceHolders.aspx – não incluem um controle conteúdo para QuickLoginUI porque foram criadas antes de adicionarmos esse controle ContentPlaceHolder à página master. Portanto, essas páginas existentes não precisam ser atualizadas. No entanto, novas páginas adicionadas ao site incluem um controle Content para o QuickLoginUI ContentPlaceHolder, por padrão. Portanto, precisamos lembrar de remover esses controles de conteúdo sempre que adicionarmos uma nova página de conteúdo (a menos que queiramos substituir o conteúdo padrão do ContentPlaceHolder, como no caso da página de logon).
Para remover o controle Conteúdo, você pode excluir manualmente sua marcação declarativa do modo de exibição De origem ou, no modo de exibição Design, escolher o link Padrão para Conteúdo do Mestre de sua marca inteligente. Qualquer abordagem remove o controle Conteúdo da página e produz o mesmo efeito líquido.
A Figura 8 mostra Default.aspx quando exibida por meio de um navegador. Lembre-se de que Default.aspx tem apenas dois controles content especificados em sua marcação declarativa - um para head e outro para MainContent. Como resultado, o conteúdo padrão para o e QuickLoginUI ContentPlaceHolders LeftColumnContent são exibidos.
Figura 08: o conteúdo padrão para o e QuickLoginUI ContentPlaceHolders LeftColumnContent são exibidos (clique para exibir a imagem em tamanho real)
Resumo
O modelo de página ASP.NET master permite um número arbitrário de ContentPlaceHolders na página master. Além disso, ContentPlaceHolders inclui conteúdo padrão, que é emitido no caso de não haver nenhum controle de Conteúdo correspondente na página de conteúdo. Neste tutorial, vimos como incluir controles ContentPlaceHolder adicionais na página master e como definir controles de conteúdo para esses novos ContentPlaceHolders em páginas ASP.NET novas e existentes. Também examinamos a especificação de conteúdo padrão em um ContentPlaceHolder, o que é útil em cenários em que apenas uma minoria de páginas precisa personalizar o conteúdo padronizado de outra forma em uma determinada região.
No próximo tutorial, examinaremos o head ContentPlaceHolder mais detalhadamente, vendo como definir declarativamente e programaticamente o título, as metamaras e outros cabeçalhos HTML em uma base página por página.
Programação feliz!
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. O revisor principal deste tutorial foi Suchi Banerjee. Interessado em revisar meus próximos artigos do MSDN? Nesse caso, deixe-me uma linha em mitchell@4GuysFromRolla.com.
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de