Utilizando MasterPage em aplicações ASP.NET

Sem sombra de dúvida qualquer desenvolvedor deseja criar aplicações web com maior facilidade e rapidez e é isso que a MasterPage do ASP.NET promete e cumpri.

Desde quando comecei a aprender ASP.NET até hoje utilizo em minhas aplicações web essa funcionalidade. Para isso, antes de iniciar qualquer projeto, eu desenho todo o site utilizando a minha aplicação gráfica favorita para em seguida montá-lo em uma MasterPage no Visual Studio.

Pois bem, é isso que iremos ver hoje. Como utilizar a potencialidade da MasterPage em nossas aplicações web em ASP.NET.

Abra o Visual Studio e clique no menu File > New > Web site…

imagem041

Por padrão, o Visual Studio irá criar uma página Default.aspx, porem não iremos utiliza-la e podemos exclui-la.

Agora clique com o botão direito em cima do nosso projeto para adicionarmos um novo item.

imagem042

Adicionaremos então a nossa MasterPage

imagem043

Seu HTML deverá ser algo parecido com isso:


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
        <div>

        </div>
    </form>
</body>
</html>

Após a nossa MasterPage adicionada iremos criar o layout dela. Com isso também abordarei um pouco de HTML e CSS por mais que esse não seja o foco. É importante que você tenha pelo menos uma noção HTML e CSS para seguir em diante.

Se no seu caso você não tiver conhecimento ou tiver pouco conhecimento de HTML e CSS, sugiro que visite alguns sites na qual deixarei os link no final desse artigo. São excelente fontes de consulta e lá poderá encontrar diversos artigos de excelente qualidade.

Vamos ao que interessa. No HTML da MasterPage iremos adicionar algumas DIVs para definir as areas do nosso site. Iremos criar o cabeçalho, menu, corpo do site e o rodapé.

Vale lembrar que na MasterPage criada existe alguns objetos chamados ContentPlaceHolder que são é áreas atualizaveis, ou seja, quando formos criar uma nova página baseada em nossa MasterPage, essas areas serão os únicos lugares possíveis de ser editados. Com isso deveremos mante-los em nosso código ou até mesmo adicionar mais se for necessário. No nosso caso iremos manter o padrão mesmo.

Veja como ficará nosso HTML:


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
        <div id="geral">
            <div id="cabecalho">

            </div>
            <div id="menu">
                
            </div>
            <div id="conteudo">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                
                </asp:ContentPlaceHolder>
            </div>
            <div id="rodape">
                &copy; 2009 BUSINESS.COM - Todos os direito reservados.
            </div>
        </div>
    </form>
</body>
</html>

Agora iremos ao nosso CSS para definir o layout do nosso HTML. Para isso criaremos um novo arquivo. O processo é o mesmo da inclusão da nossa MasterPage. Clique com o botão direito em nosso projeto para adicionar um novo item.

imagem044

No arquivo criado, iremos adicionar o estilo abaixo.


/* CONFIGURACOES GERAL */
body
{
	font: 74.3% Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
	background-color: #eee;
}
#geral
{
	border: 1px solid #ccc;
	margin: 10px auto;
	width: 800px;
}
/* CABECALHO */
#cabecalho
{
	min-height: 100px;
	line-height: 100px;
	padding: 0 30px;
	background-color: #fff;
}
#cabecalho h1
{
	padding: 0;
	margin: 0;
}
#cabecalho h1 a
{
	color: #000;
	display: block;
	text-transform: uppercase;
	text-decoration: none;
}
/* MENU */
#menu ul
{
	padding: 0;
	margin: 0 auto;
	background-color: #ccc;
	list-style: none;
	height: 40px;
}
#menu ul li
{
	float: left;
}
#menu ul li a
{
	display: block;
	text-align: center;
	width: 200px;
	height: 40px;
	line-height: 40px;
	text-transform: capitalize;
	color: #353535;
	text-decoration: none;
}
#menu ul li a:hover
{
	background-color: #ddd;
}
/* CONTEUDO */
#conteudo
{
	min-height: 400px;
	padding: 10px;
	background-color: #fff;
}
/* RODAPE */
#rodape
{
	text-align: center;
	background-color: #ccc;
	min-height: 50px;
	line-height: 50px;
}

Agora que temos nosso CSS definido, iremos referencia-lo em nosso HTML.


<style type="text/css">
    @import url('StyleSheet.css');
</style>

