Guía 2

ASP.NET
Manual Practico
Mg. José Mauricio Flores Avilès
Este manual ha sido elaborado para orientar al estudiante de ASP.NET en el desarrollo de sus
prácticas de laboratorios. El uso de este manual debe ser antes, durante y después de la práctica,
de tal forma que ofrece un método facilitador en su proceso de enseñanza/aprendizaje durante esta
asignatura.
En el desarrollo de esta asignatura se ha designado realizar las prácticas en 16 sesiones semanales
de laboratorios, los que incluyen 13 prácticas y tres parciales prácticos, durante los cuales, el
estudiante aplicará los conceptos y las técnicas fundamentalmente necesarios para el dominio de
lenguaje de programación.
El software a utilizar es el siguiente:
Visual Studio 2013 o superior.
.NET Framework 4.5.
WebMatrix.
SQL 2012.
Bootstrap.
Knockout.js
Guía 2.
Conexión a bases de datos y master pages.
Objetivos:
Realizar conexiones a diferentes bases de datos.
Elabarar sitios aplicando master pages.
Conexión a gestores de bases de datos.
Toda aplicación orientada a la web usa un gestor de base de datos, para el manejo de las
mismas, y ASP.NET junto a ADO.NET tiene la opción de manejar varios gestores para la
construcción de sitios WEB dinámicos, el primer paso es poder realizar conexiones a estas.
String de Conexión
Es una cadena de texto que conecta al lenguaje de programación, en este caso ASP.NET con
el gestor de base de datos seleccionado, este es un ejemplo de una conexión:
Provider=SQLOLEDB.1;Integrated Security=SSPI;Persist Security Info=False;Initial
Catalog=ejemplo1;Data Source=FLORESAVILES-HP\SQLEXPRESS
Código 1. Ejemplo de string de conexión.
En la cual está el proveedor, la seguridad si será integrada o no, el nombre del catálogo o
base de datos, y el origen de datos, cada conexión tiene una configuración particular que
dependerá mucho de los actores de la misma.
Usando Visual Studio.
Antes de empezar, debes tener una base de datos disponible en SQL, la cual nos servirá de
prueba, después desde el Explorador de servidores (Explorer Server) podemos crear las
conexiones y obtener el “string de conexión”, si no está activa, usa la opción
“Herramientas” del menú y activa “conectar con base de datos”.
Este proceso nos mostrar la pantalla donde puedo crear una conexión, ver imagen 1.
Imagen 1. Conectar a base de datos
A continuación nos aparecerá una pantalla según la imagen 2, que nos permitirá seleccionar
el origen de datos, ya sea que usemos SQL Server o alguna otra opción de proveedores de
datos, posteriormente nos aparece la imagen 3, en la cual podemos colocar claves,
seleccionar tablas, verificar la configuración, opciones avanzadas y aceptar las opciones.
Imagen 2. Conectar a base de datos
Es importante recordar que en la imagen 3, el proveedor de datos ya está seleccionado, si
es necesario cambiarlo, repetiremos el paso anterior.
Imagen 3, Agregar conexión a base de datos
Paso 1. Seleccionar el nombre del servidos de datos, este la mayoría de veces es el primero
en la lista, de lo contrario debemos buscar el nombre al cual se conecta la base de datos, el
cual podemos verlo al inicia, por ejemplo el Microsoft SQL Sever Management Studio,
según lo muestra la imagen 4.
Imagen 4. Pantalla de inicio y selección del nombre del servidor.
Paso 2. Ahora es importante configurar si la conexión con el servidor será con seguridad
autenticada de Windows esto se hace en la mayoría de los casos a nivel académico, pero a
nivel empresarial las bases de datos tienen claves de usuario y password para acceder a
ellas.
Paso 3. El siguiente paso es seleccionar la base de datos, estas se obtiene automáticamente
a partir de la selección del servidor de datos, una vez tengamos la lista, debemos seleccionar
la que usaremos, si no está en la lista es porque hemos realizado de forma incorrecta una
configuración anterior o no hemos seleccionado el servidor adecuado.
Paso 4: Probar la conexión, al darle click a esta opción comprobaremos si esta es exitosa o
no, nos mandara un mensaje como lo muestra la Imagen 5.
Imagen 5. Mensaje de respuestas sobre testeo del servidor
Paso 5: Este último es de verificar las opciones avanzadas, y de ahí obtendremos el String
de conexión, según lo muestra la Imagen 6.
Imagen 6. Mensaje de respuesta sobre el testeo del servidor.
Opción WEB.
Otra opción es crear la configuración en forma manual y podemos ayudarnos con la
siguiente página:
http://www.connectionstrings.com/
Conexión por clases
Estudiaremos un ejemplo de cómo hacer y probar las conexiones a base de datos usando
POO y además colocando el string de conexión en el web.config, el ejemplo se realizó con
una base de datos en Access para su fácil uso.
Tendremos dos script, en uno realizaremos la conexión a la base de datos mediante la
creación de una clase, y en el otro script veremos la configuración en el web.config.
MasterPages y Content Pages.
Muchas veces necesitamos usar un marco de trabajo, determinar que un elemento como
un top, o un menú, permanezca de forma fija en todas las paginas, para estas necesidades
usamos las Master (o paginas maestras.)
Master Pages
La definición de una MasterPage es como la de cualquier página. Las MasterPages pueden
contener marcas, controles, código o cualquier combinación de estos elementos. Sin
embargo,
una
Master
Page
puede
contener
un
tipo
especial
de
control
llamado ContentPlaceHolder. Un ContentPlaceHolder define una región de la
representación de la master page que puede substituirse por el contenido de una página
asociada a la maestra. Un ContentPaceHolder también puede contener información por
defecto, por si la página derivada no necesita sobre escribir este contenido. La sintaxis de
un control ContentPlaceHolder, se muestra en la imagen 7.
Imagen 7. Contenido básico de una MasterPage.
Para diferenciar una Master Page de una página normal, la MasterPage se guarda con una
extensión .master. Una página puede derivar de una MasterPage simplemente con definir
un atributo MasterPageFile en su directiva Page, de la forma vista arriba. Una página que
se asocia a una Master Page se llama Content Page (Página de Contenido).
<%@ Page MasterPageFile="Site.master" %>
Una Content Page puede declarar controles Content que sobrescriban específicamente el
contenido de las secciones marcadas en la MasterPage. Un control Content se asocia a un
control ContentPlaceHolder particular a través de la propiedad ContentPlaceHolderID.
Una Content Page debe contener marcas y controles sólo dentro de los controles Content;
no puede tener ningún contenido de alto nivel por sí misma. Puede, sin embargo, tener
directivas o código del lado del servidor.
Accediendo a una Master Page desde Código
Además de sobre escribir el contenido, es posible que la Content Page acceda de forma
programada a su Master Page. Una Content Page crea una referencia fuertemente tipada a
la Master Page mediante la directiva <%@ MasterType %>, especificando la ruta virtual de
la página maestra:
<%@ MasterType VirtualPath="Site.master" %>
Anidando Master Pages
Las Content Pages también pueden ser MasterPages. Esto quiere decir que es posible
derivar una Master Page a partir de otra MasterPage. Por ejemplo, podríamos tener una
MasterPage de primer nivel que represente la cabecera/pie de página y la navegación
global del sitio, y después MasterPages separadas que deriven de esta Master para definir
los aspectos de las diferentes sub-secciones del sitio. Las Content Pages derivarán de la
página maestra correspondiente a la sección a la que pertenece la Content Page.
Ejemplo:
Para empezar crearemos un sitio web con el nombre de “marcos”, y lo primero que
haremos es crear una página maestra y le pondremos de nombre “plantilla”, este quedara
como site.master, como lo muestra la imagen 8.
Imagen 8. Como crear una página maestra.
Al
crear
la
site.master,
nos
creara
una
división
que
tendrá
de
nombre
ContentPlaceHolder1, en esta área se desarrollan todas los formularios que se crean. Para
separa el contenido de la master, con el contenido fijo, crearemos una <div> antes de la
división del ContentPlaceHolder1, colocando el siguiente código:
<body>
<form id="form1" runat="server">
<div id="header">
<h1>Inversiones ACME</h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 1</a></li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
Codigo 2. Codigo fijo de la master.
Lo cual creara dos divisiones, las cuales son un encabezado donde colocamos el nombre la
empresa, y otra división donde creamos un menú básico con HTML, a estas divisiones
posteriormente las formatearemos con código CSS. Estas divisiones se repetirán en todas
los formularios que desarrollaremos y tendremos una división que tiene como
id=”ContentPlaceHolder1” donde se desarrollaran los demás formularios.
Como podemos ver en la imagen 9. Hay claramente un división que nos muestra donde se
desarrollaran los demás formularios, la posición de esta división puede ser cambiada en
base a las tradicionales tablas, o en base <div> y CSS.
Imagen 9. Vista diseño de la página site.master.
Ahora dejaremos por un momento el site.master y comenzaremos a crear formularios para
incorporarlos al master page.
Ahora empezaremos a crear los formularios, para esto debemos, crear un formulario y
activar un check box que está abajo que dice “Seleccionar página maestra”, dejaremos el
nombre de Default.aspx a este formulario, como lo muestra la imagen 10.
Figura 10. Creación de un formulario
Al crearlo le pedirá a que MasterPage quieren relacionarlo. Toman la opción de site.master,
tal como lo muestra la imagen 11. Es importante hacer ver que puedo asociar o no el
formulario a una MasterPage, no todos los script deben de estar asociados, pero también
podemos tener varias MasterPage disponibles para asociar formularios.
Imagen 11. Selección de una página maestra.
Al crear el formulario tendrá el nombre de Default.aspx con la siguiente configuración. En
la cual especifica que está relacionado al site.master, el código de este script puede verse
como el código 3.
<%@ Page Title="" Language="VB" MasterPageFile="~/site.master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
Codigo 3. Configuración de enlace con la master.
Este script nos crea dos contenedores por default, uno de ellos lo define para un
encabezado, y otro para el posterior contenido que nosotros deseamos colocar, podemos
ver como se ve el diseño del formulario en la imagen 12, como podemos ver hay un espacio
en gris que el que corresponde a la página maestra, y la parte en blanco es la que usaremos
para colocar el contenido de este formulario.
Figura 12. Diseño de la página Defaultd.aspx
Ahora crearemos un formulario básico, pero antes le asociaremos un script de CSS, con el
siguiente código:
#header{
width: 100%;
background-color:aqua;
padding:15px;
}
#menu {
background: #b6ff00;
padding: 5px 15px;
}
#menu li {
display: inline-block;
padding: 5px;
list-style: none;
}
#caja_forma {
width: 500px;
margin: 15px auto;
text-align: center;
}
Y después crearemos un formulario para en el script, precedido a la figura 7, tome en cuenta
que ya tiene aplicado el CSS.
Figura 7, Muestra de formularios Default.aspx ejecutándose.
Ahora programe los botones del menú: opción 1, opción 2 y opción 3, para que vea el
funcionamiento del master page.
Ejercicio:
1. Cree un Master Page con un diseño con imágenes de internet y cree 3 formularios
aplicando validación y que uno de ellos se puedan subir imágenes.
2. Cree un Master Page usando sola barra vertical izquierda, y también cree 3
formularios aplicando todo lo aprendido hasta hoy.
3. En ambos incluya también un menú.
4. Cree un Master Page, donde el menú este compuesto de imágenes y no menú para
seleccionar formularios.