ASP. Net Tutorial de MasterPages (VB).

Cuestiones de la vida, Visual Basic .Net siempre ha sido un lenguaje de programación al cual he visto con cierto desprecio. No porque sea un lenguaje malo, sino porque siempre me parecio menos robusto que otros lenguajes de programación. Hace algunos años aprendí un poco con el Visual Studio 2005, en las clases de programación de la Universidad, pero siempre tuve preferencia por otros lenguajes de programación llámese PL/SQL (que lo llevo casi que en mi ADN), Java que siempre ha sido el Lenguaje con el que he soñado desenvolverme profesionalmente, y hasta un poco de PHP.

Por el momento, he tenido que aprender a la "brava" como dicen a programar en Visual Basic y a desplegar las aplicaciones ASP .Net en el problemático y a la vez útil IIS. Así que como repaso para mí y apoyo para tí he creado este tutorial basado en los excelentes tutoriales que te brinda Scott Mitchell en la página oficial de ASP .Net.

En esta ocasión, a diferencia de otras veces no me detendré en dar una larga introducción al Lenguaje a utilizar, iremos directo al grano.

Prepara lo siguiente:

• Visual Studio 2008 (Quizas funcione para el 2005 y el 2010, intentalo).
• Sql Server 2005 y MS Sql Server Management Studio, por si caso se me ocurre meterle algo desde la base.
• Revisa que el IIS no tenga problemas con ningún otro servidor de aplicaciones (llámese GlasFish, OAS, Tomcat, etc.), no me detendré a explicar eso solo indico que por lo general es problema de puertos.

Comenzemos:

 Como dije, no me detendre a explicar mucho sobre el tema. Vamos a crear una MasterPage, que en definición sería como una plantilla (similar a la forma en que trabaja facelets para java), esto es para que no tengas que repetir en cada página un mismo contenido.

En si, diagramado la MasterPage trabaja de la siguiente manera:

Explicando el diagrama:

 Por un lado tenemos la Content Page, que no es más que una simple página web con el contenido que queremos presentar al usuario.

Luego, tenemos la Master Page, la cual trabaja con su propio diseño y vendría a ser un caparazón/carapacho (una concha para los lectores de otros países que no entiendan la terminología), la cual no esta vacía en su totalidad porque tiene decoraciones a su alrededor pero internamente si esta vacía.

El resultado final, se logra mediante la fusión de ambas páginas el contenido de nuestro caparazón/carapacho al que le llamamos Master Page es llenado por cada una de las Content Page que dispongamos.

Ahora que entendemos como funcionan, podemos comenzar por abrir el VS 2008 o la versión que ustedes consideren que les pueda servir y comenzemos con la parte divertida del tutorial:

Seleccionen la Opción Sitio Web, posteriorente el Vs les pedirá que seleccionen el tipo del nuevo sitio web a utilizar. Importante en este punto tomar en cuenta lo siguiente:

• Cambien el nombre y la ruta del proyecto a como se les de la gana, pero no se les olvide ponerle Lenguaje Visual Basic, para que puedan seguir este tutorial al pie de la letra.

Una vez configurada esta parte, bastará presionar el botón Aceptar el Visual Studio creará el árbol de carpetas y abrirá la página Default.aspx.

Llegados a este punto, si nunca habían creado una aplicación Web con ASP .Net Felicidades! si ya lo habían hecho pues ya saben como es la cuestión. Ahora, pasaremos al objetivo del tutorial seleccionan sobre el proyecto web (no la solución), en el árbol de carpetas, la opción "Agregar Nuevo elemento..." luego aparecerá un diálogo como el siguiente:

 Dejenla con ese nombre, o cambienselo si asi lo quieren. Pero recuerden colocar el Idioma como Visual Basic y luego presionen Agregar.

Lo que han hecho, es crear un archivo con extensión *.master, como decía antes son plantillas que se utilizan para el resto de páginas de contenido que crearán.

Si revisan el código de la MasterPage hay algunas diferencias  a tomar en cuenta que las hacen especiales con respecto a las páginas *.aspx comenzamos por la primera línea:

 <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>  

Si observan en la página Default.aspx la primera línea es esta:

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>  

Para comenzar el tag inicia con la palabra Master en vez de Page, otra diferencia notoria es la clase de la que heredan ambas páginas "MasterPage" "_Default".

En la Master Page podemos observar que dentro del tag <head> se encuentra lo siguiente:

   <asp:ContentPlaceHolder id="head" runat="server">  
   </asp:ContentPlaceHolder>  

Luego observamos que en el tag <body> encontramos lo siguiente:

 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">  
     </asp:ContentPlaceHolder>  

 


Usando CSS y html vamos a crear un diseño que nos permitirá dividir la MasterPage en varios sectores, de manera que podremos colocar contenido dentro de estos secotres de acuerdo a las necesidades que requiera nuestro sitio web.