E o nosso HTML ficará assim:


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>
    <style type="text/css">
        @import url('StyleSheet.css');
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="geral">
            <div id="cabecalho">
                <h1>
                    <a href="#">business.com</a>
                </h1>
            </div>
            <div id="menu">
                <ul>
                    <li>
                        <a href="#">home</a>
                    </li>
                    <li>
                        <a href="#">a empresa</a>
                    </li>
                    <li>
                        <a href="#">produtos</a>
                    </li>
                    <li>
                        <a href="#">contato</a>
                    </li>
                </ul>
            </div>
            <div id="conteudo">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                
                </asp:ContentPlaceHolder>
            </div>
            <div id="rodape">
                &copy; 2009 BUSINESS.COM - Todos os direito reservados.
            </div>
        </div>
    </form>
</body>
</html>

Já estamos com nossa MasterPage pronta para ser utilizada. Com isso iremos criar uma página do tipo WebForm clicando com o botão direito em nosso projeto e adicionar um novo item.

imagem045

Repare que na caixa de dialogo existe a opção “Select master page”. Marque-a para que possamos criar um novo WebForm baseado em nossa MasterPage.

Ira aparecer uma nova caixa de dialogo para selecionarmos a MasterPage desejada. Repare que nela visualizamos toda a estrutura do site, ou seja, se tivessemos criado um diretório especifico para nossa MasterPage, essa poderia ser visualizada. Selecione a MasterPage e em seguida clique em OK.

imagem046

Foi adicionado em nosso projeto um WebForm e repare que quase não existe código nele. Porque? Porque todo o código de layout esta definido na MasterPage. Com isso toda e qualquer mudança que ocorrer na MasterPage afetaram os WebForms.

Veja como ficou meu WebForm.


<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

Se lembra do ContentPlaceHolder criado em nossa MasterPage, pois bem, esse ASP Content que aparece se refere ao ContentPlaceHolder da nossa MasterPage.

Agora mude para modo de designer para incluirmos um conteudo qualquer em nosso WebForm.

imagem047


<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt tristique
        tristique. Aenean rhoncus arcu vel magna dignissim id tristique nunc scelerisque.
        Vestibulum sagittis arcu eget dui vulputate fringilla! Mauris sed mauris ac felis
        luctus convallis. Phasellus dolor enim, pretium ac varius eu, egestas ultrices odio.
        Fusce fermentum iaculis urna, sit amet consectetur odio rutrum ut. Aenean et mauris
        elit, dignissim dignissim sapien. Aenean scelerisque ante eu est tempor mollis.
        Maecenas id tellus nisl, fringilla venenatis nunc. Nulla feugiat, tellus eget dictum
        fermentum, libero ipsum varius magna; at ullamcorper dui enim euismod tortor.
    </p>
    <p>
        Nullam vel tortor velit. Aenean tortor urna, pretium id consequat a, lobortis ac
        orci. Proin tortor leo, dictum in vulputate sit amet, aliquam at magna? Pellentesque
        habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Sed consequat magna id sapien mollis condimentum. Duis fringilla nunc sed ligula
        tempus pharetra. Nunc eros libero, egestas vitae porta sed, dictum ut arcu? Nullam
        in felis sapien, tincidunt tempor lectus. Mauris egestas euismod massa, id consequat
        ligula accumsan vel. Vivamus quis turpis risus, vitae porta turpis. Nam porttitor
        auctor arcu, et pretium enim dapibus id. Proin posuere dolor vitae tortor gravida
        pellentesque. Vestibulum at sem lectus.
    </p>
    <p>
        Sed consequat congue tincidunt. Praesent nec enim interdum nibh posuere tempus?
        Quisque malesuada mauris eget sem tempor mollis viverra arcu viverra. Etiam massa
        odio, suscipit ut adipiscing ut, accumsan id turpis. Sed convallis scelerisque est
        vitae tempor. Integer rhoncus blandit magna non consequat. Sed nec congue ligula.
        Phasellus eleifend, nunc nec auctor luctus, orci magna bibendum leo, at sagittis
        risus orci id odio. Praesent tincidunt neque at ipsum aliquet molestie. Suspendisse
        pellentesque suscipit bibendum.
    </p>
</asp:Content>

E teremos o nosso resultado final.

imagem048

Agora basta criar mais WbForms e utilizar a MasterPage criada ou ate mesmo criar outras MasterPages.

Você poderá também criar uma MasterPage para utiliza-la em uma outra MasterPage.

Espero que tenha esclarecido bem o uso da MasterPage e qualquer dúvida estarei a disposição para ajudar.

Abraço e até a próxima.

Fonte: Download

Sites de referência em HTML e CSS