Master Page e Asp.net 4.0

Neste post eu irei falar sobre Master Page, para que servem, como usar, etc. O exemplo que colocarei aqui estará disponível no github. Para acessá-lo, basta entrar em: https://github.com/ceb10n/exemplo-blog-master-page.

Master page nada mais é do que um recurso para que você possa reutilizar o layout do seu site em diversas páginas, tornando mais fácil a manutenção. Uma master page possui a extensão .master e é muito parecida com qualquer outra página aspx que você criaria.
Quando você faz uma requisição no servidor, ocorrem as seguintes etapas para gerar a resposta quando se utiliza master page:

1 – faz a requisição;
2 – A diretiva @Page é lida e caso possua uma referência para determinada Master Page, tanto a página solicitada quanto a master page são lidas e compiladas.
3 – É realizado um merge entre a master page e seus respectivos ContentPlaceHolder.
4 – O resultado é devolvido.

Quando criamos um projeto no Visual Studio 2010, caso você não tenha escolhido um projeto vazio, já será criado para você a página Default.aspx que terá como MasterPage o arquivo Site.master:

Master page

A master page Site.master possui o seguinte código:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="exemplo_blog_master_page.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>

Porém, não iremos utilizá-lo, pois como o intuito´é entender como funciona, nada melhor do que implementarmos a nossa própria master page. Para criar uma master page, basta clickar com o botão direito do mouse no seu projeto e ir em Add -> New Item e selecionar a opção master page. No caso, eu criei a master page com o nome exemplo.

Exemplo.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Exemplo.master.cs" Inherits="exemplo_blog_master_page.Exemplo" %>

<!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 runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Exemplo.master.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace exemplo_blog_master_page
{
    public partial class Exemplo : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

E para utilizá-la na página Default.aspx, basta alterarmos o caminho da master page, de MasterPageFile=”~/Site.master” para MasterPageFile=”~/Exemplo.master”. Se você estiver seguinte este post, note que agora ocorrerá um erro ao tentar visualizar a página. Isso ocorre porque para utilizarmos a master page e colocarmos conteúdo precisamos dizer em qual ContentPlaceHolder da master page estamos incluindo o conteúdo. No caso, como criamos uma master page nova e ainda não alteramos nada, existe apenas um ContentPlaceHolder em nossa master page, com a ID ContentPlaceHolder1. Porém a página Default.aspx ainda está referenciando os ContentPlaceHolder de Site.master. Vamos então alterar nossa página para que possa utilizar nossa master page corretamente.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Exemplo.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="exemplo_blog_master_page._Default" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</asp:Content>

Agora que temos nossa MasterPage, podemos colocar nela tudo que será utilizado pelas demais páginas, deixando apenas a obrigação de colocar o conteúdo nelas. Vamos começar referenciando o css em nossa masterpage.

<head runat="server">
    <title>Exemplo do blog</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Bom, isso é tudo que precisamos fazer caso queiramos criar uma nova master page.
Para acessar as propriedades, métodos e controles da master page diretamente de nossa Content Page, basta criarmos um acesso público para ele:

Exemplo.master

<asp:Label ID="labelParaAlteracao" runat="server" />
        public Label TextoParaAlterar
        {
            get { return labelParaAlteracao; }           
        }

Default.aspx

<asp:Button ID="alterarMasterPage" Text="Alterar master page" runat="server" OnClick="alterarMasterPage_Click" />
        protected void alterarMasterPage_Click(object sender, EventArgs e)
        {
            Master.TextoParaAlterar.Text = "texto alterado";
        }

No próximo post eu falarei sobre Nested Master Pages.
Abraço!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s