El código original de la MasterPage es el siguiente:

 <%@ Master Language="VB" CodeFile="MasterPage.master.vb" 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>  
   <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>  

Lo modificaremos para que quede de la siguiente forma:

 <%@ Master Language="VB" CodeFile="MasterPage.master.vb" 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 id="Head1" runat="server">  
  <title>Untitled Page</title>  
  <asp:ContentPlaceHolder id="head" runat="server">  
  </asp:ContentPlaceHolder>  
  <link href="Styles.css" rel="stylesheet" type="text/css" />  
 </head>  
 <body>  
  <form id="form1" runat="server">  
  <div id="topContent">  
  <a href="Default.aspx">Tutorial de Master Pages</a>  
  </div>  
  <div id="mainContent">  
  <asp:ContentPlaceHolder id="MainContent" runat="server">  
  </asp:ContentPlaceHolder>  
  </div>  
  <div id="leftContent">  
  <h3>Titulo 1</h3>    
  <ul>  
  <li>TODO</li>  
  </ul>  
  <h3>Titulo 2</h3>    
  <ul>  
  <li>TODO</li>  
  </ul>  
  </div>  
  <div id="footerContent">  
  <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />  
  </div>  
  </form>  
  </body>  
 </html>  

Al revisar este código nos encontramos con algunas cuestiones que debemos tomar en cuenta:

• Hay una referencia a una hoja de estilos llamada "Styles.css", esa la tenemos que crear para que la MasterPage se despliegue con los estilos a utilizar.
• Las etiquetas <div> estan segmentadas de la siguiente manera:
• "topContent"
• "mainContent"
• "leftContent"
• "footerContent"
• Hay una referencia a una imagen en mediod e las etiquetas <div> con id "footerContent "

Creamos la hoja de estilo "Styles.css" de la misma forma en que creamos la MasterPage, seleccionamos la opción "Agregar nuevo elemento..." en el cuadro de diálogo seleccionamos la opción "Hoja de estilos" y le cambiamos el nombre a "Styles.css" dejamos el lenguaje como Visual Basic y finalmente clic en agregar.

Sustituimos el contenido por lo siguiente:

 body {  
   font-family: Verdana;  
   font-size: medium;  
   margin: 0px;  
 }  
 h1, h2 {  
   margin: 0px;  
 }  
 #topContent {  
   text-align: right;  
   background-color: #009;  
   color: White;  
   font-size: x-large;  
   text-decoration: none;  
   font-weight: bold;  
   padding: 10px;  
   height: 50px;  
 }  
 #topContent a {  
   text-decoration: none;  
   color: White;  
 }  
 #leftContent {  
   width: 230px;    
   padding: 10px;  
   font-size: 90%;  
   text-align: left;  
   position: absolute;  
   top: 60px;  
   margin-top: 10px;  
   left: 0px;  
 }  
 #leftContent h3 {  
   text-transform: uppercase;  
   letter-spacing: 2px;  
   text-align: center;  
   border-top: dotted 1px #660;  
   border-bottom: dotted 1px #660;  
 }  
 #mainContent {  
   text-align: left;  
   margin-left: 250px;  
   padding: 10px;  
 }  
 #footerContent {  
   text-align: center;  
   padding: 5px;  
 }  

Una vez Tenemos lo de la MasterPage creado, nos quedaría asociarle un content para probar el correcto funcionamiento de la MasterPage. Para lograr esto, tendremos que "Agregar nuevo elemento..." y seleccionamos la opción Web Forms, pero esta vez tendrá una diferencia, Añadiremos la MasterPage.

Al dar clic en Agregar, aparecerá un neuvo diálogo en el que pedirá que selecciones la MasterPage. Una vez seleccionada el código que veremos en la página Default2.aspx será el siguiente:

 <%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>  
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">  
 </asp:Content>  
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">  
 </asp:Content>  

Ahora corran la página Default2.aspx con CTRL +F5 y verán el resultado similar a lo siguiente:

Ahora añadiremos un texto en el Content, para que sea desplegado al correr la página en el Navegador. Modificamos la página Default2.aspx para que quede de la siguiente manera:

 <%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>  
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">  
 </asp:Content>  
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">  
 <h3>Bienvenido</h3>  
 <p>  
 Este es el sitio de prueba para los MasterPage, este contenido se debería mostrar en el área de   
 content de la página.  
 </p>  
 </asp:Content>  

Ahora ejecutamos la página con CTRL +F5 y el resultado que obtendremos será el siguiente:

Mas adelante en otro tutorial le añadiremos Login, Links, Menús Desplegables, Menús dinámicos, Títulos de Página, etc. para ver más a detalle el potencial de las MasterPage.


Fuente Oficial:
http://www.asp.net/web-forms/tutorials/master-pages