GuÃ A PrÃ¡ctica para Elaborar Una AplicaciÃ N Web en Capas

Gua Prctica para elaboracin de una aplicacin Web
Mdulo II
Presentacin........................................................................................................................................ 5
Introduccin ........................................................................................................................................ 6
Objetivos ............................................................................................................................................. 7
Objetivo General ............................................................................................................................. 7
Objetivos Especficos ....................................................................................................................... 7
1. JavaScript..................................................................................................................................... 7
Aadir JavaScript a una Pgina ....................................................................................................... 7
Sintaxis Bsica ................................................................................................................................. 8
Operadores.................................................................................................................................. 9
Operadores Bsicos ........................................................................................... 9
Operaciones con Nmeros y Cadenas de Caracteres .................................... 10
Operadores Lgicos......................................................................................... 10
Cdigo Condicional........................................................................................................................ 11
Control de Flujo ......................................................................................................................... 11
Bucles ............................................................................................................................................ 12
Bucle For.................................................................................................................................... 12
Bucle For In ............................................................................................................................. 12
Bucle While................................................................................................................................ 12
Bucke Do-While ......................................................................................................................... 13
Break y Continue ....................................................................................................................... 13
Break ............................................................................................................... 13
Continue ........................................................................................................... 13
Arreglos (Arrays) ........................................................................................................................... 14
Objetos .......................................................................................................................................... 15
Objetos Simples ............................................................................................... 15
Objetos Literales........................................................................................................................ 15
Funciones como constructores ................................................................................................. 15
Funciones ...................................................................................................................................... 16
Declaracin ................................................................................................................................ 17
Declaracin de una funcin nombrada ..................................................................................... 17
Utilizacin de las funciones ....................................................................................................... 17
Desarrollo de una aplicacin web en capas. Elaborado por Ing. Daniel Bojorge Sequeira 2 / 94
facebook.com/debsconsultores youtube.com/user/debsdaniel03 debsconsultores.blogspot.com
Funcin que no devuelve valor ....................................................................... 17
Funcin que devuelve un valor ....................................................................... 18
Funciones Annimas Autoejecutables ...................................................................................... 18
La palabra clave this ...................................................................................................................... 18
Function.call .............................................................................................................................. 19
Function.bind ............................................................................................................................ 19
2. jQuery ........................................................................................................................................ 19
Uso ................................................................................................................................................ 20
$(document).ready() ..................................................................................................................... 22
$(function().................................................................................................................................... 22
Seleccin de Elementos................................................................................................................. 23
Selector por ID (#) ..................................................................................................................... 23
Selector por clase (.) .................................................................................................................. 23
Selector por tipo de elemento .................................................................................................. 23
Navegacin por nodos............................................................................................................... 23
Navegando del hijo al padre (parent) ....................................................................................... 24
Buscando el primer predecesor (closest) .................................................................................. 24
Selectores utilizados para encontrar un elemento ................................................................... 25
.next(), .nextAll(), .prev(), .prevAll()............................................................... 25
Trabajar con Selecciones ............................................................................................................... 27
Encadenamiento ....................................................................................................................... 27
Obtenedores (Getters) & Establecedores (Setters) .................................................................. 28
Eventos y Modificadores ............................................................................................................... 28
Click ........................................................................................................................................... 29
Change ....................................................................................................................................... 29
Mouseover, mouseenter, hover ............................................................................................... 30
css, attr, val, text, html .............................................................................................................. 30
AJAX ............................................................................................................................................... 32
Qu es AJAX? ........................................................................................................................... 32
Por qu usar JSON? ................................................................................................................. 32
$.get, $.post, $.ajax ................................................................................................................... 33
3. Bootstrap ................................................................................................................................... 34
Distribucin Bsica ........................................................................................................................ 35
Plantilla Sencilla............................................................................................................................. 35
Diseando con rejilla ..................................................................................................................... 36
Preparando la pgina ................................................................................................................ 36
Tipos de rejillas.............................................................................................................................. 37
Caractersticas de cada rejilla .................................................................................................... 37
Ejemplo bsico de rejilla con Bootstrap .................................................................................... 38
Tipografa bsicas .......................................................................................................................... 39
Encabezados (h) ........................................................................................................................ 39
Clases CSS .................................................................................................................................. 40
Clases CSS para alinear texto......................................................................... 40
Tablas ............................................................................................................................................ 41
Tablas Responsive ..................................................................................................................... 41
Imgenes ....................................................................................................................................... 42
Formularios ................................................................................................................................... 43
Formulario Bsico...................................................................................................................... 43
Campos de Formularios ............................................................................................................ 44
Inputs ............................................................................................................... 44
Botones ..................................................................................................................................... 44
4. DLL DEBS Acceso a Datos .......................................................................................................... 45
Contenido ...................................................................................................................................... 46
Ejemplo.......................................................................................................................................... 46
5. Programacin en Capas............................................................................................................. 47
Capa Entidades .............................................................................................................................. 53
Atributos.................................................................................................................................... 57
Constructor................................................................................................................................ 57
Propiedades............................................................................................................................... 57
Capa Datos .................................................................................................................................... 59
CAD ............................................................................................................................................ 59
D_Costumer............................................................................................................................... 61
GetAll() Devolviendo todos los registros..................................................... 61
GetOne() Devolviendo un nico registro ...................................................... 62
Save() Guardar Registro (Insert/Update) ..................................................... 63
Del() Borrar Registro.................................................................................... 65
Capa Negocio................................................................................................................................. 66
Capa Presentacin......................................................................................................................... 68
Master Page .............................................................................................................................. 68
Web Forms ................................................................................................................................ 71
GetAll() Devolver todos los registros en un GridView ............................................................ 74
GridView Responsive................................................................................................................. 77
Ventana Modal Bootstrap ......................................................................................................... 81
GetOne() Llamar a un nico registro ...................................................................................... 86
Lado del Servidor ............................................................................................ 87
Lado del Cliente............................................................................................... 88
Save() Grabar Datos de Cliente (Insertar/Actualizar) ............................................................. 89
Del() Eliminar Registros .......................................................................................................... 91
6. Conclusin ................................................................................................................................. 93
7. Bibliografa ................................................................................................................................ 93
Presentacin
Este documento est elaborado con el objetivo de presentar de manera prctica los
pasos para elaborar una aplicacin web, basada en programacin en capas. Para
esto ltimo me basar en una dll que realiza el procesamiento con la base de datos,
la cual es de libre distribucin y la he nombrado DEBSAccesoDatos.dll (Al final link
para su descarga).
Tratar en lo mayor posible de que este documento sea sencillo y prctico,

obviamente que para una prctica debe existir un pequeo extracto terico. Por tal
motivo, cada captulo estar precedido de un poco de teora, principalmente en los
temas como JavaScript, jQuery y Bootstrap.
No pretendo hacer una gua definitiva para el desarrollo de aplicaciones web, ni

tampoco la ms completa, aunque har todo lo posible, soy alguien que le gusta
aprender y estudiar, pero principalmente transmitir ese conocimiento.
Todos los enlaces provistos en este documento estn acortados por medio del
servicio bit.ly o goo.gl, para poder mostrar texto corto y de fcil copiado.
Gracias por tomarte el tiempo de leer este documento, espero que te sea de utilidad
Introduccin
La programacin por capas es una arquitectura cliente-servidor en el que el objetivo
primordial es la separacin de la lgica de negocios de la lgica de diseo; un ejemplo
bsico de esto consiste en separar la capa de datos de la capa de presentacin al
usuario.
La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en

varios niveles y, en caso de que sobrevenga algn cambio, solo se ataca al nivel
requerido sin tener que revisar entre cdigo mezclado. Un buen ejemplo de este
mtodo de programacin sera el modelo de interconexin de sistemas abiertos.
Adems, permite distribuir el trabajo de creacin de una aplicacin por niveles; de

este modo, cada grupo de trabajo est totalmente abstrado del resto de niveles, de
forma que basta con conocer la API que existe entre niveles.
En el diseo de sistemas informticos actual se suelen usar las arquitecturas

multinivel o Programacin por capas. En dichas arquitecturas a cada nivel se le confa
una misin simple, lo que permite el diseo de arquitecturas escalables (que pueden
ampliarse con facilidad en caso de que las necesidades aumenten).
En el caso especfico que nos atae, haremos una aplicacin a partir de la base de
datos de ejemplo de Microsoft llamada (Adventure Works en su versin lite) de
libre distribucin, la cual puedes descargar desde el sitio oficial
(http://bit.ly/1cNJOwx).
Adicionalmente, necesitaremos la librera de acceso a datos elaborada por mi

persona, tambin de libre distribucin, la cual la podemos descargar desde
http://bit.ly/1G9do9B, contiene un ejemplo del funcionamiento de dicha librera.
Como un recurso adicional, recomiendo mucho ver dos cursos que hice y estn
publicados en mi canal de YouTube (@debsdaniel03), los links de la lista de
reproduccin son:
1. Curso programacin en capas, para una aplicacin Desktop:
http://goo.gl/Qq4h9q.
2. Curso programacin en capas, para una aplicacin Web, en este curso se
reutilizan las capas del proyecto anterior: http://goo.gl/dzEr6i
Una vez hecho lo anterior, te ser mucho ms fcil entender lo que veremos a
continuacin
Para descargar la librera DEBSAccesoSQL.dll, ir a este enlace
http://bit.ly/dlldebsacceso luego de descargar el archivo, dentro viene
un proyecto pequeo de ejemplo e indicaciones de cmo utilizar la librera.
Objetivos
Objetivo General
Transmitir el conocimiento necesario a los alumnos para la elaboracin de
una aplicacin web en capas, utilizando como herramientas Visual Studio
2012, jQuery, JavaScript, Bootstrap y la librera DEBSAccesoDatos.
Objetivos Especficos
Ensear elementos bsicos de JavaScript y jQuery, como lenguajes del lado
del cliente, para una aplicacin web.
Introducir conceptos bsicos para manejo de elementos Responsive mediante
Bootstrap.
Mostrar los mtodos contenidos en la librera DEBS Acceso Datos.
Dar a conocer conceptos de programacin en capas, por medio de un ejemplo
prctico.
1. JavaScript
JavaScript es un lenguaje de programacin que se utiliza principalmente para crear
pginas web dinmicas.
Una pgina web dinmica es aquella que incorpora efectos como texto que aparece
y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas
con mensajes de aviso al usuario.
Tcnicamente, JavaScript es un lenguaje de programacin interpretado, por lo que

no es necesario compilar los programas para ejecutarlos. En otras palabras, los
programas escritos con JavaScript se pueden probar directamente en cualquier
navegador sin necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relacin directa con el lenguaje

de programacin Java. Legalmente, JavaScript es una marca registrada de la empresa
Sun Microsystems, como se puede ver en http://www.sun.com/suntrademarks/
Aadir JavaScript a una Pgina
Existen dos formas de insertar cdigo JavaScript dentro de una pgina: escribiendo
cdigo en la misma (en ingls inline) o a travs de un archivo externo utilizando la
etiqueta script. El orden en el cual se incluye el cdigo es importante: un cdigo que
depende de otro debe ser incluido despus del que referencia (Ejemplo: Si la funcin
B depende de A, el orden debe ser A,B y no B,A).
Para mejorar el rendimiento de la pgina, el cdigo JavaScript debe ser incluido al
final del HTML.
Adems, cuando se trabaja en un ambiente de produccin con mltiples archivos

JavaScript, stos deben ser combinados en un solo archivo.
Ejemplo de cdigo JavaScript en lnea
Ejemplo de inclusin de un archivo externo JavaScript
Sintaxis Bsica
Las variables en los lenguajes de programacin siguen una lgica similar a las
variables utilizadas en otros mbitos como las matemticas. Una variable es un
elemento que se emplea para almacenar y hacer referencia a otro valor. Gracias a
las variables es posible crear "programas genricos", es decir, programas que
funcionan siempre igual independientemente de los valores concretos utilizados.
De la misma forma que si en Matemticas no existieran las variables no se podran
definir las ecuaciones y frmulas, en programacin no se podran hacer programas
realmente tiles sin las variables.
Las variables en JavaScript se crean mediante la palabra reservada var.
La palabra reservada var solamente se debe indicar al definir por primera vez la
variable, lo que se denomina declarar una variable. Cuando se utilizan las variables
en el resto de instrucciones del script, solamente es necesario indicar su nombre.
El nombre de una variable tambin se conoce como identificador y debe cumplir las
siguientes normas:
Slo puede estar formado por letras, nmeros y los smbolos $ (dlar)
y _ (guin bajo).
El primer carcter no puede ser un nmero.
Por tanto, las siguientes variables tienen nombres correctos:
Sin embargo, las siguientes variables tienen identificadores incorrectos:
Declaracin simple de variable
Los espacios en blanco no tienen valor fuera de las comillas
Los parntesis indican agrupacin y prioridad en las operaciones
La tabulacin mejora la lectura del cdigo, pero no posee ningn significado especial
Operadores
Los operadores permiten manipular el valor de las variables, realizar operaciones
matemticas con sus valores y comparar diferentes variables. De esta forma, los
operadores permiten a los programas realizar clculos complejos y tomar decisiones
lgicas en funcin de comparaciones y otros tipos de condiciones.
Operadores Bsicos
Los operadores bsicos permiten manipular valores
Concatenacin
Multiplicacin y divisin
Operaciones con Nmeros y Cadenas de Caracteres

En JavaScript, las operaciones con nmeros y cadenas de caracteres (en ingls
strings) pueden ocasionar resultados no esperados.
Suma vs Concatenacin
Forzar a una cadena de caracteres actuar como un nmero, tenemos varias opciones,
una es utilizar el constructor Number, que cuando es llamado como funcin obliga
al argumento a comportarse como un nmero. La otra opcin es utilizar el operador
de suma unitaria (+), entregando el mismo resultado:
Operadores Lgicos
Operadores Lgicos AND y OR
El operador || (OR lgico) devuelve el valor del primer operando, si ste es

verdadero; caso contrario devuelve el segundo operando. Si ambos operandos son
falsos devuelve falso (false). El operador && (AND lgico) devuelve el valor del
primer operando si ste es falso; caso contrario devuelve el segundo operando.
Cuando ambos valores son verdaderos devuelve verdadero (true), sino devuelve
falso.
El uso de estos operadores puede llegar a resultar confuso para los que inician con
Javascript, debido a que la lgica no es igual a otros lenguajes de programacin,
pero una vez dominado es muy til.
Operadores de comparacin
Los operadores de comparacin permiten comprobar si determinados valores son

equivalentes o idnticos.
Cdigo Condicional
A veces se desea ejecutar un bloque de cdigo bajo ciertas condiciones. Las
estructuras de control de flujo a travs de la utilizacin de las declaraciones if y
else permiten hacerlo
Control de Flujo
Bucles
Permiten ejecutar un bloque de cdigo un determinado nmero de veces
Bucle For
Bucle For In
Bucle While
Bucke Do-While
Break y Continue
Break
Usualmente, el fin de la ejecucin de un bucle resultar cuando la condicin no siga
evaluando un valor verdadero, sin embargo tambin es posible parar un bucle
utilizando la declaracin break dentro del cuerpo.
Continue
Termina la ejecucin de las sentencias de la iteracin actual del bucle actual o la
etiqueta y continua la ejecucin del bucle con la prxima iteracin.
Arreglos (Arrays)
Los arreglos (en ingls arrays) son listas de valores con ndice-cero (en ingls zero-
index), es decir, que el primer elemento del arreglo est en el ndice 0. stos son
una forma prctica de almacenar un conjunto de datos relacionados (como cadenas
de caracteres), aunque en realidad, un arreglo puede incluir mltiples tipos de datos,
incluso otros arreglos.
Al igual que en la mayor parte de los lenguajes de programacin, en JavaScript

podemos trabajar con arrays (tambin llamados arreglos, vectores o matrices). Los
arrays son de gran importancia ya que permiten organizar series de datos que
comparten el mismo nombre pero se diferencian por un ndice.
Una declaracin bsica de un arreglo sera
Para acceder a cada elemento, se har por medio de su ndice, de esta forma:
Algunas operaciones que podemos hacer con arreglos:
Objetos
En Javascript hay diversas formas de crear objetos, todas son vlidas y sirven para
cumplir diversos propsitos. Javascript est basado en prototipos y no en clases
(como Java o C#).
Objetos Simples
La forma ms simple de crear un objeto es instanciar un objeto de tipo Object y
agregarle las propiedades y mtodos dinmicamente:
Objetos Literales
Nota Aclaratoria: usar objetos literales no significa usar JSON, JSON es una notacin
basada influenciada por la sintaxis de los objetos literales de Javascript. Un object
literal es una manera de definir un objeto conforme a la sintaxis definida de
Javascript. JSON en cambio es un formato de intercambio de informacin que se
codifica con un formato similar al definido para los objetos literales. (Gracias a
Alberto vila por esta aclaracin en sus comentarios)
En un objeto literal las propiedades son creadas como lista de pares key/value.
Funciones como constructores

Como pueden notar cuando construimos objetos simples o literales no hay manera
de crear nuevas o varias instancias de estos objetos, digamos que necesito un
objeto Persona y crear varias instancias de l, aqu es donde entran las funciones
como constructores:
Ahora podemos pasarle valores al constructor para que establezca nombre y edad con
el valor que nos plazca, y si no estn definidos que tome un valor por default usando
el operador || .
Funciones
Cuando se desarrolla una aplicacin compleja, es muy habitual utilizar una y otra vez
las mismas instrucciones. Un script para una tienda de comercio electrnico por
ejemplo, tiene que calcular el precio total de los productos varias veces, para aadir
los impuestos y los gastos de envo.
Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado
el cdigo fuente de la aplicacin, ya que:
El cdigo de la aplicacin es mucho ms largo porque muchas instrucciones

estn repetidas.
Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer
tantas modificaciones como veces se haya escrito esa instruccin, lo que se
convierte en un trabajo muy pesado y muy propenso a cometer errores.
Las funciones son la solucin a todos estos problemas, tanto en JavaScript como en
el resto de lenguajes de programacin. Una funcin es un conjunto de instrucciones
que se agrupan para realizar una tarea concreta y que se pueden reutilizar
fcilmente.
Declaracin
Declaracin de una funcin nombrada
Por su forma de uso, es recomendable utilizar lo ms posibles funciones nombradas.
Utilizacin de las funciones

Como vimos en la seccin de objetos, se construy un constructor, el cual no es
ms que una funcin.
En esta ocasin veremos dos tipos de funciones, las que no devuelven valor y las
que s lo hacen. En POO, esto se llamara procedimientos y mtodos,
respectivamente.
Funcin que no devuelve valor
Son tiles para procesar algn tipo de informacin.
Funcin que devuelve un valor
Funciones Annimas Autoejecutables

Un patrn comn en JavaScript son las funciones annimas autoejecutables. Este
patrn consiste en crear una expresin de funcin e inmediatamente ejecutarla. El
mismo es muy til para casos en que no se desea intervenir espacios de nombres
globales, debido a que ninguna variable declarada dentro de la funcin es visible
desde afuera.
Este tipo de estructura pueden codificarse de varias formas, pero la ms popular es

la siguiente:
Por supuesto que podemos enviarle parmetros a funciones autoejecutables los

cuales iran dentro los parntesis finales, por ejemplo:
La palabra clave this
En JavaScript, as como en la mayora de los lenguajes de programacin orientados

a objetos, this es una palabra clave especial que hace referencia al objeto en donde
el mtodo est siendo invocado. El valor de this es determinado utilizando una serie
de simples pasos:
1. Si la funcin es invocada utilizando Function.call o Function.apply, this tendr
el valor del primer argumento pasado al mtodo. Si el argumento es nulo (null)
o indefinido (undefined), this har referencia el objeto global (el objeto
window);
2. Si la funcin a invocar es creada utilizando Function.bind, this ser el primer
argumento que es pasado a la funcin en el momento en que se la crea;
3. Si la funcin es invocada como un mtodo de un objeto, this referenciar a
dicho objeto;
4. De lo contrario, si la funcin es invocada como una funcin independiente, no
unida a algn objeto, this referenciar al objeto global.
Function.call
Function.bind
2. jQuery
jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que
permite simplificar la manera de interactuar con los documentos HTML, manipular
el rbol DOM, manejar eventos, desarrollar animaciones y agregar interaccin con
la tcnica AJAX a pginas web. Fue presentada el 14 de enero de 2006 en el BarCamp
NYC. jQuery es la biblioteca de JavaScript ms utilizada.1
jQuery es software libre y de cdigo abierto, posee un doble licenciamiento bajo la

Licencia MIT y la Licencia Pblica General de GNU v2, permitiendo su uso en
proyectos libres y privados.2 jQuery, al igual que otras bibliotecas, ofrece una serie
de funcionalidades basadas en JavaScript que de otra manera requeriran de mucho
ms cdigo, es decir, con las funciones propias de esta biblioteca se logran grandes
resultados en menos tiempo y espacio.
Las empresas Microsoft y Nokia anunciaron que incluirn la biblioteca en sus

plataformas.3 Microsoft la aadir en su IDE Visual Studio4 y la usar junto con los
frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrar con
su plataforma Web Run-Time.
Uso
jQuery consiste en un nico fichero JavaScript que contiene las funcionalidades

comunes de DOM, eventos, efectos y AJAX.
La caracterstica principal de la biblioteca es que permite cambiar el contenido de

una pgina web sin necesidad de recargarla, mediante la manipulacin del rbol DOM
y peticiones AJAX. Para ello utiliza las funciones $() o jQuery() .
Antes de iniciar, se recomienda tener la ltima versin estable de jQuery, para el da

de la edicin de este documento, la ltima versin estable era la 2.1.3.
Entra al sitio oficial (http://jquery.com)
Al escoger la opcin Download jQuery, te llevar a otra ventana donde escogers
entre la versin 1.x o la 2.x, bsicamente la diferencia es el ya casi extinto Internet
Explorer, a cmo puedes notar en la siguiente imagen que resalt el comentario.
En este punto, te sugiero descargar la versin comprimida (Download the

compressed production), que te bajar un archivo algo as, jQuery 2.x.min.js, es
igual a la versin sin comprimir, pero ste est hecho para que la carga del mismo
sea ms gil, sino tienes pensado revisar u ojear el ncleo de jQuery, entonces mejor
quedarnos con la versin compacta.
Otra forma de trabajar con jQuery sin necesidad de descargarlo es utilizando CDN
(Content Delivery Network o Red de Entrega de Contenido), lo cual facilita el no
descargar el archivo y slo lo utilizaremos, jQuery recomienda esta forma
Pero te recomiendo utilizar otro CDN, ms abajo en la misma pgina de descarga te

indica varios, entre los ms comunes est el CDN de google.
Pero nosotros descargamos la librera, por tanto, el uso que le daremos ser cargarlo
desde nuestro servidor, as que la carga ser igual que las anteriores, pero con una
direccin relativa desde el documento que haga la invocacin hasta el lugar donde
est en nuestro servidor la librera jQuery, para nuestro caso, la librera est ubicada
en el mismo directorio del archivo que lo invoca, por tanto ponemos as:
Y en lo sucesivo, asumiremos que ya tens cargado esta librera en la seccin HEAD

del documento HTML.
La librera jQuery en resumen nos aporta las siguientes ventajas:

Nos ahorra muchas lneas de cdigo.
Nos hace transparente el soporte de nuestra aplicacin para los navegadores
principales.
Nos provee de un mecanismo para la captura de eventos.
Provee un conjunto de funciones para animar el contenido de la pgina en
forma muy sencilla.
Integra funcionalidades para trabajar con AJAX.
$(document).ready()
No es posible interactuar de forma segura con el contenido de una pgina hasta que
el documento no se encuentre preparado para su manipulacin. jQuery permite
detectar dicho estado a travs de la declaracin $(document).ready() de forma tal que
el bloque se ejecutar slo una vez que la pgina est disponible.
$(function()
Existe una forma abreviada para $(document).ready() la cual podr encontrar

algunas veces; sin embargo, es recomendable no utilizarla en caso que este
escribiendo cdigo para gente que no conoce jQuery.
Seleccin de Elementos
El concepto ms bsico de jQuery es el de seleccionar algunos elementos y realizar
acciones con ellos. La biblioteca soporta gran parte de los selectores CSS3 y varios
ms no estandarizados. En http://api.jquery.com/category/selectors/ se puede
encontrar una completa referencia sobre los selectores de la biblioteca.
A continuacin se muestran algunas tcnicas comunes para la seleccin de

elementos:
Selector por ID (#)

Recordemos que la asignacin de un ID, siempre es nico, no puede haber dos ID
iguales en nuestro documento
Selector por clase (.)

Cuando queremos manipular varios elementos y realizarle la misma accin, podemos
llamarlos por su clase
Selector por tipo de elemento
Navegacin por nodos

Recordemos que una pgina web XHTML, es un XML, y los XML tienen nodos,
atributos e hijos, por ejemplo tenemos un div y ste dentro contiene 4 imgenes,
cmo le digo que quiero acceder nicamente a ese div, y obtener las 4 imgenes?.
Una manera sencilla seria declarar 4 ID para las imgenes y problema resuelto no?,
pero hagamos lo siguiente declaremos un ID para nuestro DIV, y a las imgenes
Otra forma podra ser haciendo una referencia, pasaramos al padre como segundo
valor, y le indicamos que busque dentro de la referencia
Ahora quiero acceder a la segunda imagen nicamente, usamos el selector eq, ste
verifica cuantos hermanos tiene dentro de un padre, es decir compara cuantas
imgenes ms existen dentro de su posicin actual.
Como son 4 imgenes, la primera imagen es el ndice 0, y la ultima el ndice 3, si
quiero acceder a la segunda imagen hago esto
Navegando del hijo al padre (parent)
Supongamos que se hizo click en un hipervnculo que est dentro de un div, quiero
que ese div se ponga de color amarillo para saber que esta seleccionado, para hace
usamos parent, lo que hace es nuestra referencia es el hipervnculo, y con parent le
decimos que busque a su contenedor de esto, con eso llegamos al div, se pueden
hacer mltiples parents hasta llegar a las etiquetas BODY
Buscando el primer predecesor (closest)

Este mtodo lo emplearemos cuando necesitemos obtener un determinado objeto
que sea el primer antecesor en el DOM de aquel que marquemos como punto de
partida.
Selectores utilizados para encontrar un elemento
Estos selectores encuentran otros elementos que guardan relacin con los elementos
previamente seleccionados (como los que encuentran descendientes, antecesores o
hermanos de una seleccin anterior, por ejemplo)
.next(), .nextAll(), .prev(), .prevAll()
Estos mtodos son bastante sencillos. Por ejemplo, si quisiramos seleccionar slo
el elemento nico siguiente hermano de cada elemento previamente seleccionado,
utilizaramos .next().
Vamos a ver un ejemplo (tomado de la web oficial de jQuery):
Lo que hace es encontrar el hermano inmediatamente posterior de cada button con

atributo disabled (el span) y cambiar su texto por Este botn est desactivado:
Si quisiramos seleccionar todos los hermanos que siguen al elemento seleccionado
utilizaramos .nextAll(). Por ejemplo, localizar todos los divs que siguen al primero
y aplicarles una clase que llamaremos rojo y que implica un borde rojo alrededor
del DIV (fuente: web oficial de jQuery):
El resultado es:
Trabajar con Selecciones

Una vez realizada la seleccin de los elementos, es posible utilizarlos en conjunto
con diferentes mtodos. stos, generalmente, son de dos tipos: obtenedores (en
ingls getters) y establecedores (en ingls setters). Los mtodos obtenedores
devuelven una propiedad del elemento seleccionado; mientras que los mtodos
establecedores fijan una propiedad a todos los elementos seleccionados.
Encadenamiento
Si en una seleccin se realiza una llamada a un mtodo, y ste devuelve un objeto
jQuery, es posible seguir un encadenado de mtodos en el objeto.
Por otro lado, si se est escribiendo un encadenamiento de mtodos que incluyen

muchos pasos, es posible escribirlos lnea por lnea, haciendo que el cdigo luzca
ms agradable para leer.
Si desea volver a la seleccin original en el medio del encadenado, jQuery ofrece el
mtodo $.fn.end para poder hacerlo.
Obtenedores (Getters) & Establecedores (Setters)

jQuery sobrecarga sus mtodos, en otras palabras, el mtodo para establecer un
valor posee el mismo nombre que el mtodo para obtener un valor. Cuando un
mtodo es utilizado para establecer un valor, es llamado mtodo establecedor (en
ingls setter). En cambio, cuando un mtodo es utilizado para obtener (o leer) un
valor, es llamado obtenedor (en ingls getter).
Los mtodos establecedores devuelven un objeto jQuery, permitiendo continuar con

la llamada de ms mtodos en la misma seleccin, mientras que los mtodos
obtenedores devuelven el valor por el cual se consult, pero no permiten seguir
llamando a ms mtodos en dicho valor.
Eventos y Modificadores
jQuery provee mtodos para asociar controladores de eventos (en ingls event
handlers) a selectores. Cuando un evento ocurre, la funcin provista es ejecutada.
Dentro de la funcin, la palabra clave this hace referencia al elemento en que el
evento ocurre.
Para ms detalles sobre los eventos en jQuery, puede

consultar http://api.jquery.com/category/events/.
La funcin del controlador de eventos puede recibir un objeto. Este objeto puede ser
utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el
comportamiento predeterminado de ste. Para ms detalles sobre el objeto del
evento, visite http://api.jquery.com/category/events/event-object/.
Vamos a ver algunos ejemplos simples:
Click
Se ejecuta cuando se hace click sobre algn elemento.
Ejemplo:
Change
Sucede cuando un elemento select, input, textarea cambia de valor.
Ejemplo:
Mouseover, mouseenter, hover
Sucede cuando el mouse se posiciona, sale de un elemento, en lugar de declarar por

separados las funciones de entrada y salida del mouse, usamos hover que acepta
dos funciones.
css, attr, val, text, html
css (key, value) podemos modificar las propiedades css de un elemento, o

capturar su valor actual, para capturar su valor no ingresamos el segundo
parmetro.
attr (key, value) podemos modificar los atributos de un elemento, o capturar
su valor actual, para capturar su valor no ingresamos el segundo parmetro.
val (value) hace referencia al value de un input, select, y el textarea a su
contenido dentro, si le enviamos un valor, le agregara un contenido a los
elementos mencionados.
text (value) obtiene el texto de un elemento, si el contenido es html lo
devolver como texto plano siempre y cuando no ingresemos un valor, del
caso contrario si le enviamos un valor llenara el elemento con el contenido
enviado.
html (value) obtiene el texto de un elemento, si el contenido es html lo
devolver como texto plano siempre y cuando no ingresemos un valor, del
caso contrario si le enviamos un valor llenara el elemento con el contenido
enviado.
Hagamos un par de ejemplos sencillos:
On
ON es utilizado cuando los elementos html han sido anidados despus de que el
documento ha sido cargado.
Ejemplo: supongamos que el siguiente botn fue creado con cdigo JavaScript,
despus de cargar el documento, es decir hicieron un
.html('<button id="mi_boton2"></button>')
si asignramos un evento sin on, no podramos hacer nada, ya que no existe, pero
con on si
AJAX
El mtodo XMLHttpRequest (XHR) permite a los navegadores comunicarse con el
servidor sin la necesidad de recargar la pgina. Este mtodo, tambin conocido como
Ajax (Asynchronous JavaScript and XML), permite la creacin de aplicaciones ricas
en interactividad.
Las peticiones Ajax son ejecutadas por el cdigo JavaScript, el cual enva una
peticin a una URL y cuando recibe una respuesta, una funcin de devolucin puede
ser ejecutada la cual recibe como argumento la respuesta del servidor y realiza algo
con ella. Debido a que la respuesta es asncrona, el resto del cdigo de la aplicacin
continua ejecutndose, por lo cual, es imperativo que una funcin de devolucin sea
ejecutada para manejar la respuesta.
A travs de varios mtodos, jQuery provee soporte para Ajax, permitiendo abstraer
las diferencias que pueden existir entre navegadores. Los mtodos en cuestin
son $.get(), $.getScript(), $.getJSON(), $.post() y$().load().
A pesar que la definicin de Ajax posee la palabra XML, la mayora de las

aplicaciones no utilizan dicho formato para el transporte de datos, sino que en su
lugar se utiliza HTML plano o informacin en formato JSON ( JavaScript Object
Notation).
En general, Ajax no trabaja a travs de dominios diferentes. Sin embargo, existen

excepciones, como los servicios que proveen informacin en formato JSONP ( JSON
with Padding), los cuales permiten una funcionalidad limitada a travs de diferentes
dominios.
Qu es AJAX?
Es una tcnica para aplicaciones web que permite realizar una consulta al servidor,
este puede ser sncrona (esperamos una respuesta) o asncrona (no esperamos
respuesta), y existen diversas forma para manipular la informacin obtenida por ajax,
ya sea como texto plano, xml, o json la que ms recomiendo es trabajar usando json.
Pueden tener ms informacin consultando el enlace de Wikipedia
http://es.wikipedia.org/wiki/AJAX
Por qu usar JSON?

Porque es ms liviana que XML, y permite obtener ms informacin que un texto
plano.
$.get, $.post, $.ajax
$.get (url, parmetros, callback, tipo) realiza una peticin XHR al servidor a
travs de la URL, mtodo GET
$.post (url, parmetros, callback, tipo) realiza una peticin XHR por debajo del
servidor, mtodo POST
$.ajax: Debes si quieres trabajar con post, get, que tipo de encabezado enviar,
recibir, en caso de que la peticin se muri que hacer, etc.
El siguiente ejemplo, es algo de lo que se ver en la seccin de capas, como puedes

ver, la funcin Ajax, se introdujo en un evento click de un botn, el objetivo es
eliminar un registro, la lgica o lo que se pide que haga est en el parmetro url y
como es una modificacin (invasiva), se utiliza el tipo POST.
Hay muchas cosas ms sobre jQuery y JavaScript, pero con lo que hemos visto es
suficiente para que puedas iniciar a trabajar con jQuery utilizando ASP.NET.
3. Bootstrap
En la actualidad muchos sitios web estn elaborando su diseo en Bootstrap, Qu
es Bootstrap? Pues en pocas palabras es el framework de Twitter que permite
crear interfaces web con CSS y Javascript que adaptan la interfaz dependiendo del
tamao del dispositivo en el que se visualice de forma nativa, es decir,
automticamente se adapta al tamao de un ordenador o de una Tablet sin que el
usuario tenga que hacer nada, esto se denomina diseo adaptativo o Responsive
Design y est muy de moda.
Sus caractersticas principales son:

Sencillo y ligero
o Puede bastar con un archivo CSS y uno JavaScript
Basado en los ltimos estndares de desarrollo Web
o HTML5, CSS3 y JavaScript/JQuery
Plugins de jQuery para validar entrada de datos, visualizacin tablas, grafos,
etc.
Curva de aprendizaje baja
Compatible con todos los navegadores habituales
Arquitectura basada en LESS
Reset CSS basado en Normalize.css
Cdigo abierto
o Publicado en 2011 con licencia Apache
Existen varias formas diferentes de empezar con Bootstrap, cada una orientada a un
tipo de pblico en funcin de su nivel tcnico. Sigue leyendo para conocer cul de
estas opciones se ajusta mejor a tus necesidades.
Descargar el cdigo CSS y JavaScript compilado, que es la forma ms sencilla

de empezar a utilizar Bootstrap. La desventaja es que esta versin no incluye
ni los archivos originales ni la documentacin. Para descargar esta versin,
accede a getbootstrap.com y pulsa el botn Download Bootstrap.
Descargar el cdigo fuente, contiene todos los archivos Less, y JavaScript
originales de Bootstrap. La desventaja es que requiere un compilador de
archivos Less y cierto trabajo de configuracin. Descarga la versin ms
reciente en el sitio github.com/twbs/bootstrap/releases.
Descargar el cdigo fuente en formato Sass, se trata de una variante de la
versin anterior y que se ha creado para facilitar la integracin de Bootstrap
en las aplicaciones Ruby On Rails, Compass o cualquier otro proyecto basado
en Sass. Descarga la versin ms reciente en el sitio
github.com/twbs/bootstrap-sass/releases.
Distribucin Bsica
Plantilla Sencilla
Diseando con rejilla
Preparando la pgina
Antes de comenzar a disear el layout o estructura de contenidos de las pginas, es
necesario realizar algunos preparativos importantes.
Bootstrap utiliza algunos elementos HTML y algunas propiedades CSS que requieren
el uso deldoctype de HTML5. No olvides incluir este doctype en todas tus pginas con
el siguiente cdigo:
Bootstrap 2 inclua algunas utilidades para hacer que las pginas se adaptaran a los
dispositivos mviles. Bootstrap 3 se ha creado desde cero pensando en los mviles.
As que en vez de incluir algunos estilos opcionales para mviles, todo eso ya est
incluido en el propio Bootstrap. Por eso nos gusta decir que para Bootstrap 3, los
dispositivos mviles son lo ms importante.
Para que las pginas se muestren correctamente y el zoom funcione bien en los
dispositivos mviles, es importante que aadas la siguiente etiqueta dentro de la
cabecera <head> de las pginas:
Tipos de rejillas
Bootstrap incluye una rejila o retcula fluda pensada para mviles y que cumple con
el diseo webresponsive. Esta retcula crece hasta 12 columnas a medida que crece
el tamao de la pantalla del dispositivo. Bootstrap incluye clases CSS para utilizar la
rejilla directamente en tus diseos y tambin define mixins de LESS para que puedas
crear diseos ms semnticos.
El diseo de pginas basado en rejilla se realiza mediante filas y columnas donde se

colocan los contenidos. As funciona la rejilla de Bootstrap:
Las filas siempre se definen dentro de un contenedor de
tipo .container (anchura fija) o de tipo.container-fluid (anchura variable).
De esta forma las filas se alinean bien y muestran el paddingcorrecto.
Las filas se utilizan para agrupar horizontalmente a varias columnas.
El contenido siempre se coloca dentro de las columnas, ya que las filas slo
deberan contener como hijos elementos de tipo columna.
Bootstrap define muchas clases CSS (como por ejemplo .row y .col-xs-4)
para crear rejillas rpidamente. Tambin existen mixins de Less para crear
diseos ms semnticos.
La separacin entre columnas se realiza aplicando padding. Para contrarrestar
sus efectos en la primera y ltima columnas, las filas (elementos .row) aplican
mrgenes negativos.
Las columnas de la rejilla definen su anchura especificando cuntas de las 12
columnas de la fila ocupan. Si por ejemplo quieres dividir una fila en tres
columnas iguales, utilizaras la clase .col-xs-4 (el 4 indica que cada columna
ocupa 4 de las 12 columnas en las que se divide cada fila).
Caractersticas de cada rejilla

La siguiente tabla muestra las caractersticas de la rejilla de Bootstrap en los
diferentes tipos de dispositivos.
Ejemplo bsico de rejilla con Bootstrap
El siguiente ejemplo muestra cmo crear una rejilla con las clases .col-md-*. En los
dispositivos mviles (extra pequeo o pequeo) esta rejilla se muestra verticalmente,
pero en un ordenador (medio o grande) se ve horizontalmente.
Que da como resultado:
Tipografa bsicas
Los estilos relacionados con la tipografa y el texto de los contenidos son esenciales
en cualquier framework CSS. Por esa razn, Bootstrap 3 incluye decenas de estilos
para los principales elementos utilizados en los sitios y aplicaciones web.
Encabezados (h)
Bootstrap 3 define estilos por defecto para todos los niveles de titulares de las
pginas, desde <h1>hasta <h6>. Ejemplo:
Clases CSS
Clases CSS para alinear texto
Bootstrap 3 define varias clases CSS para alinear de diferentes formas el contenido
de texto de los elementos.
Ejemplo:
Hay ms detalles, que los puedes ver en http://librosweb.es/libro/bootstrap_3
Tablas
Aade la clase .table a cualquier elemento <table> para aplicar los estilos bsicos
de Bootstrap 3 para tablas. El resultado es una tabla con un padding muy sutil y con
lneas de separacin solamente en las filas.
Puede parecer absurdo tener que aadir la clase .table para que se apliquen los
estilos a las tablas, pero ten en cuenta que el elemento <table> se utiliza para muchas
otras cosas que no son necesariamente tablas, como por ejemplo calendarios y
selectores de fechas.
Ejemplo:
Tablas Responsive
La solucin que propone Bootstrap 3 para crear tablas responsive que se vean bien
en dispositivos pequeos consiste en aadir un scroll horizontal a las tablas que sean
demasiado anchas. Para ello, encierra cualquier tabla con la clase .table dentro de
un elemento con la clase .table-responsive. Cuando las tablas responsive se
muestran en dispositivos con una anchura superior a 768px, se ven igual que
cualquier otra tabla normal.
Ejemplo:
Imgenes
Bootstrap 3 define varias clases CSS para decorar las imgenes de tus sitios web:
.img-rounded, aade unas pequeas esquinas redondeadas en todos los lados
de la imagen aplicando el estilo border-radius: 6px.
.img-thumbnail, muestra la imagen con un relleno blanco y un borde fino
simulando el aspecto de las fotografas de las antiguas cmaras instantneas.
Aade adems una breve animacin para hacer que la imagen aparezca al
cargar la pgina.
.img-circle, convierte la imagen en un crculo aplicando el estilo border-
radius: 50%
Ejemplo:
Formularios
Los formularios son uno de los elementos ms importantes de los sitios y

aplicaciones web. Por eso Bootstrap 3 permite disear formularios con aspectos muy
variados y define decenas de estilos para todos los campos de formulario.
Formulario Bsico
Bootstrap 3 aplica por defecto algunos estilos a todos los componentes de los
formularios. Si adems aades la clase .form-control a los
elementos <input>, <textarea> y <select>, su anchura se establece a width: 100%.
Para optimizar el espaciado, utiliza la clase .form-group para encerrar cada campo
de formulario con su <label>.
Ejemplo:
Campos de Formularios
Bootstrap 3 define estilos adecuados para todos y cada uno de los campos de
formulario existentes.
Inputs
Los campos de tipo <input> son los ms numerosos, ya que con HTML5 la lista se
ha ampliado a text, password, datetime, datetime-local, date, month, time, week,
number, email, url, search, tel, y color.
Botones
Crea diferentes tipos de botones con ayuda de cualquiera de las clases CSS definidas
por Bootstrap 3. Ejemplo:
Hay ms elementos para trabajar con Bootstrap, pero hemos visto lo ms bsico. Te
recuerdo visitar el sitio web oficial http://getbootstrap.com/
4. DLL DEBS Acceso a Datos

Llegamos en el documento a la etapa de comenzar a programar en capas, para esto
vamos comentar un poco de la librera que utilizaremos para poder llevar a buen
puerto nuestra aplicacin.
DEBS Acceso Datos es una librera freeware, de libre distribucin elaborada por mi
persona (Daniel Bojorge) con el fin de hacer ms sencillo el desarrollo de
aplicaciones en capa, tanto para Desktop como para Web.
Los cursos en videos (sugeridos al inicio de este documento), utilizan dicha librera.
Para una mejor comprensin, recomiendo y aconsejo entrar a YouTube y ver todo
este video, donde explico a mayor detalle el funcionamiento de esta librera.
http://goo.gl/vfhSPG
Contenido
La librera consta de 2 propiedades y 6 mtodos:

Propiedades:
o cConex: Contiene la cadena de conexin a la base de datos
o conexin: Objeto de tipo SqlConnection, al cual se le pasa cConex.
Mtodos:
o AbrirConexion(): Abre una conexin con la base de datos
o CerrarConexion(): Cierra la conexin con la base de datos
o CrearComando(): Crea (devuelve) un objeto de tipo SqlCommand
o GetDS(): Devuelve un objeto de tipo DataSet
o Ejecuta_Accion(): Ejecuta query de procesamientos (Insert, Delete,
Update)
o Ejecuta_Consulta(): Ejecuta query de consulta (Select)
Ejemplo
En la siguiente seccin (captulo), abordaremos ms de la librera, ya que iniciaremos
el proyecto de ejemplo, donde aplicaremos todos los mtodos.
5. Programacin en Capas
La programacin por capas es una arquitectura cliente-servidor en el que el objetivo
primordial es la separacin de la lgica de negocios de la lgica de diseo; un ejemplo
bsico de esto consiste en separar la capa de datos de la capa de presentacin al
usuario.
La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en

varios niveles y, en caso de que sobrevenga algn cambio, solo se ataca al nivel
requerido sin tener que revisar entre cdigo mezclado. Un buen ejemplo de este
mtodo de programacin sera el modelo de interconexin de sistemas abiertos.
Adems, permite distribuir el trabajo de creacin de una aplicacin por niveles; de

este modo, cada grupo de trabajo est totalmente abstrado del resto de niveles, de
forma que basta con conocer la API que existe entre niveles.
En el diseo de sistemas informticos actual se suelen usar las arquitecturas

multinivel o Programacin por capas. En dichas arquitecturas a cada nivel se le confa
una misin simple, lo que permite el diseo de arquitecturas escalables (que pueden
ampliarse con facilidad en caso de que las necesidades aumenten).
En las siguientes secciones, ir explicando con un ejemplo prctico el proceso de

programacin en capas. Trabajaremos un total de 4 (cuatro) capas, las cuales son:
Capa de Datos
Capa de Entidades
Capa de Negocio
Capa de Presentacin
La aplicacin que haremos, ser del control de clientes, utilizando la base de datos
Adventure Works en su versin Lite. Para esto, debemos ver la estructura de la
tabla que vamos a procesar.
Para iniciar, debemos abrir un nuevo proyecto en Visual Studio y seguimos estos
pasos:
Escoger plantilla Web
Aplicacin web vaca de ASP.NET
Poner un nombre al proyecto
Esto nos generar una solucin con un nico proyecto vaco.
Ahora procederemos a agregar 3 proyectos nuevos a la solucin y los nombraremos

CapaDatos, CapaEntidades y CapaNegocios, en todos escogeremos aplicacin web
vaca ASP.NET.
Quedando de esta forma en el explorador de soluciones:
Luego debemos agregar referencia a la librera DEBSAccesoDatos.dll, la cual la
podemos descargar desde el enlace dado al inicio del documento.
Esto lo haremos con la capa de datos y la de negocios.
Tambin debemos agregar las referencias entre capas de la siguiente manera:
Capa Entidades: Referenciada en todas las capas

Capa Datos: Referenciada en capa de negocios
Capa Negocios: Referenciada en capa de presentacin (en nuestro caso
llamada AppWebVB
Este proceso se realiza de la misma forma que la librera DEBSAccesoDatos, pero
en lugar de examinar, escogeremos la opcin SOLUCIN de la ventana de agregar
referencia, tal como lo muestro a continuacin, donde agrego la capa de Entidades y
Negocios a la capa de presentacin (AppWebVB)
Iniciamos ahora con el trabajo en la capa de entidades, creando cada una de las
entidades a utilizar.
Capa Entidades
Para entender mejor qu hace esta capa, debemos de verla como una capa intermedia
que comunica las dems capas, a como lo podemos ver en el siguiente grfico.
Por tanto, tiene la importante tarea de comunicar entre las diferentes capas.
Como ya vimos la estructura de la tabla, para la capa de Entidades, agregaremos una

clase a la capa.
El contenido de esta clase, es bsicamente una transcripcin de los campos de la
tabla (que representa la entidad) y su debido constructor, quedando de la siguiente
manera:
Esta es la forma ms bsica de crear una entidad, pero si queremos hacerlo con
todos los requerimientos, debemos ver una opcin ms completa, la dividiremos en
3 partes:
Atributos
Constructor
Propiedades
Atributos
Constructor
Propiedades
Con esto ya tenemos la entidad para la tabla Customer de la base de datos, este
proceso se debe repetir para cada tabla a procesar y as se crear una entidad.
Capa Datos
La capa de datos es la encargada servir de puente entre la capa de negocios y la

base de datos, esto ltimo se realiza por medio de la librera de DEBSAccesoDatos.
El primer paso, ser crear una clase CAD, la cual tendr la conexin con la base de
datos.
CAD
Agregaremos una clase nueva a la que le pondremos por nombre CAD (Acrnimo de
Capa de Acceso a Datos)
Una vez creada, agregar los espacios de nombres a como se indica en la figura
siguiente, ah tambin podemos ver esta clase debe heredar de DEBSAccesoDatos y
cmo vamos a construir el constructor.
Algo muy importante que debemos tomar en cuenta es la propiedad cConex, la cual
contiene la cadena de conexin a la base de datos que se utilizar, para saber cul
es la ms indicada, podemos ir al siguiente enlace
https://www.connectionstrings.com/sql-server-2012/
Luego debemos instanciar el objeto conexin a como se muestra en la figura anterior,
con esto ya tenemos cargada la librera, lista para usarse. De ac en adelante, todas
las nuevas clases que se crearn en la capa de datos, deben heredar de sta clase
recin creada (CAD).
D_Costumer
En la capa de datos es donde crearemos todos los accesos de nuestra aplicacin a
la base de datos, crearemos una clase para cada tabla (o proceso) a implementar, en
cada clase, como mnimo tendremos 4 mtodos:
GetAll(): Devolver todos los registros, en un DataSet
GetOne(): Devolver un nico registro como una instancia de la entidad
respectiva (en nuestro caso la entidad E_Customer)
Save(): Guarda los registros (insertar/actualizar).
Del(): Borrar un registro.
Esta clase, debe heredar de CAD, as como se deben importar los espacios de
nombres:
System.Data
System.Data.SQLClient
CapaEntidades
Imports System.Data
Imports System.Data.SqlClient
Imports CapaEntidades
Public Class D_Customer
Inherits CAD
End Class
Una vez que ya tenemos la vinculacin necesaria, comenzamos con los mtodos
GetAll() Devolviendo todos los registros
Public Function GetAll() As DataSet

Dim DS As DataSet = New DataSet()
Try
Dim cmd As SqlCommand = CrearComando("Customer_Get")
DS = GetDS(cmd, "Customer_Get")
Catch ex As Exception
Throw New Exception("Error Obteniendo todos los registros - " & ex.Message, ex)
End Try
Return DS
End Function
La funcionalidad es sencilla, se crea un comando al cual se le pasa el procedimiento
almacenado Customer_Get, luego se invoca al mtodo GetDS, quien se encarga de
conectarse a la base de datos, ejecutar el procedimiento almacenado y devolver un
DataSet con el resultado.
El contenido del procedimiento almacenado es utilizado para devoler uno o todos los
registros:
CREATE PROCEDURE [dbo].[Customer_Get]

@CustomerId integer = null
AS
BEGIN
IF @CustomerId IS NULL
BEGIN
--Devolver todos los registros
Select *
From SalesLT.Customer
END
ELSE
BEGIN
SELECT *
FROM SalesLT.Customer
WHERE CustomerID = @CustomerId
END
END
Si se enva el parmetro @CustomerId se devuelve ese registro (si existe) y si no se

enva, se devuelven todos los registros.
Para efectos didcticos se envan todos los campos (SELECT *), ya en produccin, se
recomienda enviar nicamente los campos a utilizar.
GetOne() Devolviendo un nico registro
Como mencion anteriormente, utilizaremos el mismo procedimiento almacenado

Customer_Get, pero en este caso le enviaremos como parmetro el id de cliente. Este
mtodo devuelve una instancia de la entidad E_Customer.
Public Function GetOne(CustomerId As Integer) As E_Customer

Dim vRes As E_Customer = New E_Customer()
Dim cmd As SqlCommand = New SqlCommand()
Try
cmd = CrearComando("Customer_Get")
cmd.Parameters.AddWithValue("@CustomerId", CustomerId)
AbrirConexion()
Dim consulta As SqlDataReader = Ejecuta_Consulta(cmd)
If consulta.Read() Then
If consulta.HasRows() Then
vRes.CustomerId = Convert.ToInt32(consulta("CustomerId"))
vRes.NameStyle = Convert.ToBoolean(consulta("NameStyle"))
vRes.Title = Convert.ToString(consulta("Title"))
vRes.FirstName = Convert.ToString(consulta("FirstName"))
vRes.MiddleName = Convert.ToString(consulta("MiddleName"))
vRes.LastName = Convert.ToString(consulta("LastName"))
vRes.Suffix = Convert.ToString(consulta("Suffix"))
vRes.CompanyName = Convert.ToString(consulta("CompanyName"))
vRes.SalesPerson = Convert.ToString(consulta("SalesPerson"))
vRes.EmailAddress = Convert.ToString(consulta("EmailAddress"))
vRes.Phone = Convert.ToString(consulta("Phone"))
vRes.PasswordHash = Convert.ToString(consulta("PasswordHash"))
vRes.PasswordSalt = Convert.ToString(consulta("PasswordSalt"))
vRes.ModifiedDate = Convert.ToDateTime(consulta("ModifiedDate"))
End If
End If
consulta.Close()
consulta = Nothing
Throw New Exception("Error Obteniendo un registro - " & ex.Message, ex)
Finally
cmd.Connection.Close()
cmd = Nothing
CerrarConexion()
End Try
Return vRes
End Function
Save() Guardar Registro (Insert/Update)

Como mencion inicialmente, este mtodo se encarga de guardar los registros, pero
en dos formas, insertando (nuevo) o actualizando (cambios) los registros, el mtodo,
utiliza el procedimiento almacenado Customer_Set, quien es el encargado de hacer la
separacin.
Public Function Save(ByVal oCustomer As E_Customer) As Integer

Dim vReg As Integer = -1

Try
cmd = CrearComando("Customer_Set")
cmd.Parameters.AddWithValue("@CustomerId", oCustomer.CustomerId)
cmd.Parameters("@CustomerId").Direction = ParameterDirection.InputOutput
cmd.Parameters.AddWithValue("@NameStyle", oCustomer.NameStyle)
cmd.Parameters.AddWithValue("@Title", oCustomer.Title)
cmd.Parameters.AddWithValue("@FirstName", oCustomer.FirstName)
cmd.Parameters.AddWithValue("@MiddleName", oCustomer.MiddleName)
cmd.Parameters.AddWithValue("@LastName", oCustomer.LastName)
cmd.Parameters.AddWithValue("@Suffix", oCustomer.Suffix)
cmd.Parameters.AddWithValue("@CompanyName", oCustomer.CompanyName)
cmd.Parameters.AddWithValue("@SalesPerson", oCustomer.SalesPerson)
cmd.Parameters.AddWithValue("@EmailAddress", oCustomer.EmailAddress)
cmd.Parameters.AddWithValue("@Phone", oCustomer.Phone)
cmd.Parameters.AddWithValue("@PasswordHash", oCustomer.PasswordHash)
cmd.Parameters.AddWithValue("@PasswordSalt", oCustomer.PasswordSalt)
AbrirConexion()
vReg = Ejecuta_Accion(cmd)
vReg = Convert.ToInt32(cmd.Parameters("@CustomerId").Value)
Throw New Exception("Error Grabando Cliente - " & ex.Message, ex)
Finally
cmd = Nothing
CerrarConexion()
End Try
Return vReg
End Function
Como podemos ver, recibe como parmetro un objeto de tipo E_Customer, que luego
es enviado como parmetro al procedimiento almacenado, cuyo contenido es el
siguiente:
CREATE PROCEDURE [dbo].[Customer_Set]

@CustomerId integer = null output,
@NameStyle bit = 0,
@Title nvarchar(8) = null,
@FirstName nvarchar(50),
@MiddleName nvarchar(50)=null,
@LastName nvarchar(50),
@Suffix nvarchar(10)=null,
@CompanyName nvarchar(128)=null,
@SalesPerson nvarchar(256) = null,
@EmailAddress nvarchar(50)= null,
@Phone nvarchar(25)=null,
@PasswordHash nvarchar(128),
@PasswordSalt nvarchar(10)
AS
BEGIN
/*Iniciamos Revisando si el registro ya existe*/
Declare @Nuevo bit = 0;
Declare @IdTmp int;
IF @CustomerId is not null

BEGIN
Select @IdTmp=CustomerId
from SalesLT.Customer
Where CustomerID = @CustomerId ;
IF @IdTmp is null
Set @Nuevo = 1;
END
BEGIN TRAN
BEGIN TRY
IF @Nuevo = 1 --Registro es nuevo
BEGIN
Insert into SalesLT.Customer
(NameStyle,Title,FirstName,MiddleName,LastName,Suffix,
CompanyName,SalesPerson,EmailAddress,Phone,
PasswordHash,PasswordSalt)
values
(@NameStyle,@Title,@FirstName,@MiddleName,@LastName,@Suffix,
@CompanyName,@SalesPerson,@EmailAddress,@Phone,
@PasswordHash,@PasswordSalt);
Set @CustomerId = @@IDENTITY;

END
ELSE
BEGIN
UPDATE SalesLT.Customer Set
NameStyle = @NameStyle,
Title = @Title,
FirstName = @FirstName,
MiddleName = @MiddleName,
LastName = @LastName,
Suffix = @Suffix,
CompanyName = @CompanyName,
SalesPerson = @SalesPerson,
EmailAddress = @EmailAddress,
Phone = @Phone,
PasswordHash = @PasswordHash,
PasswordSalt = @PasswordSalt,
ModifiedDate = GETDATE()
WHERE CustomerID = @CustomerId
END
COMMIT
END TRY
BEGIN CATCH
ROLLBACK
END CATCH
END
Este procedimiento almacenado, recibe todos los atributos de la entidad como

parmetros, pero el atributo @CustomerId es muy importante, ya que es el que se
utiliza para saber si el registro existe o no, de no existir, se procede a insertar, de
lo contrario se actualiza.
Del() Borrar Registro

Ya tenemos casi todas las operaciones CRUD, nos hace falta el eliminar, el cual lo
vamos a desarrollar ac, por su delicadeza, este mtodo nicamente elimina un
registro, por tanto, si el Id del Cliente pasado no existe, no se elimina nada.
Public Function Del(ByVal CustomerId As Integer) As Boolean
Dim vRes As Boolean = False
Dim vCant As Integer = -1
Try
cmd = CrearComando("Customer_Del")
cmd.Parameters.AddWithValue("@CustomerId", CustomerId)
AbrirConexion()
vCant = Ejecuta_Accion(cmd)
If vCant > 0 Then
vRes = True
End If
Throw New Exception("Error Eliminando Cliente - " & ex.Message, ex)
Finally
cmd = Nothing
CerrarConexion()
End Try
Return vRes
End Function
El contenido del procedimiento almacenado es:
ALTER PROCEDURE [dbo].[Customer_Del]

@CustomerId integer
AS
BEGIN
BEGIN TRAN
BEGIN TRY
DELETE FROM SalesLT.Customer WHERE CustomerID = @CustomerId;
COMMIT
END TRY
BEGIN CATCH
ROLLBACK
END CATCH
END
Con esto terminamos la capa de datos, para el objeto Customer de la Base de Datos.
Lo siguiente en este punto es, de momento, iniciar la capa de negocios.
Capa Negocio
Esta capa es la encargada de hacer el vnculo entre la capa de datos y la capa de

presentacin (UI o User Interface Interface de Usuario). Tambin ac es donde
pondremos toda la lgica de negocio, de momento lo que tendremos la invocacin de
los mtodos de la capa de Datos, los pondremos todos de una sola vez, pero primero
debemos agregar una clase nueva, la cual nombraremos N_Customer e importamos
los espacios de nombres necesarios, para que quede de la siguiente manera:
Imports System.Data
Imports CapaDatos
Public Class N_Customer

Private D_Cus As D_Customer = New D_Customer()
End Class
Podemos observar tambin que creamos un atributo de tipo D_Customer, el cual es

una instancia de la capa de datos correspondiente a Customer, esto lo hacemos para
poder reutilizarlo.
Lo que haremos ahora es el llamado a todos los mtodos de la capa de datos

correspondiente.
Imports System.Data
Imports CapaDatos
Public Class N_Customer

Private D_Cus As D_Customer = New D_Customer()
Public Function GetAll() As DataSet

Return D_Cus.GetAll()
End Function
Public Function GetOne(CustomerId As Integer) As E_Customer

Return D_Cus.GetOne(CustomerId)
End Function
Public Function Save(ByVal oCustomer As E_Customer) As Integer

Return D_Cus.Save(oCustomer)
End Function
Public Function Del(ByVal CustomerId As Integer) As Boolean

Return D_Cus.Del(CustomerId)
End Function
End Class
En esta etapa del proyecto, ya tenemos las capas que realizan todo el proceso, para
las cuales son transparentes para el usuario, a continuacin comenzaremos a trabajar
con la capa de presentacin o UI (User Interface por sus siglas en ingls), en este
punto es donde se hace la diferencia entre una aplicacin para escritorio (Desktop)
y una aplicacin Web. Las capas que tenemos hasta este momento, pueden ser
utilizadas indistintamente para ambos tipos de proyectos, a como lo pueden ver en
el curso online que se dej al inicio de este documento y tambin en la bibliografa.
Capa Presentacin
Llegamos a la etapa del proyecto que ser visible para el usuario y por tanto, es la
oportunidad de poner en prctica todo lo que vimos al inicio de este documento.
Como esto es un documento prctico, vamos directamente al proceso de creacin.
Master Page
Por tanto, vamos a agregar un nuevo elemento en la capa de presentacin, en nuestro
caso se llama AppWebVB, este elemento ser un Master Page (Pgina Maestra), para
hacer una variante del curso de programacin en capas Web.
Lo que har que se agrega una master page llamada Pagina.Master al proyecto
A nivel de cdigo, la Master Page se ve as:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Pagina.master.vb"

Inherits="AppWebVB.Pagina" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</div>
</form>
</body>
</html>
Ser en esta seccin donde pondremos las referencias a las libreras que
utilizaremos, tales como jQuery, Bootstrap o cualquier otro pluggin de jQuery. As
que antes de continuar, vamos a agregar algunos directorios a este proyecto con el
fin de ordenar la informacin que pondremos, para que quede de la siguiente forma:
En la carpata js pondremos todas las referencias a los archivos JavaScript, en css

los de hojas de estilo y en img, las imgenes.
De momento agregaremos la librera jQuery (la versin ms actual) y Boostrap, luego

en la seccin de encabezado (head) de la master page, agregaremos cada archivo.
Agregu tambin la carpeta fonts para ubicar ah cualquier fuente, de momento puse
ah las que vienen con el paquete Boostrap.
Ahora, la forma de agregar el ttulo y las referencias a la master page es la siguiente:

<!DOCTYPE html>
<title>Guía práctica para desarrollar APP Web en Capas - Por Ing.
Daniel Bojorge</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
</div>
</form>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Como pueden ver en el head se agrega los css y jQuery, al finalizar (antes del cierre
Body) ponemos la carga de la librera js de boostrap.
Web Forms
Ahora, para probar si todo bien, vamos a agregar un Formulario Web que usa Master
Page, al cual nombraremos Default.aspx, ya que no tendremos otra pgina, pero si
hubiesen ms, recomiendo nombrarla diferente.
Al dar click en agregar, nos pide indicar cul Master Page utilizar, por lo que
escogemos la nica que tenemos y que nombramos Pagina.Master.
Y esto es lo que tenemos de momento en Default.aspx:
<%@ Page Title="" Language="vb" AutoEventWireup="false"
MasterPageFile="~/Pagina.Master" CodeBehind="Default.aspx.vb"
Inherits="AppWebVB._Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
</asp:Content>
De momento nicamente agregaremos un ttulo (h1) y luego lo veremos en el

navegador.
</asp:Content>
runat="server">
<h1>Guía práctica para desarrollar APP Web en Capas - <small>Ing.
Daniel Bojorge</small> </h1>
</asp:Content>
Para compilar el proyecto, al igual que en desktop se utiliza el botn ubicado en la

parte superior, en este caso, deben escoger un navegador por defecto, en mi caso
utilic Firefox Para Desarrolladores, por una preferencia a Mozilla Firefox, ya que
sus herramientas para desarrollador me parecen muy buenas y tiles.
Con la configuracin predeterminada no deberan de tener problemas, pero si no

puede arrancar el servidor IIS, les recomiendo ir a las propiedades del proyecto y
en la seccin web, habilitar la ejecucin de una aplicacin ASP.NET, por tanto deben
habilitar (por lo menos) las opciones sealadas. En mi casa tambin debo hacer notar
que estoy utilizando un servidor web de IIS local.
Al compilar, el proyecto veremos algo como lo que muestro en la siguiente imagen:
Y como podemos ver, ya tenemos el primer vistazo a nuestra aplicacin web.
GetAll() Devolver todos los registros en un GridView
Agregaremos un GridView a nuestra pgina, tomndolo del cuadro de herramientas.
Ya en nuestra pgina, le daremos formato para que Bootstrap lo reconozca.
<asp:GridView ID="DGCustomer" runat="server" cssclass="table table-striped table-

hover dt-responsive" ></asp:GridView>
Para iniciar este GridView, iremos al cdigo de la pgina y agregaremos un mtodo

llamado IniGrd(), el cual invocar el mtodo GetAll() de la capa de negocios, pero
antes debemos agregar los espacios de nombre tanto de la capa de entidades como
la de negocio.
Con esto, ya podemos iniciar el mtodo IniGrd(). Observemos que cre un objeto
llamado oCliente, el cual es una instancia de N_Customer.
Imports CapaNegocios
Public Class _Default

Inherits System.Web.UI.Page
Dim oCliente As N_Customer = New N_Customer()

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
IniGrd()
End Sub
Public Sub IniGrd()

Try
DGCustomer.DataSource = oCliente.GetAll().Tables(0)
DGCustomer.DataBind()
DGCustomer.UseAccessibleHeader = True
DGCustomer.HeaderRow.TableSection = TableRowSection.TableHeader
Response.Write(ex.Message)
End Try
End Sub
End Class
Si ocurriese un error, ser enviado (de momento) como una impresin en pantalla al
compilar, algo as:
En este caso especfico, el error consiste en que no est iniciada ninguna instancia
del servidor, pero como podemos observar, el mensaje est justo a como se
estableci en la capa de datos.
Una vez resuelto el problema, esta sera la primera vista de nuestros datos.
Slo hay un inconveniente, aunque se muestra el dato solicitado, la tabla resultado,
se escapa de la pantalla, por lo que necesitamos que sea Responsive, sto es que se
muestre toda la informacin en la pantalla, sin necesidad de utilizar la barra de
desplazamiento horizontal.
GridView Responsive
Como vimos en la seccin de jQuery, esta biblioteca es muy potente, por tanto la
utilizaremos para hacer nuestra tabla (GridView) responsive, para esto utilizaremos
un plugin llamado DataTable para darle mejor formato, tambin la opcin Responsive,
por tanto debemos ir al sitio web https://www.datatables.net/ y bajaremos la versin
ms reciente de este plugin, de los cuales tomaremos los archivos necesarios
(marcados en esta imagen)
Luego en la pgina maestra, debemos agregar los CSS en la parte head y los .js al
final, para que quede de la siguiente manera.

<!DOCTYPE html>
<title>Guía práctica para desarrollar APP Web en Capas - Por Ing.
Daniel Bojorge</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/jquery.dataTables.min.css" />

<link rel="stylesheet" href="css/dataTables.responsive.css" />
<link rel="stylesheet" href="css/jquery.dataTables_themeroller.css" />
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
</div>
</form>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Quedando pendiente la inicializacin del plugin, lo cual lo haremos una vez que se
cargue la pgina y no en la mater page sino en Default.aspx que es donde est el
GridView, para esto, por medio de jQuery hacemos lo siguiente:
Luego en la pgina Default.aspx agregamos la inicializacin al plugin

<script type="text/javascript">
$(document).ready(function () {
$("#<%=DGCustomer.ClientId%>").DataTable({
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningn dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total
de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0
registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "ltimo",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de
manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de
manera descendente"
}
},
responsive: true
});
});
</script>
</asp:Content>
runat="server">
<h1>Guía práctica para desarrollar APP Web en Capas - <small>Ing.
Daniel Bojorge</small> </h1>
<asp:GridView ID="DGCustomer" runat="server" cssclass="table table-striped
table-hover dt-responsive" ></asp:GridView>
</asp:Content>
Pero para que funcione, debo cambiar el nombre del archivo jQuery, ya que yo puse
jquery-2.1.3.min.js, pero hago referencia en el script a jquery.min.js, as que por
motivos prcticos, quitar el nmero de versin del archivo y lo dejar como
jquery.min.js, compilo nuevamente y vemos que ahora nos sale esto en el navegador:
Y como podemos observar, ya tiene una mejor presentacin. Recomiendo ver la
pgina del plugin DataTable para tener ms conocimiento de su funcionamiento.
Una captura ms completa de lo que llevamos del proyecto es a como se ve a

continuacin:
Ventana Modal Bootstrap
En esta etapa del proyecto, har una pausa antes de pasar a consultar un registro y
modificar/eliminar, para hablar cmo debemos montar una venta Bootstrap, que es
la que utilizaremos para mostrar, eliminar y/o actualizar los datos de un cliente.
Primero vamos a agregar un botn sobre el gridview, que ser el encargado de

mostrar la ventana.
<button id="btnModal" class="btn btn-danger" data-toggle="modal" data-

target="#myModal" type="button">Agregar/Editar</button>
sto har que se vea as:
Ahora debemos agregar la ventana modal, les mostrar cmo queda ya la ventana
con todos los elementos (inputs), para esto, en la parte final (debajo del GridView)
agregaremos lo siguiente:


<div class="modal bs-example-modal-lg" id="myModal" role="dialog" data-
easein="tada" data-easeout="rollOut">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Editar/Agregar</h4>
</div>
<div class="modal-body">
<div class="input-group col-sm-12">
<div class="row">
<label for="txtCustomId" class="control-label col-
sm-2 col-md-2">Costumer ID</label>
<input type="text" class="input-control frmModal
col-sm-4 col-md-3"
name="txtCustomId" id="txtCustomId"
placeholder="# Item" runat="server" />
<label for="chkNameStyle" class="control-label col-
sm-2 col-md-2">Name Style</label>
<input type="checkbox" class="input-control col-sm-1
input-medium col-md-1"
name="chkNameStyle" id="chkNameStyle"
placeholder="" runat="server" />
<label for="txtTitle" class="control-label col-sm-1
col-md-1">Title</label>
<input type="text" class="input-control col-sm-3
input-medium col-md-3"
name="txtTitle" id="txtTitle" placeholder=""
runat="server" />
</div>
<div class="row">
<label for="txtFirstName" class="control-label col-
sm-2">First Name</label>
col-sm-4"
name="txtFirstName" id="txtFirstName"
placeholder="First Name" runat="server" />
<label for="txtMiddleName" class="control-label col-
sm-2">Middle Name</label>
col-sm-4"
name="txtMiddleName" id="txtMiddleName"
placeholder="Middle Name" runat="server" />
</div>
<div class="row">
<label for="txtLastName" class="control-label col-
sm-2">Last Name</label>
col-sm-4"
name="txtLastName" id="txtLastName"
placeholder="Last Name" runat="server" />
<label for="txtSuffix" class="control-label col-sm-
2">Suffix</label>
col-sm-4"
name="txtSuffix" id="txtSuffix"
placeholder="Suffix" runat="server" />
</div>
<div class="row">
<label for="txtCompany" class="control-label col-sm-
2">Company</label>
col-sm-4"
name="txtCompany" id="txtCompany"
placeholder="Company" runat="server" />
<label for="txtSalesPerson" class="control-label
col-sm-2">Sales Person</label>
col-sm-4"
name="txtSalesPerson" id="txtSalesPerson"
placeholder="Sales Person" runat="server" />
</div>
<div class="row">
<label for="txtEmailAddress" class="control-label
col-sm-2">Email Address</label>
col-sm-4"
name="txtEmailAddress" id="txtEmailAddress"
placeholder="txtEmailAddress" runat="server" />
<label for="txtPhone" class="control-label col-sm-
2">Phone</label>
col-sm-4"
name="txtPhone" id="txtPhone"
placeholder="Phone" runat="server" />
</div>
<div class="row">
<label for="txtPassHash" class="control-label col-
sm-2">Pass Hash</label>
col-sm-4"
name="txtPassHash" id="txtPassHash"
placeholder="Pass Hash" runat="server" />
<label for="txtPassSalt" class="control-label col-
sm-2">Pass Salt</label>
col-sm-4"
name="txtPassSalt" id="txtPassSalt"
placeholder="Pass Salt" runat="server" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Cancelar</button>
<asp:Button ID="btnGrabar" class="btn btn-primary "
runat="server" Text="Grabar" CssClass="btn btn-primary />
<button type="button" class="btn btn-danger" id="btnBorrar">
<span class="fa fa-trash-o fa-lg"></span> Borrar</button>
</div>
</div>

</div>


Con el botn que agregamos, ya l por s slo puede activar la ventana modal (ponerla
visible), ya que utiliza caractersticas de Bootstrap, por tanto al dar click sobre el
botn, se mostrar de la siguiente manera:
Algo ms que tenemos que hacer para mejorar nuestra ventana, es que cuando se
cierre, se limpien todos los controles de usuario (imputs), para esto debemos agregar
el siguiente cdigo, en la parte inferior de la inicializacin del DataTable.
$('#myModal').on('shown.bs.modal', function () {
lastfocus = $(this);
$(this).find('input:text:visible:first').focus();
})
/*Cerrando Modal*/
$('#myModal').on('hidden.bs.modal', function (e) {
$("#myModal input").val(""); //Limpiar todos los inputs

$('#myModal').hide(true);
setTimeout(function () {
$("form").submit();
}, 500);
});
Lo que hacemos con esto es que al mostrase se active el primer inputs, y luego al
cerrar, limpie todos los inputs, tambin un pequeo truco, que cuando se cierre,
vuelva a cargar la pgina, enviando el formulario. Ya con esto, casi estamos listos
para cargar un Cliente. Qu nos hace falta? Un poco de validacin, para esto, no
vamos a utilizar ningn plugin de jQuery, sino la validacin bsica de html5, para
esto, los inputs de tipo correo (email), por ejemplo, obliga a escribir una direccin
de correo vlida, los de tipo number, exige que se escriba un nmero y as
sucesivamente. Para esto, bastara con cambiar el type de los inputs de text a su
respectiva propiedad en html5, pero sucede que Visual Studio 2012, manda un error
ya que no reconoce esos tipos, pero esto se puede resolver fcilmente mediante
JavaScript o del lado del servidor.
Del lado del servidor, la solucin sera en el evento load, cambiar el type de los
inputs que deseamos de la siguiente manera:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

Handles Me.Load
If Not IsPostBack Then
txtEmailAddress.Attributes("type") = "email"
txtPhone.Attributes("type") = "phone"
txtCustomId.Attributes("type") = "number"
End If
IniGrd()
End Sub
La otra opcin es hacindolo desde el lado del cliente con JavaScript o jQuery de la
siguiente manera:
$("#<%=txtEmailAddress.ClientID%>").attr("type", "email");
$("#<%=txtPhone.ClientID%>").attr("type", "phone");
$("#<%=txtCustomId.ClientID%>").attr("type", "number");
De cualquiera de las dos formas, el resultado sera a como se muestra a continuacin,

he escrito un correo invlido en el input correspondiente al correo electrnico y
como vemos, se valida, de la misma forma con los inputs.
Ahora si ya estamos listos para cargar los datos de un cliente.
GetOne() Llamar a un nico registro
En esta seccin utilizaremos la ventana modal anterior para mostrar los datos de un
cliente al digitar su ID en el input llamado CustomerId, para tal motivo haremos dos
cosas, una del lado del servidor y la otra del lado del cliente:
Lado del Servidor: Crear un mtodo que reciba como parmetro el id del
cliente y ejecute el GetOne de la capa de negocio, ste mtodo debe ser de
tipo Method, por lo que se debe agregar el espacio de nombre
System.Web.Services para que pueda ser procesado desde el lado del cliente.
Lado del Cliente: Utilizaremos el evento KeyPress del input llamado
txtCustomerId, donde invocaremos AJAX, al cual le pasaremos el Id del input
y debe devolver en un arreglo los datos del cliente, en este punto rellenamos
cada input con el valor devuelto.
Lado del Servidor

Agregar el espacio de nombres:
Imports System.Web.Services
Luego creamos el mtodo al que llamaremos getcustomer.
<WebMethod()> _
Public Shared Function getcustomer(vcusid As String) As List(Of String)
Dim lista As List(Of String) = New List(Of String)()
Try
If Not vcusid = String.Empty Then
Dim vCustId As Integer = Convert.ToInt32(vcusid)

Dim oCustomer As E_Customer = oCliente.GetOne(vCustId)
lista.Add(Convert.ToString(oCustomer.CustomerId))
lista.Add(Convert.ToString(oCustomer.NameStyle))
lista.Add(Convert.ToString(oCustomer.Title))
lista.Add(Convert.ToString(oCustomer.FirstName))
lista.Add(Convert.ToString(oCustomer.MiddleName))
lista.Add(Convert.ToString(oCustomer.LastName))
lista.Add(Convert.ToString(oCustomer.Suffix))
lista.Add(Convert.ToString(oCustomer.CompanyName))
lista.Add(Convert.ToString(oCustomer.SalesPerson))
lista.Add(Convert.ToString(oCustomer.EmailAddress))
lista.Add(Convert.ToString(oCustomer.Phone))
lista.Add(Convert.ToString(oCustomer.PasswordHash))
lista.Add(Convert.ToString(oCustomer.PasswordSalt))
End If
lista.Add("ERROR")
lista.Add(ex.Message)
End Try
Return lista
End Function
Como vemos, se encarga de llamar al mtodo GetOne de la capa de Negocio (objeto

oCliente), ste mtodo devuelve un objeto de tipo E_Customer, la entidad que
contiene la estructura de la tabla Customer, al final slo se agregan a la lista los
valores en el orden de los campos, para poder saber qu hay en cada elemento de
la lista.
Si sucede algn error, lo que opt fue agregar como primer elemento de la lista la
palabra "ERROR" y en el segundo elemento el mensaje de error, para as poder mostrar
del lado del cliente un mensaje o notificacin al usuario.
Getcustomer es Public Shared Function esto es necesario para poder verlo desde
el lado del cliente.
Lado del Cliente

De este lado es que nos iremos a revisar el evento KeyPress del input llamado
txtCustomId tomaremos el valor escrito en dicho input, detenemos la ejecucin por
defecto () y enviamos los valores va Ajax al mtodo del lado del servidor.
El siguiente cdigo se ubicar debajo del cambio de atributo de los inputs.
$("#<%=txtCustomId.ClientID%>").on("keypress", function (e) {

if (e.keyCode === 13)
{
e.preventDefault();
var vCustId = $("#<%=txtCustomId.ClientID%>").val();
var Data = { vcusid: vCustId };
Data = JSON.stringify(Data);
//alert(Data);
$.ajax({
type: "POST",
datatype: "json",
contentType: "application/json; charset=utf-8",
url: '<%=ResolveUrl("Default.aspx")%>/getcustomer',
data: Data,
success: function (response) {
var vResp = response.d;
//alert(vResp);
var vCId = vResp[0];
var vNS = vResp[1];
var vTit = vResp[2];
var vFN = vResp[3];
var vMN = vResp[4] || "";
var vLN = vResp[5] || "";
var vSf = vResp[6] || "";
var vCo = vResp[7] || "";
var vSP = vResp[8] || "";
var vEm = vResp[9] || "";
var vPh = vResp[10] || "";
var vPa1 = vResp[11] || "";
var vPs = vResp[12] || "";
var seguir = true;
if (vCId == "ERROR" || vCId === "") {

alert(vNS);
seguir = false;
}
else {
$(this).attr("disabled", "disabled");
}
$("#<%=txtCustomId.ClientID%>").val(vCId);
$("#<%=chkNameStyle.ClientID%>").val(vNS);
$("#<%=txtTitle.ClientID%>").val(vTit);
$("#<%=txtFirstName.ClientID%>").val(vFN);
$("#<%=txtMiddleName.ClientID%>").val(vMN);
$("#<%=txtLastName.ClientID%>").val(vLN);
$("#<%=txtSuffix.ClientID%>").val(vSf);
$("#<%=txtCompany.ClientID%>").val(vCo);
$("#<%=txtSalesPerson.ClientID%>").val(vSP);
$("#<%=txtEmailAddress.ClientID%>").val(vEm);
$("#<%=txtPhone.ClientID%>").val(vPh);
$("#<%=txtPassHash.ClientID%>").val(vPa1);
$("#<%=txtPassSalt.ClientID%>").val(vPs);
if (seguir) {
$("#<%=chkNameStyle.ClientID%>").focus();
}
},
error: function(xhr,textStatus,error){
alert("Esto fall " + error);
}
});
}
});
Compilamos, cargamos la ventana y digitamos un Id de cliente, el resultado sera lo

siguiente.
Save() Grabar Datos de Cliente (Insertar/Actualizar)

Todo el proceso lo llevaremos a cabo en el botn guardar de la ventana modal, por
cuestiones didcticas, haremos todo el proceso de actualizacin del lado del
servidor, luego el eliminar un registro ser del lado del cliente, justo a como se
proces el GetOne().
Agregu una mtodo llamado mensaje, que lo utilizaremos para poder enviar un alert
al usuario desde el lado del servidor
Private Sub mensaje(msg As String)
Dim jsAlert As String = String.Format("alert('{0}');", msg)
ClientScript.RegisterStartupScript(Me.GetType(), "Alerta", jsAlert, True)
End Sub
Debemos agregar un evento click del lado del servidor para el botn btnGrabar de
la siguiente manera:
Private Sub btnGrabar_Click(sender As Object, e As EventArgs) Handles

btnGrabar.Click
Dim oCliente_Ent As E_Customer = New E_Customer() 'Crear la instancia de la
Entidad
Dim vCustId As Integer = CType(IIf((txtCustomId.Value = String.Empty),

Nothing, txtCustomId.Value), Integer)
oCliente_Ent.CustomerId = vCustId
oCliente_Ent.NameStyle = chkNameStyle.Checked
oCliente_Ent.Title = txtTitle.Value
oCliente_Ent.FirstName = txtFirstName.Value
oCliente_Ent.MiddleName = txtMiddleName.Value
oCliente_Ent.LastName = txtLastName.Value
oCliente_Ent.Suffix = txtSuffix.Value
oCliente_Ent.CompanyName = txtCompany.Value
oCliente_Ent.SalesPerson = txtSalesPerson.Value
oCliente_Ent.EmailAddress = txtEmailAddress.Value
oCliente_Ent.Phone = txtPhone.Value
oCliente_Ent.PasswordHash = txtPassHash.Value
oCliente_Ent.PasswordSalt = txtPassSalt.Value
Dim PudoRegistrar As Integer = -1 '-1 indica que no pudo grabar registro
Try
PudoRegistrar = oCliente.Save(oCliente_Ent)
PudoRegistrar = -1
mensaje(ex.Message)
End Try
If PudoRegistrar <> -1 Then

txtCustomId.Value = Convert.ToString(PudoRegistrar)
mensaje("Registros grabado Satisfactoriamente")
Else
mensaje("Hubo un error grabando datos")
End If
IniGrd()
End Sub
De esta forma, ya podremos modificar o agregar un registro, como vimos en la capa

de datos, el procedimiento almacenado recibe todos los campos (atributos) y mira
qu hay en el Id del cliente, si ese ID no existe lo agrega, si existe, lo actualiza, as
que ac lo que haremos es NO escribir nada en el input de Id del cliente.
Del() Eliminar Registros
Para terminar las operaciones CRUD (Crear, Leer, Actualizar, Borrar por sus siglas
en Ingls), nos hace falta el borrar un registro, el cual lo haremos llamando un
WebMethod del lado del cliente, pero bien se podra hacer del lado del servidor toda
la operacin completa.
Para esto, iniciamos creando el webmethod.
<WebMethod> _
Public Shared Function borrar(ByVal vcust As String) As String
Dim vReturn As String = "0"
Dim vCustId As Integer = Convert.ToInt32(IIf((vcust = String.Empty), "0",

vcust))
Try
If oCliente.Del(vCustId) Then
vReturn = "OK"
Else
vReturn = "Error Eliminando Registro"
End If
vReturn = "Error Eliminando Registros - " + ex.Message
End Try
Return vReturn
End Function
Ahora, del lado del cliente, tendremos el evento Click del botn btnBorrar:
$("#btnBorrar").on("click", function (e) {

var vCustId = $("#<%=txtCustomId.ClientID%>").val();
if (vCustId === "") {

alert("No ha seleccionado Id a borrar");
return false;
}
if (!confirm("Procede a eliminar un registro. Continuar?")) {
return false;
}
var Data = { vcust: vCustId };

Data = JSON.stringify(Data);
$.ajax({
type: "POST",
datatype: "json",
contentType: "application/json; charset=utf-8",
url: '<%=ResolveUrl("Default.aspx")%>/borrar',
data: Data,
success: function (response) {
var vResp = response.d;
if (vResp === "OK") {
alert("Registro eliminado satisfactoriamente");
$('#myModal').modal('hide'); //Cerrar Ventana Modal
}
else {
alert(vResp);
}
},
error: function (xhr, txtStatus, error) {
alert("Error del lado del cliente " + error);
}
});
});
La ejecucin de esta accin sera algo as:
Como hemos podido ver, no es tan complicado realizar una aplicacin web con Visual
Studio (Visual Basic), SQL Server, jQuery, Bootstrap y la librera DEBSAccesoDatos.
6. Conclusin
A lo largo de este documento has podido ir viendo cmo se puede armar una
aplicacin web, espero que te sea de utilidad.
S que este documento no est completo, falta profundizar en varios aspectos, por
eso te dejo en la bibliografa la mayora de las fuentes que tuve para escribir. Te
recomiendo mucho que repases mucho esos enlaces.
Cualquier duda o sugerencia, la puedes hacer llegar a mi red social:

Dbojorge.com
Facebook.com/debsconsultores
Debsconsultores.blogspot.com
Youtube.com/user/debsdaniel03
Estar muy feliz de tener tu retro alimentacin. Dios te Bendiga
7. Bibliografa
Apuntes propios
Cursos online:
o http://goo.gl/Qq4h9q - Curso Programacin en Capas para App
Desktop.
o http://goo.gl/dzEr6i - Curso Programacin en Capas para App Web.
Libro:
o Fundamentos jQuery Rebecca Murphey
o HTML5 and JavaScript Projects Jeanine Meyer (2011)
Web:
o http://librosweb.es/libro/javascript/
o http://www.w3schools.com/js
o https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia
o http://hardcoders.mx/
o http://librojquery.com/
o https://librosweb.es/libro/bootstrap_3/
o http://www.javascriptya.com.ar/
o http://www.codeproject.com/Articles/21115/Building-an-N-Tier-
Application-in-VB-NET-in-Step
o https://tydw.wordpress.com/2008/08/14/asp-net-como-crear-una-
aplicacion-de-3-capas-con-entidades-1ra-parte/

GuÃ A PrÃ¡ctica para Elaborar Una AplicaciÃ N Web en Capas

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

GuÃ A PrÃ¡ctica para Elaborar Una AplicaciÃ N Web en Capas

Caricato da

Copyright:

Formati disponibili

Gua Prctica para elaboracin de una aplicacin Web

Tratar en lo mayor posible de que este documento sea sencillo y prctico,

No pretendo hacer una gua definitiva para el desarrollo de aplicaciones web, ni

La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en

Adems, permite distribuir el trabajo de creacin de una aplicacin por niveles; de

En el diseo de sistemas informticos actual se suelen usar las arquitecturas

Adicionalmente, necesitaremos la librera de acceso a datos elaborada por mi

Tcnicamente, JavaScript es un lenguaje de programacin interpretado, por lo que

A pesar de su nombre, JavaScript no guarda ninguna relacin directa con el lenguaje

Aadir JavaScript a una Pgina

Adems, cuando se trabaja en un ambiente de produccin con mltiples archivos

Ejemplo de cdigo JavaScript en lnea

Ejemplo de inclusin de un archivo externo JavaScript

Las variables en JavaScript se crean mediante la palabra reservada var.

Sin embargo, las siguientes variables tienen identificadores incorrectos:

Declaracin simple de variable

Los espacios en blanco no tienen valor fuera de las comillas

Los parntesis indican agrupacin y prioridad en las operaciones

Operaciones con Nmeros y Cadenas de Caracteres

El operador || (OR lgico) devuelve el valor del primer operando, si ste es

Los operadores de comparacin permiten comprobar si determinados valores son

Al igual que en la mayor parte de los lenguajes de programacin, en JavaScript

Una declaracin bsica de un arreglo sera

Algunas operaciones que podemos hacer con arreglos:

Funciones como constructores

El cdigo de la aplicacin es mucho ms largo porque muchas instrucciones

Declaracin de una funcin nombrada

Por su forma de uso, es recomendable utilizar lo ms posibles funciones nombradas.

Utilizacin de las funciones

Funcin que no devuelve valor

Son tiles para procesar algn tipo de informacin.

Funciones Annimas Autoejecutables

Este tipo de estructura pueden codificarse de varias formas, pero la ms popular es

Por supuesto que podemos enviarle parmetros a funciones autoejecutables los

La palabra clave this

En JavaScript, as como en la mayora de los lenguajes de programacin orientados

jQuery es software libre y de cdigo abierto, posee un doble licenciamiento bajo la

Las empresas Microsoft y Nokia anunciaron que incluirn la biblioteca en sus

jQuery consiste en un nico fichero JavaScript que contiene las funcionalidades

La caracterstica principal de la biblioteca es que permite cambiar el contenido de

Antes de iniciar, se recomienda tener la ltima versin estable de jQuery, para el da

Entra al sitio oficial (http://jquery.com)

En este punto, te sugiero descargar la versin comprimida (Download the

Pero te recomiendo utilizar otro CDN, ms abajo en la misma pgina de descarga te

Y en lo sucesivo, asumiremos que ya tens cargado esta librera en la seccin HEAD

La librera jQuery en resumen nos aporta las siguientes ventajas:

Existe una forma abreviada para $(document).ready() la cual podr encontrar

A continuacin se muestran algunas tcnicas comunes para la seleccin de

Selector por ID (#)

Selector por clase (.)

Selector por tipo de elemento

Navegacin por nodos

Navegando del hijo al padre (parent)

Buscando el primer predecesor (closest)

.next(), .nextAll(), .prev(), .prevAll()

Vamos a ver un ejemplo (tomado de la web oficial de jQuery):

Lo que hace es encontrar el hermano inmediatamente posterior de cada button con

Trabajar con Selecciones

Por otro lado, si se est escribiendo un encadenamiento de mtodos que incluyen

Obtenedores (Getters) & Establecedores (Setters)

Los mtodos establecedores devuelven un objeto jQuery, permitiendo continuar con

Para ms detalles sobre los eventos en jQuery, puede

Vamos a ver algunos ejemplos simples: