Publicado em 5 de mai.

ASPX, Masterpage

Bom, tenho alguns sistemas já feito em PHP e HTML5 com MySQL.

E estou migrando todo os sistemas, inicialmente o meu sistema de compras e comercio e outras funções dele para ASPX/HTML5, e estou tendo dificuldades com a master page.

Importei toda minha aplicação em html5 para um arquivo aspx.

Desenvolvi a master page apartir do INDEX.html, refatorei todos os campos e texto para label e button.

Agora á duvida e talvez a parte mais facil é....

Quero tirar o menu+head, o contexto e o footer, e separar em pequenas ASPX e/ou extensão masterpage, depois ir chamando-os separadamente uma uma extensão do timpo (Template.masterpage), onde atraves dela poderei montar minha index(home),cadastro,contato e etc...

exemplo de uma master page:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta charset="ISO 8859-1" lang="pt-br" />
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />

 <title>Titulo.</title>

	<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<link href='[http://fonts.googleapis.com/css?family=Coda'](http://fonts.googleapis.com/css?family=Coda) rel='stylesheet' type='text/css' />
	<link href='[http://fonts.googleapis.com/css?family=Jura:400,500,600,300'](http://fonts.googleapis.com/css?family=Jura:400,500,600,300) rel='stylesheet' type='text/css' />

	<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
	<script src="js/jquery.touchwipe.1.1.1.js" type="text/javascript"></script>
	<script src="js/jquery.carouFredSel-5.5.0-packed.js" type="text/javascript"></script>
	<script src="js/modernizr.custom.js"></script>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<script src="js/functions.js" type="text/javascript"></script>

 <!-- ======================= JQuery libs =========================== -->

 <!--Nav-->
 <script type="text/javascript" src="js/nav/tinynav.js"></script>
 <script src="js/nav/jquery.sticky.js" type="text/javascript"></script>
 <!--Totop-->
 <script type="text/javascript" src="js/totop/jquery.ui.totop.js" ></script>
 <!--fUNCTIONS-->
 <script type="text/javascript" src="js/jquery-func.js"></script>

 <!-- ======================= End JQuery libs =========================== -->

</head>
<body>

 <!-- Login Cliente -->
 <div class="jBar">
 <div class="container">
 <div class="row-fluid">
 <div class="offset2 span4">
 <h1>Client Login</h1>
 <form>
 <input type="email" placeholder="Your Email" required>
 <input type="password" placeholder="Your Password" required>
 <input type="submit" class="botton" value="sign in">
 </form>
 </div>

 <div class="span4 contact_info">
 <h1>Contact Us</h1>
 <ul>
 <li><span>Call Now:</span>55-5698-4589</li>
 <li><span>Email Adress: </span>info@domain.com</li>
 <li><span>Address Info:</span> Av new stret - New York</li>
 </ul>
 </div>
 <p class="jTrigger downarrow">Fechar</p>
 </div>
 </div>
 </div>
 <span class="jRibbon jTrigger up">Área Restrita</span>
 <div class="line"></div>
 <!-- End Login Cliente -->

 <div>
 <!-- Web Site -->
 <div class="wrapper">

 <!-- Header -->
 <header class="header">

 <div class="shell">

 <!-- Menu -->
 <div class="header-top">
 <h1 id="logo"><a href="#">Sandmann/a></h1>
 <nav id="navigation">
 <a href="#" class="nav-btn">Home<span></span></a>
 <ul>
 <li class="active home"><a href="#">Home</a></li>
 <li><a href="#">Serviços</a></li>
 <li><a href="#">Projetos</a></li>
 <li><a href="#">Soluções</a></li>
 <li><a href="#">Contato</a></li>
 </ul>
 </nav>
 <div class="cl"> </div>
 </div>
 <!-------->

 <!-- Slide -->
 <div class="slider">

 <div id="bg"></div>

 <div id="carousel">

 <!-- Item do slide 1 -->
 <div>
 <h5>Tudo começa com uma</h5>
 <h3>Grande Visão</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue quis quam dignissim consectetur ac sit amet nisl. In hac habitasse platea. Eget augue quis quam dignissi lorem lipsum adispicing dolor sit amet.</p>
 <a href="#" class="green-btn">Demonstração</a>
 <img class="img-front" src="css/images/front-img.png" alt="dot1" width="263" height="436" />
 <img class="img-mid" src="css/images/img-mid.png" alt="dot2" width="230" height="363" />
 <img class="img-back" src="css/images/img-back.png" alt="dot3" width="195" height="304" />
 </div>
 <!--------->

 <!-- Item do slide 2 -->
 <div>
 <h5>Tout commence avec une</h5>
 <h3>Grande Vision</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue quis quam dignissim consectetur ac sit amet nisl. In hac habitasse platea. Eget augue quis quam dignissi lorem lipsum adispicing dolor sit amet.</p>
 <a href="#" class="green-btn">Orçamento</a>
 <img class="img-front" src="css/images/front-img.png" alt="dot1" width="263" height="436" />
 <img class="img-mid" src="css/images/img-mid.png" alt="dot2" width="230" height="363" />
 <img class="img-back" src="css/images/img-back.png" alt="dot3" width="195" height="304" />
 </div>

 <!-- Item do slide 3 -->
 <div>
 <h5>Todo comienza con una</h5>
 <h3>Gran Visión</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue quis quam dignissim consectetur ac sit amet nisl. In hac habitasse platea. Eget augue quis quam dignissi lorem lipsum adispicing dolor sit amet.</p>
 <a href="#" class="green-btn">Solicite</a>
 <img class="img-front" src="css/images/front-img.png" alt="dot1" width="263" height="436" />
 <img class="img-mid" src="css/images/img-mid.png" alt="dot2" width="230" height="363" />
 <img class="img-back" src="css/images/img-back.png" alt="dot3" width="195" height="304" />
 </div>
 <!--------->

 <!-- Item do slide 4 -->
 <div>
 <h5> 这一切都 开始于一个</h5>
 <h3> 大 视野</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue quis quam dignissim consectetur ac sit amet nisl. In hac habitasse platea. Eget augue quis quam dignissi lorem lipsum adispicing dolor sit amet.</p>
 <a href="#" class="green-btn">Compra na Loja</a>
 <img class="img-front" src="css/images/front-img.png" alt="dot1" width="263" height="436" />
 <img class="img-mid" src="css/images/img-mid.png" alt="dot2" width="230" height="363" />
 <img class="img-back" src="css/images/img-back.png" alt="dot3" width="195" height="304" />
 </div>
 <!--------->

 </div>

 <div class="pagination"></div>
 <a id="prev" href="#"></a>
 <a id="next" href="#"></a>

 </div>
 <!-------->
 </div>
 </header>
 <!-- Final do Header -->

 <!-- Site -->
 <div class="shell">

 <!-- Pagina -->
 <div class="main">

 <!-- SubTopo -->
 <asp:ContentPlaceHolder ID="SubTopo" runat="server">
 </asp:ContentPlaceHolder>
 <!--------->

 <!-- Contexto -->
 <asp:ContentPlaceHolder ID="Contexto" runat="server">
 </asp:ContentPlaceHolder>
 <!-------->

 <!-- Parceiros & Slider -->

 <!-- Parceiros -->
 <section class="content">
 <h2>NOSSOS CLIENTES & PARCEIROS</h2>
 </section>
 <!-------->

 <section class="partners">

 <!-- Parceiros Slider -->
 <div id="partners-slider">
 <div class="slider-holder2">
 <img src="css/images/partners1.png" width="92" height="52" />
 <img src="css/images/partners2.png" width="172" height="52" />
 <img src="css/images/partners3.png" width="236" height="52" />
 <img src="css/images/partners4.png" width="121" height="52" />
 <img src="css/images/partners5.png" width="92" height="52" />
 <img src="css/images/partners6.png" width="172" height="52" />
 <img src="css/images/partners7.png" width="236" height="52" />
 <img src="css/images/partners8.png" width="121" height="52" />
 <img src="css/images/partners9.png" width="121" height="52" />
 </div>
 </div>
 <!-------->

 <div class="slider-arr">
 <a class="prev-arr arr-btn" href="#"></a>
 <a class="next-arr arr-btn" href="#"></a>
 </div>
 </section>
 <!-------->

 <!-- Ferramentas Sociais -->
 <div class="socials">
 <p>Acesse para<strong> avaliar</strong> mais de nossos trabalhos. Ou poderá entra em contato.</p>
 <ul>
 <li><a href="#" class="facebook-ico">facebook-ico</a></li>
 <li><a href="#" class="twitter-ico">twitter-ico</a></li>
 </ul>
 </div>
 <!-------->

 </div>
 <!-- End Pagina -->
 </div>
 <!-- End Site -->

 <!-- Final Footer -->
 <div id="footer">
 <!-- Casca -->
 <div class="shell">
 <!-- Colunas -->
 <div class="footer-cols">

 <!-- Serviços -->
 <div class="col">
 <h2>SERVIÇOS</h2>
 <ul>
 <li><a href="#">Manutenção de Redes.</a></li>
 <li><a href="#">Manutenção de Computadores.</a></li>
 <li><a href="#">Suporte em Servidores.</a></li>
 <li><a href="#">Implantação de Redes, Computadores & Servidores.</a></li>
 </ul>
 </div>
 <!-------->

 <!-- Soluções -->
 <div class="col">
 <h2>SOLUÇÕES</h2>
 <ul>
 <li><a href="#">Controle de RH & Cadastro.</a></li>
 <li><a href="#">Entra & Saída de Produtos/Estoque.</a></li>
 <li><a href="#">Venda de Produto & Emição de Nota.</a></li>
 <li><a href="#">Registro Geral,Contas a Pagar & Balanço.</a></li>
 <li><a href="#">Flexivel para Utilização do Cliente.</a></li>
 </ul>
 </div>
 <!-------->

 <!-- Comunidade -->
 <div class="col">
 <h2>COMUNIDADE</h2>
 <ul>
 <li><a href="#">Ouvidoria & Reclamações.</a></li>
 <li><a href="#">Suporte & Solicitações.</a></li>
 <li><a href="#">Manutenção & Oraçamento.</a></li>
 <li><a href="#">Pagamento, Entrega & Instalações.</a></li>
 </ul>
 </div>
 <!-------->

 <!-- Contate-nos -->
 <div class="col">
 <h2>CONTATE-NOS</h2>

 <p>Email: <a href="#">info@XXXXX.com.br</a></p>
 <p>Telefone:</p>
 <p>Endereço:</p>
 <p>SP</p>
 </div>
 <div class="cl"> </div>
 </div>
 <!-------->

 <!-- Footer Bottom -->
 <div class="footer-bottom">
 <div class="footer-nav">
 <ul>
 <li><a hrerf="#">Home</a></li>
 <li><a hrerf="#">Serviços</a></li>
 <li><a hrerf="#">Projetos</a></li>
 <li><a hrerf="#">Soluções</a></li>
 <li><a hrerf="#">Carreira</a></li>
 <li><a hrerf="#">Comunidade</a></li>
 <li><a hrerf="#">Contato</a></li>
 </ul>
 </div>
 <p class="copy">Copyright © 2012<span>|</span><a href="[http://pt.wikipedia.org/wiki/Direito_autoral](http://pt.wikipedia.org/wiki/Direito_autoral)" target="_blank">Todos os direitos reservados ©</a></p>
 <div class="cl"> </div>
 </div>
 <!-------->

 </div>
 <!-- End Casca -->
 </div>
 <!-- End Footer -->

 </div>
 <!-- End WebSite -->

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

Se você olharem na anotação SUBTOP e CONTEXTO, encontrado bem ao meio da pagina, eu chamo o arquivo ID=SunTopo e ID=Contexto.

<asp:ContentPlaceHolder ID="SubTopo" runat="server">

 </asp:ContentPlaceHolder>
 <!--------->

 <!-- Contexto -->
 <asp:ContentPlaceHolder ID="Contexto" runat="server">
 </asp:ContentPlaceHolder>
 <!-------->

Esse conteúdo será realmente as paginas (index,contato,cadastro e etc... é mesmo o conteúdo.

Na index.aspx eu referencio a master page acima e passo o conteudo.

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

<asp:Content ID="Contexto" ContentPlaceHolderID="Contexto" runat="server">

 <section class="post">
 <img src="css/images/post-img.png" alt=""/>
 <div class="post-cnt">

 <h2><asp:Label ID="lblTitulo" runat="server" Text="QUEM SOMOS? E O QUE FAZEMOS?"></asp:Label></h2>

 <p>
 <asp:Label ID="lblContextoEscrito" runat="server" Text="<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit adispicing amet </strong><br/> Cras molestie condimentum consequat. Nam leo libero, scelerisque tincidunt amet nsectetur adipiscing elit. Cras molestie condimentum nsectetur adipiscing elit. Cras molestie condimentum consequat pretium donec Duis risus elit, imperdiet eget sollicitudin quis, <strong>some of the features:</strong>"></asp:Label>
 </p>

 <ul>
 <li><a href="#">jQuery Carousel Slideshow</a></li>
 <li><a href="#">Various Column Options</a></li>
 <li><a href="#">Valid XHTML and CSS Tableless Design</a></li>
 <li><a href="#">Tested on Mac & PC</a></li>
 </ul>
 </div>
 <div class="cl"> </div>
 </section>
 </section>
 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</asp:Content>

Bom, a duvida é.....

Como consigo referenciar exemplo:
Menu.ASPX, Propaganda.ASPX a uma masterpage e depois consigo chama-la para uma index passando só o conteudo.

Pois quando eu referencio um aspx a uma master e depois chamo ela em outra master não me traz o item 1 da primeira aspx.

Existe possibilidade de fazer masterpage dentro de masterpages?

GRANDES DUVIDAS, agradeço toda a atenção.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

xanburzum· 5 de mai.

este fórum é apenas de ASP Classic, para ASP.Net poste no fórum de plataforma .Net e dê uma olhada no fórum que postei um artigo sobre MasterPage

Sandmann· 7 de mai.

Por favor alguém ai muda a postagem do tópico para plataforma.net?

KhaosDoctor· 7 de mai.

Não é possível, você não pode referenciar nada da master page para outras páginas.