Como Crear una Master Page en Asp.Net – Tutorial

Como Crear una Master Page en Asp.Net – Tutorial

Muchas Veces nos encontramos con la necesidad de crear un sitio en el cual necesitamos tener la misma estructura a traves de sus diferentes paginas, generalmente nos toca escribir el mismo codigo una y otra vez gastando tiempo y esfuerzo que podriamos haber empleado en otro aspecto del sitio, para esto existen las Master Pages o Paginas Maestras. Veremos que es una Master Page, como crear una master page en asp.net y como enlazar correctamente la master page con las paginas «hijas» para utlizar su estructura de manera facil, asi que vamos ya con este miniTutorial :yum:

Que es una Master Page o Pagina Maestra?

Una Master Page es en resumen una pagina que sera utilizada de Plantilla para otras paginas del sitio, una pagina maestra se crea cuando se decide que la estructura del sitio sera la misma para muchas o todas de sus paginas. Asi lo que pongas o definas en una master page sera heredado de forma simple ( mediante una linea ) a todas las paginas «hijas» que asi lo soliciten.

El funcionamiento de una MasterPage es el siguiente:

  • El diseñador construye una Master Page y define el codigo para crear un menu de Navegacion del sitio.
  • El diseñador Web ahora tiene una pagina «hija» con el mismo menu ( codigo ) pero sin tener que escribir de nuevo ( o copiar y pegar ) el codigo ya que perderia tiempo en algo que ya esta creado. ( ademas de otras varias razones )
  • El diseñador utilizo una linea de codigo para importar varias ( pueden ser cientas ) lineas de codigo y ahorro valioso tiempo.

Escenario

En este Tutorial utilizaremos Visual Studio pero puedes utilizar otro o ninguno sin problemas. Nos vamos a File -> New -> Project  y elegimos un proyecto web vacio, en mi caso C# -> Web -> Visual Studio 2012 -> Asp.Net Empty Web Application.

Como Utilizar una Master Page en Cualquier Pagina?

Para utilizar una Master Page en cualquier pagina de tu sitio es necesario indicarlo de la siguiente forma:


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

<%@ Page Language="C#" MasterPageFile="~/MasterPage/Principal.master" AutoEventWireup="true" CodeBehind="AddVenta.aspx.cs" Inherits="Proyecto.Vista" %>

mediante la cual le indicamos que utilizaremos el lenguaje C#, una masterPage y su ruta ( observa la extension .master ), el atributo AutoEventWireup que indica si los eventos de la pagina son llamados automaticamente, CodeBehind que indica la ruta del archivo CS ( C# ) para el codigo detras de la pagina y el Inherits.

Pero ya que sabemos enlazar una master page a una pagina solo nos falta ver como crear una master page ..

Como Crear una Master Page

Vamos a dar click derecho sobre nuestro proyecto y luego en Add -> New Item, seleccionamos una master page ( esto puede variar dependiendo de tu version de VS pero generalmente basta con encontrar un archivo con extension .master ) y elegimos un nombre.

 como crear una master page en asp_net 1

Ahora vamos a agregar el siguiente codigo a nuestra Pagina Maestra:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server" >
<title>Sitio Ejemplo</title>
<link rel="stylesheet" type="text/css" href="~/Css/style.css">
</head>
<body>
<form id="form" runat="server">
<center>
<table>
<tr><td><asp:contentplaceholder id="Header" runat="server" /><img src="Images/Header.gif" width="720" height="200" alt="header" /></td></tr>
<tr><td><asp:contentplaceholder id="Contenido" runat="server" /></td></tr>
<tr><td><br><asp:contentplaceholder id="Footer" runat="server" /><center>@Todos los Derechos Reservados.</center></td></tr>
</table>
</center>
</form>
</body>
</html>

Explicando un Poco..

Master: En lugar Page en la directiva superior.

runat=»server»: Indica al elemento que lo tenga que sera cargado del lado del Servidor.

<asp:contentplaceholder .. />:  Define una Region de Contenido en una master page, esta sera le region que se importara en una pagina hija. ( importante colocar un ID ).

Ahora en nuestras paginas que queramos que tengan la misma estructura a la pagina maestra agregamos.. ( despues de agregar el atributo MasterPageFile en el Tag Page en la primera linea )

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

Tu Contenido Unico de cada Pagina

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

y Listo!
Mas Informacion sobre las MasterPages en Microsoft

Resultado

Como Crear una Master Page en Asp.Net

Clic para valorar esta información
[Total: 0 Promedio: 0]