Programación Web .Net con C# .

NET EDUCACION IT

Trabajo Práctico Integrador

Arrancamos a trabajar con el Frontend de nuestro sistema, para ello aplicaremos: page,
masterpage, html, css y boostrap y dejaremos una primera estructura de nuestro sitio
preparada.

1) Crear solución MayoristaEstrella un proyecto Web ASP.Net, WebForm. Al proyecto lo

llamaremos SiteMayoristaEstrella, (si no tener una solución con este nombre creala,
seleccionando la opción asp.net framework webform, luego le agregaremos la librería
de entidades creada anteriormente.

1
Programación Web .Net con C# .NET EDUCACION IT

De esta manera tendremos nuestra estructura del sitio preparada.

2
Programación Web .Net con C# .NET EDUCACION IT

2) Exploremos la solución para ello presionamos F5 y navegamos por las distintas

paginas, observe que tenemos un contenido fijo con el menú, en el medio contenido y
debajo un pie.

3
Programación Web .Net con C# .NET EDUCACION IT

3) Agregar a travez de Nuget los ultimos paquetes de Boostrap y Jquery de la siguiente

Manera:

En
la

4
Programación Web .Net con C# .NET EDUCACION IT

solapa instalados si estan, perfecto, sino en buscar los pueden buscar y le dan instalar, lo
vemos juntos.

4) Veamos Juntos el codigo de la master page y conozcamos cada elemento

Aquí indicamos que se trata de una master page:

Declaramos el doctype como html5, el lenguaje de la pagina y el head, aquí se destaca el

objeto PlaceHolder que renderiza el script modernizer de jquery para aplicar a toda la pagina, y
indica a travez de webopt:bundlerreference que los css que estan contenidos en la carpeta
Content/css sean importaros en la pagina, por ultimo deja un link con la imagen favicon,ico.

En el Form lo primero que hace es referenciar y cargar todos los script a travez de un
ScriptManagar:

5
Programación Web .Net con C# .NET EDUCACION IT

Utilizando boostrap genera el encabezado de la pagina con su menu:

Luego se genera el contenido con su Footer, aquí se observa un objeto (puede haber mas de
uno ContentPlaceHolder que contendra el contenido variable del sitio.

5) Vamos reemplazar el html de la Master Page con el que represente el layout de

nuestro propio site, cada uno puede darle la impronta que mas le guste, por ejemplo
menú en la parte superior, contenido y pie, encabezado, menú a la Izquierda,
contenido y Pie, etc.
6
Programación Web .Net con C# .NET EDUCACION IT

Para nuestra página aprovecharemos la estructura por cuestiones de tiempo, los invito a darle
el layaut que mas les guste.

Para nuestro sitio de compras y ventas tendremos los siguientes menues:

Inicio, Compras, Ventas, Contacto (nicialmente en las propiedades href pondremos # ya que no
tenemos aun nuestras páginas.

En los lugares donde corresponda reemplazar el texto de ejemplo por Mayorist Estrella.

7
Programación Web .Net con C# .NET EDUCACION IT

6) Modificar la pagina Default.aspx para que quede de la siguiente manera, luego cada
uno puede darle el layaut que mas les guste,

7) Agregar la pagina Compras.aspx, para ello seleccionar crear pagina con master page de
la siguiente manera:

Boton dercho sobre proyecto, agregar, nuevo elemento formulario con pagina maestra:

Seleccionar Master.site y aceptar

8
Programación Web .Net con C# .NET EDUCACION IT

Y debe quedar inicialmente con el siguiente código:

8) Crear las paginas Ventas y Contacto siguiendo el mismo procedimiento, para ventas
colocar un H1 que diga mis Ventas y en contacto, puede quedar de la siguiente
Manera, tomando como H1 el valor del title de la pagina master que es el nombre del
sitio.

9) Uso de Postback, En la pagina compras, agreguemos Una etiqueta y un Boton de la

siguiente manera.

9
Programación Web .Net con C# .NET EDUCACION IT

En el evento onclick del botón btnPostback escribir lo siguiente

En el load de la pagina escribir lo siguiente.

Colocar un breakpoint en el load y el botón y observar el comportamiento.

10) Ejemplo de Boostrap en uno de nuestros formularios creemos el siguiente código,

puede ser en el Contacto.aspx, dentro del tag content:

<div class="container">

<div class="row">

<div class="col-lg-4" style="background-color:#aaa">

<h1>Columna 1</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

<div class="col-lg-4" style="background-color:#bbb">

<h1>Columna 2</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

<div class="col-lg-4" style="background-color:#ccc">

<h1>Columna 3</h1>

<p>Esto es una prueba de bootstrap.</p>

10
Programación Web .Net con C# .NET EDUCACION IT

</div>

</div>

<hr>

<div class="row">

<div class="col-md-4" style="background-color:#aaa">

<h1>Columna 1</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

<div class="col-md-4" style="background-color:#bbb">

<h1>Columna 2</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

<div class="col-md-4" style="background-color:#ccc">

<h1>Columna 3</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

</div>

<hr>

<div class="row">

<div class="col-sm-4" style="background-color:#aaa">

<h1>Columna 1</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

<div class="col-sm-4" style="background-color:#bbb">

<h1>Columna 2</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

<div class="col-sm-4" style="background-color:#ccc">

<h1>Columna 3</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

11
Programación Web .Net con C# .NET EDUCACION IT

</div>

<hr>

<div class="row">

<div class="col-xs-4" style="background-color:#aaa">

<h1>Columna 1</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

<div class="col-xs-4" style="background-color:#bbb">

<h1>Columna 2</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

<div class="col-xs-4" style="background-color:#ccc">

<h1>Columna 3</h1>

<p>Esto es una prueba de bootstrap.</p>

</div>

</div>

</div>

12