Crear una aplicación Web desde Cero (VB y CSharp)- Part II – Páginas Maestras

Continuando al fin el tutorial que comenzó hace ya tiempo Crear una aplicación Web desde Cero (VB y CSharp)- Part I

Aquí les dejo la sucesión dedicado  a la creación de Páginas Maestras

En muchas ocasiones hemos optado por tener un diseño único en las páginas y cuando teníamos que editar una imagen un color o algo de ese diseño nos tocaba las de Caín J revisar todas las páginas y hacerles el cambio a todas. La idea fundamental de las MasterPages en ASP.net es precisamente tener una página principal con el diseño y con las secciones habilitadas (ContentPlaceHolder) para editarlas en las páginas que se generen a partir de la MasterPages.

Ventajas de tener una página maestra:

1. Ahorrarnos el copiar y pegar de página en página, es decir, si ya teníamos un modelo de cómo se verán nuestras páginas nosotros optábamos en copiar todo su html y lo pegábamos en las nuevas páginas para mantener el diseño. Permitiendo centralizar diseño de las páginas para que las modificaciones puedan llevarse a cabo en un solo lugar.

2. Permiten crear un diseño coherente para las páginas de la aplicación

3. Aparte del aspecto y el diseño también podemos controlar el comportamiento estándar que desea que tengan todas las páginas (o un grupo de páginas) de la aplicación en una sola MasterPage.

4. Mas fácil la edición del HTML en las paginas hijas, ya que las nuevas adiciones en las paginas están contenidas dentro de un ContePlaceHolder.

Ok comencemos a nuestro proyecto que hemos creado en el Post anterior le daremos con el botón derecho del mouse o se van al Menú “Sitio Web” y seleccionamos la opción “Agregar Nuevo Elemento” y buscaremos una plantilla llamada “MasterPages” le asignan el nombre que ustedes deseen, yo le diré “MasterPrincipal”. Veamos como se muestra en la siguiente Imagen.

Antes de agregar el diseño es conveniente borrar el ContentPlaceHolder que se encuentra dentro del Tag Body del HTML que aparece al crear la MasterPage

<body>

<form id=”form1″ runat=”server”>

<div>

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

</div>

</form>

</body>

Mientras que el ContentPlaceHolder que aparece en el Head lo dejaremos allí para futuras asignaciones J, ahora si procedemos a darle un diseño sencillo por lo que utilizaremos “3 Div” diferentes uno lo llamaremos dvCabezal, el otro dvMenu, y por ultimo dvContenido dentro de este ultimo Div agregaremos un ContentPlaceHolder que llamaremos cphContenido.

Esto debe quedar como la siguiente Imagen:

image

Con todo esto podemos seguir con el resto del tutorial, ahora para ver (probar) nuestra MasterPage borramos del proyecto la página Default.aspx y luego nos dirigimos al Menú “Sitio Web” y seleccionamos la opción “Agregar Nuevo Elemento” y buscaremos una plantilla llamada “Web Forms” le asignan el siguiente nombre “Default” y marcan la casilla de verificación llamada “Seleccionar la Pagina Principal” (Fig. Nuevo Elemento) le damos aceptar y luego seleccionamos Nuestra MasterPage” (Fig. Seleccionar MasterPage).

image

Fig. Nuevo Elemento

image

Fig. Seleccionar MasterPage

Ahora veremos la página de la siguiente manera:

image

Ahora puedes arrojar los controles que desees en la sección cphContenido y probar presionando la tecla F5, ya sé que se ve blanco y feo nuestro sitio pero en los próximos capítulos te diré como solventar ese detalle.

Publicado por

Alex Jimenez

Soy amante a la tecnología, dedicado al desarrollo de aplicaciones Web ReactJS, WCF, MVC, WebApi y antiguo MVP en ASP .net 2009-2012

3 comentarios en “Crear una aplicación Web desde Cero (VB y CSharp)- Part II – Páginas Maestras”

  1. Hola, lo siento me atoré porque no tengo la opcion de master page, solo anidada o de Ajax y no me sale alguna opcion para agregarle al elemento la pagina principal…. gracias..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *