Guía Práctica para Elaborar Una Aplicación Web en Capas PDF

Guía Práctica para elaboración de una aplicación Web
Módulo II
Presentación........................................................................................................................................ 5
Introducción ........................................................................................................................................ 6
Objetivos ............................................................................................................................................. 7
Objetivo General ............................................................................................................................. 7
Objetivos Específicos ....................................................................................................................... 7
1. JavaScript..................................................................................................................................... 7
Añadir JavaScript a una Página ....................................................................................................... 7
Sintaxis Básica ................................................................................................................................. 8
Operadores.................................................................................................................................. 9
Operadores Básicos ........................................................................................... 9
Operaciones con Números y Cadenas de Caracteres .................................... 10
Operadores Lógicos......................................................................................... 10
Código 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
Declaración ................................................................................................................................ 17
Declaración de una función nombrada ..................................................................................... 17
Utilización de las funciones ....................................................................................................... 17
Desarrollo de una aplicación web en capas. Elaborado por Ing. Daniel Bojorge Sequeira 2 / 94
facebook.com/debsconsultores ● youtube.com/user/debsdaniel03 ● debsconsultores.blogspot.com
Función que no devuelve valor ....................................................................... 17
Función que devuelve un valor ....................................................................... 18
Funciones Anónimas Autoejecutables ...................................................................................... 18
La palabra clave this ...................................................................................................................... 18
Function.call .............................................................................................................................. 19
Function.bind ............................................................................................................................ 19
2. jQuery ........................................................................................................................................ 19
Uso ................................................................................................................................................ 20
$(document).ready() ..................................................................................................................... 22
$(function().................................................................................................................................... 22
Selección de Elementos................................................................................................................. 23
Selector por ID (#) ..................................................................................................................... 23
Selector por clase (.) .................................................................................................................. 23
Selector por tipo de elemento .................................................................................................. 23
Navegación 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
Distribución Básica ........................................................................................................................ 35
Plantilla Sencilla............................................................................................................................. 35
Diseñando con rejilla ..................................................................................................................... 36
Preparando la página ................................................................................................................ 36
Tipos de rejillas.............................................................................................................................. 37
Características de cada rejilla .................................................................................................... 37
Ejemplo básico de rejilla con Bootstrap .................................................................................... 38
Tipografía básicas .......................................................................................................................... 39
Encabezados (h) ........................................................................................................................ 39
Clases CSS .................................................................................................................................. 40
Clases CSS para alinear texto......................................................................... 40
Tablas ............................................................................................................................................ 41
Tablas Responsive ..................................................................................................................... 41
Imágenes ....................................................................................................................................... 42
Formularios ................................................................................................................................... 43
Formulario Básico...................................................................................................................... 43
Campos de Formularios ............................................................................................................ 44
Inputs ............................................................................................................... 44
Botones ..................................................................................................................................... 44
4. DLL DEBS Acceso a Datos .......................................................................................................... 45
Contenido ...................................................................................................................................... 46
Ejemplo.......................................................................................................................................... 46
5. Programación 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 Presentación......................................................................................................................... 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. Conclusión ................................................................................................................................. 93
7. Bibliografía ................................................................................................................................ 93
Presentación
Este documento está elaborado con el objetivo de presentar de manera práctica los
pasos para elaborar una aplicación web, basada en programación en capas. Para
esto último me basaré en una dll que realiza el procesamiento con la base de datos,
la cual es de libre distribución y la he nombrado DEBSAccesoDatos.dll (Al final link
para su descarga).
Trataré en lo mayor posible de que este documento sea sencillo y práctico,

obviamente que para una práctica debe existir un pequeño extracto teórico. Por tal
motivo, cada capítulo estará precedido de un poco de teoría, principalmente en los
temas como JavaScript, jQuery y Bootstrap.
No pretendo hacer una guía definitiva para el desarrollo de aplicaciones web, ni

tampoco la más 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 están acortados por medio del
servicio bit.ly o goo.gl, para poder mostrar texto corto y de fácil copiado.
Gracias por tomarte el tiempo de leer este documento, espero que te sea de utilidad
Introducción
La programación por capas es una arquitectura cliente-servidor en el que el objetivo
primordial es la separación de la lógica de negocios de la lógica de diseño; un ejemplo
básico de esto consiste en separar la capa de datos de la capa de presentación 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 algún cambio, solo se ataca al nivel
requerido sin tener que revisar entre código mezclado. Un buen ejemplo de este
método de programación sería el modelo de interconexión de sistemas abiertos.
Además, permite distribuir el trabajo de creación de una aplicación por niveles; de

este modo, cada grupo de trabajo está totalmente abstraído del resto de niveles, de
forma que basta con conocer la API que existe entre niveles.
En el diseño de sistemas informáticos actual se suelen usar las arquitecturas

multinivel o Programación por capas. En dichas arquitecturas a cada nivel se le confía
una misión simple, lo que permite el diseño de arquitecturas escalables (que pueden
ampliarse con facilidad en caso de que las necesidades aumenten).
En el caso específico que nos atañe, haremos una aplicación a partir de la base de
datos de ejemplo de Microsoft® llamada (Adventure Works en su versión lite) de
libre distribución, la cual puedes descargar desde el sitio oficial
(http://bit.ly/1cNJOwx).
Adicionalmente, necesitaremos la librería de acceso a datos elaborada por mi

persona, también de libre distribución, la cual la podemos descargar desde
http://bit.ly/1G9do9B, contiene un ejemplo del funcionamiento de dicha librería.
Como un recurso adicional, recomiendo mucho ver dos cursos que hice y están
publicados en mi canal de YouTube (@debsdaniel03), los links de la lista de
reproducción son:
1. Curso programación en capas, para una aplicación Desktop:
http://goo.gl/Qq4h9q.
2. Curso programación en capas, para una aplicación Web, en este curso se
reutilizan las capas del proyecto anterior: http://goo.gl/dzEr6i
Una vez hecho lo anterior, te será mucho más fácil entender lo que veremos a
continuación
Para descargar la librería DEBSAccesoSQL.dll, ir a este enlace
http://bit.ly/dlldebsacceso luego de descargar el archivo, dentro viene
un proyecto pequeño de ejemplo e indicaciones de cómo utilizar la librería.
Objetivos
Objetivo General
 Transmitir el conocimiento necesario a los alumnos para la elaboración de
una aplicación web en capas, utilizando como herramientas Visual Studio
2012, jQuery, JavaScript, Bootstrap y la librería DEBSAccesoDatos.
Objetivos Específicos
 Enseñar elementos básicos de JavaScript y jQuery, como lenguajes del lado
del cliente, para una aplicación web.
 Introducir conceptos básicos para manejo de elementos Responsive mediante
Bootstrap.
 Mostrar los métodos contenidos en la librería DEBS Acceso Datos.
 Dar a conocer conceptos de programación en capas, por medio de un ejemplo
práctico.
1. JavaScript
JavaScript es un lenguaje de programación que se utiliza principalmente para crear
páginas web dinámicas.
Una página web dinámica 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.
Técnicamente, JavaScript es un lenguaje de programación 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 relación directa con el lenguaje

de programación Java. Legalmente, JavaScript es una marca registrada de la empresa
Sun Microsystems, como se puede ver en http://www.sun.com/suntrademarks/
Añadir JavaScript a una Página
Existen dos formas de insertar código JavaScript dentro de una página: escribiendo
código en la misma (en inglés inline) o a través de un archivo externo utilizando la
etiqueta script. El orden en el cual se incluye el código es importante: un código que
depende de otro debe ser incluido después del que referencia (Ejemplo: Si la función
B depende de A, el orden debe ser A,B y no B,A).
Para mejorar el rendimiento de la página, el código JavaScript debe ser incluido al
final del HTML.
Además, cuando se trabaja en un ambiente de producción con múltiples archivos

JavaScript, éstos deben ser combinados en un solo archivo.
Ejemplo de código JavaScript en línea
Ejemplo de inclusión de un archivo externo JavaScript
Sintaxis Básica
Las variables en los lenguajes de programación siguen una lógica similar a las
variables utilizadas en otros ámbitos como las matemáticas. Una variable es un
elemento que se emplea para almacenar y hacer referencia a otro valor. Gracias a
las variables es posible crear "programas genéricos", es decir, programas que
funcionan siempre igual independientemente de los valores concretos utilizados.
De la misma forma que si en Matemáticas no existieran las variables no se podrían
definir las ecuaciones y fórmulas, en programación no se podrían 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 también se conoce como identificador y debe cumplir las
siguientes normas:
 Sólo puede estar formado por letras, números y los símbolos $ (dólar)
y _ (guión bajo).
 El primer carácter no puede ser un número.
 Por tanto, las siguientes variables tienen nombres correctos:
Sin embargo, las siguientes variables tienen identificadores incorrectos:
Declaración simple de variable
Los espacios en blanco no tienen valor fuera de las comillas
Los paréntesis indican agrupación y prioridad en las operaciones
La tabulación mejora la lectura del código, pero no posee ningún significado especial
Operadores
Los operadores permiten manipular el valor de las variables, realizar operaciones
matemáticas con sus valores y comparar diferentes variables. De esta forma, los
operadores permiten a los programas realizar cálculos complejos y tomar decisiones
lógicas en función de comparaciones y otros tipos de condiciones.
Operadores Básicos
Los operadores básicos permiten manipular valores
Concatenación
Multiplicación y división
Operaciones con Números y Cadenas de Caracteres

En JavaScript, las operaciones con números y cadenas de caracteres (en inglés
strings) pueden ocasionar resultados no esperados.
Suma vs Concatenación
Forzar a una cadena de caracteres actuar como un número, tenemos varias opciones,
una es utilizar el constructor Number, que cuando es llamado como función obliga
al argumento a comportarse como un número. La otra opción es utilizar el operador
de suma unitaria (+), entregando el mismo resultado:
Operadores Lógicos
Operadores Lógicos AND y OR
El operador || (OR lógico) 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 lógico) 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 lógica no es igual a otros lenguajes de programación,
pero una vez dominado es muy útil.
Operadores de comparación
Los operadores de comparación permiten comprobar si determinados valores son

equivalentes o idénticos.
Código Condicional
A veces se desea ejecutar un bloque de código bajo ciertas condiciones. Las
estructuras de control de flujo — a través de la utilización de las declaraciones if y
else permiten hacerlo
Control de Flujo
Bucles
Permiten ejecutar un bloque de código un determinado número de veces
Bucle For
Bucle For – In
Bucle While
Bucke Do-While
Break y Continue
Break
Usualmente, el fin de la ejecución de un bucle resultará cuando la condición no siga
evaluando un valor verdadero, sin embargo también es posible parar un bucle
utilizando la declaración break dentro del cuerpo.
Continue
Termina la ejecución de las sentencias de la iteración actual del bucle actual o la
etiqueta y continua la ejecución del bucle con la próxima iteración.
Arreglos (Arrays)
Los arreglos (en inglés arrays) son listas de valores con índice-cero (en inglés zero-
index), es decir, que el primer elemento del arreglo está en el índice 0. Éstos son
una forma práctica de almacenar un conjunto de datos relacionados (como cadenas
de caracteres), aunque en realidad, un arreglo puede incluir múltiples tipos de datos,
incluso otros arreglos.
Al igual que en la mayor parte de los lenguajes de programación, en JavaScript

podemos trabajar con arrays (también 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 declaración básica de un arreglo sería
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 válidas y sirven para
cumplir diversos propósitos. Javascript está basado en prototipos y no en clases
(como Java o C#).
Objetos Simples
La forma más simple de crear un objeto es instanciar un objeto de tipo Object y
agregarle las propiedades y métodos dinámicamente:
Objetos Literales
Nota Aclaratoria: usar objetos literales no significa usar JSON, JSON es una notación
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 información que se
codifica con un formato similar al definido para los objetos literales. (Gracias a
Alberto Ávila por esta aclaración 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 están definidos que tome un valor por default usando
el operador || .
Funciones
Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra vez
las mismas instrucciones. Un script para una tienda de comercio electrónico por
ejemplo, tiene que calcular el precio total de los productos varias veces, para añadir
los impuestos y los gastos de envío.
Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado
el código fuente de la aplicación, ya que:
 El código de la aplicación es mucho más largo porque muchas instrucciones

están repetidas.
 Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer
tantas modificaciones como veces se haya escrito esa instrucción, lo que se
convierte en un trabajo muy pesado y muy propenso a cometer errores.
Las funciones son la solución a todos estos problemas, tanto en JavaScript como en
el resto de lenguajes de programación. Una función es un conjunto de instrucciones
que se agrupan para realizar una tarea concreta y que se pueden reutilizar
fácilmente.
Declaración
Declaración de una función nombrada
Por su forma de uso, es recomendable utilizar lo más posibles funciones nombradas.
Utilización de las funciones

Como vimos en la sección de objetos, se construyó un “constructor”, el cual no es
más que una función.
En esta ocasión veremos dos tipos de funciones, las que no devuelven valor y las
que sí lo hacen. En POO, esto se llamaría procedimientos y métodos,
respectivamente.
Función que no devuelve valor
Son útiles para procesar algún tipo de información.
Función que devuelve un valor
Funciones Anónimas Autoejecutables

Un patrón común en JavaScript son las funciones anónimas autoejecutables. Este
patrón consiste en crear una expresión de función 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 función es visible
desde afuera.
Este tipo de estructura pueden codificarse de varias formas, pero la más popular es
la siguiente:
Por supuesto que podemos enviarle parámetros a funciones autoejecutables los

cuales irían dentro los paréntesis finales, por ejemplo:
La palabra clave this
En JavaScript, así como en la mayoría de los lenguajes de programación orientados

a objetos, this es una palabra clave especial que hace referencia al objeto en donde
el método está siendo invocado. El valor de this es determinado utilizando una serie
de simples pasos:
1. Si la función es invocada utilizando Function.call o Function.apply, this tendrá
el valor del primer argumento pasado al método. Si el argumento es nulo (null)
o indefinido (undefined), this hará referencia el objeto global (el objeto
window);
2. Si la función a invocar es creada utilizando Function.bind, this será el primer
argumento que es pasado a la función en el momento en que se la crea;
3. Si la función es invocada como un método de un objeto, this referenciará a
dicho objeto;
4. De lo contrario, si la función es invocada como una función independiente, no
unida a algún 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 interacción con
la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp
NYC. jQuery es la biblioteca de JavaScript más utilizada.1
jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la

Licencia MIT y la Licencia Pública 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 requerirían de mucho
más código, 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 incluirán la biblioteca en sus

plataformas.3 Microsoft la añadirá 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 característica principal de la biblioteca es que permite cambiar el contenido de

una página web sin necesidad de recargarla, mediante la manipulación del árbol DOM
y peticiones AJAX. Para ello utiliza las funciones $() o jQuery() .
Antes de iniciar, se recomienda tener la última versión estable de jQuery, para el día
de la edición de este documento, la última versión estable era la 2.1.3.
Entra al sitio oficial (http://jquery.com)
Al escoger la opción Download jQuery, te llevará a otra ventana donde escogerás
entre la versión 1.x o la 2.x, básicamente la diferencia es el ya casi extinto Internet
Explorer, a cómo puedes notar en la siguiente imagen que resalté el comentario.
En este punto, te sugiero descargar la versión comprimida (Download the

compressed production…), que te bajará un archivo algo así, jQuery 2.x.min.js, es
igual a la versión sin comprimir, pero éste está hecho para que la carga del mismo
sea más ágil, sino tienes pensado revisar u ojear el núcleo de jQuery, entonces mejor
quedarnos con la versión 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 sólo lo utilizaremos, jQuery recomienda esta forma
Pero te recomiendo utilizar otro CDN, más abajo en la misma página de descarga te
indica varios, entre los más comunes está el CDN de google.
Pero nosotros descargamos la librería, por tanto, el uso que le daremos será cargarlo
desde nuestro servidor, así que la carga será igual que las anteriores, pero con una
dirección relativa desde el documento que haga la invocación hasta el lugar donde
esté en nuestro servidor la librería jQuery, para nuestro caso, la librería está ubicada
en el mismo directorio del archivo que lo invoca, por tanto ponemos así:
Y en lo sucesivo, asumiremos que ya tenés cargado esta librería en la sección HEAD

del documento HTML.
La librería jQuery en resumen nos aporta las siguientes ventajas:

 Nos ahorra muchas líneas de código.
 Nos hace transparente el soporte de nuestra aplicación 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 página en
forma muy sencilla.
 Integra funcionalidades para trabajar con AJAX.
$(document).ready()
No es posible interactuar de forma segura con el contenido de una página hasta que
el documento no se encuentre preparado para su manipulación. jQuery permite
detectar dicho estado a través de la declaración $(document).ready() de forma tal que
el bloque se ejecutará sólo una vez que la página 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 código para gente que no conoce jQuery.
Selección de Elementos
El concepto más básico de jQuery es el de “seleccionar algunos elementos y realizar
acciones con ellos”. La biblioteca soporta gran parte de los selectores CSS3 y varios
más no estandarizados. En http://api.jquery.com/category/selectors/ se puede
encontrar una completa referencia sobre los selectores de la biblioteca.
A continuación se muestran algunas técnicas comunes para la selección de

elementos:
Selector por ID (#)

Recordemos que la asignación 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 acción, podemos
llamarlos por su clase
Selector por tipo de elemento
Navegación por nodos

Recordemos que una página web XHTML, es un XML, y los XML tienen nodos,
atributos e hijos, por ejemplo tenemos un div y éste dentro contiene 4 imágenes,
¿cómo le digo que quiero acceder únicamente a ese div, y obtener las 4 imágenes?.
Una manera sencilla seria declarar 4 ID para las imágenes y problema resuelto ¿no?,
pero hagamos lo siguiente declaremos un ID para nuestro DIV, y a las imágenes
Otra forma podría ser haciendo una referencia, pasaríamos 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
imágenes más existen dentro de su posición actual.
Como son 4 imágenes, 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 hipervínculo 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 hipervínculo, y con parent le
decimos que busque a su contenedor de esto, con eso llegamos al div, se pueden
hacer múltiples parents hasta llegar a las etiquetas BODY
Buscando el primer predecesor (closest)

Este método 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 relación con los elementos
previamente seleccionados (como los que encuentran descendientes, antecesores o
hermanos de una selección anterior, por ejemplo)
.next(), .nextAll(), .prev(), .prevAll()
Estos métodos son bastante sencillos. Por ejemplo, si quisiéramos seleccionar sólo
el elemento único siguiente hermano de cada elemento previamente seleccionado,
utilizaríamos .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 botón está desactivado”:
Si quisiéramos seleccionar todos los hermanos que siguen al elemento seleccionado
utilizaríamos .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 selección de los elementos, es posible utilizarlos en conjunto
con diferentes métodos. éstos, generalmente, son de dos tipos: obtenedores (en
inglés getters) y establecedores (en inglés setters). Los métodos obtenedores
devuelven una propiedad del elemento seleccionado; mientras que los métodos
establecedores fijan una propiedad a todos los elementos seleccionados.
Encadenamiento
Si en una selección se realiza una llamada a un método, y éste devuelve un objeto
jQuery, es posible seguir un “encadenado” de métodos en el objeto.
Por otro lado, si se está escribiendo un encadenamiento de métodos que incluyen

muchos pasos, es posible escribirlos línea por línea, haciendo que el código luzca
más agradable para leer.
Si desea volver a la selección original en el medio del encadenado, jQuery ofrece el
método $.fn.end para poder hacerlo.
Obtenedores (Getters) & Establecedores (Setters)

jQuery “sobrecarga” sus métodos, en otras palabras, el método para establecer un
valor posee el mismo nombre que el método para obtener un valor. Cuando un
método es utilizado para establecer un valor, es llamado método establecedor (en
inglés setter). En cambio, cuando un método es utilizado para obtener (o leer) un
valor, es llamado obtenedor (en inglés getter).
Los métodos establecedores devuelven un objeto jQuery, permitiendo continuar con

la llamada de más métodos en la misma selección, mientras que los métodos
obtenedores devuelven el valor por el cual se consultó, pero no permiten seguir
llamando a más métodos en dicho valor.
Eventos y Modificadores
jQuery provee métodos para asociar controladores de eventos (en inglés event
handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada.
Dentro de la función, la palabra clave this hace referencia al elemento en que el
evento ocurre.
Para más detalles sobre los eventos en jQuery, puede

consultar http://api.jquery.com/category/events/.
La función 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 más 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 algún 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
parámetro.
 attr (key, value) podemos modificar los atributos de un elemento, o capturar
su valor actual, para capturar su valor no ingresamos el segundo parámetro.
 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 después de que el
documento ha sido cargado.
Ejemplo: supongamos que el siguiente botón fue creado con código JavaScript,
después de cargar el documento, es decir hicieron un
.html('<button id="mi_boton2"></button>')
si asignáramos un evento sin on, no podríamos hacer nada, ya que no existe, pero
con on si
AJAX
El método XMLHttpRequest (XHR) permite a los navegadores comunicarse con el
servidor sin la necesidad de recargar la página. Este método, también conocido como
Ajax (Asynchronous JavaScript and XML), permite la creación de aplicaciones ricas
en interactividad.
Las peticiones Ajax son ejecutadas por el código JavaScript, el cual envía una
petición a una URL y cuando recibe una respuesta, una función de devolución puede
ser ejecutada la cual recibe como argumento la respuesta del servidor y realiza algo
con ella. Debido a que la respuesta es asíncrona, el resto del código de la aplicación
continua ejecutándose, por lo cual, es imperativo que una función de devolución sea
ejecutada para manejar la respuesta.
A través de varios métodos, jQuery provee soporte para Ajax, permitiendo abstraer
las diferencias que pueden existir entre navegadores. Los métodos en cuestión
son $.get(), $.getScript(), $.getJSON(), $.post() y$().load().
A pesar que la definición de Ajax posee la palabra “XML”, la mayoría de las

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

excepciones, como los servicios que proveen información en formato JSONP ( JSON
with Padding), los cuales permiten una funcionalidad limitada a través de diferentes
dominios.
¿Qué es AJAX?
Es una técnica para aplicaciones web que permite realizar una consulta al servidor,
este puede ser síncrona (esperamos una respuesta) o asíncrona (no esperamos
respuesta), y existen diversas forma para manipular la información obtenida por ajax,
ya sea como texto plano, xml, o json la que más recomiendo es trabajar usando json.
Pueden tener más información consultando el enlace de Wikipedia
http://es.wikipedia.org/wiki/AJAX
¿Por qué usar JSON?

Porque es más liviana que XML, y permite obtener más información que un texto
plano.
$.get, $.post, $.ajax
 $.get (url, parámetros, callback, tipo) realiza una petición XHR al servidor a
través de la URL, método GET
 $.post (url, parámetros, callback, tipo) realiza una petición XHR por debajo del
servidor, método POST
 $.ajax: Debes si quieres trabajar con post, get, que tipo de encabezado enviar,
recibir, en caso de que la petición se murió que hacer, etc.
El siguiente ejemplo, es algo de lo que se verá en la sección de capas, como puedes

ver, la función Ajax, se introdujo en un evento click de un botón, el objetivo es
eliminar un registro, la lógica o lo que se pide que haga está en el parámetro url y
como es una modificación (invasiva), se utiliza el tipo POST.
Hay muchas cosas más 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 están elaborando su diseño 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
tamaño del dispositivo en el que se visualice de forma nativa, es decir,
automáticamente se adapta al tamaño de un ordenador o de una Tablet sin que el
usuario tenga que hacer nada, esto se denomina diseño adaptativo o Responsive
Design y está muy de moda.
Sus características principales son:

 Sencillo y ligero
o Puede bastar con un archivo CSS y uno JavaScript
 Basado en los últimos estándares de desarrollo Web
o HTML5, CSS3 y JavaScript/JQuery
 Plugins de jQuery para validar entrada de datos, visualización tablas, grafos,
etc.
 Curva de aprendizaje baja
 Compatible con todos los navegadores habituales
 Arquitectura basada en LESS
 Reset CSS basado en Normalize.css
 Código abierto
o Publicado en 2011 con licencia Apache
Existen varias formas diferentes de empezar con Bootstrap, cada una orientada a un
tipo de público en función de su nivel técnico. Sigue leyendo para conocer cuál de
estas opciones se ajusta mejor a tus necesidades.
 Descargar el código CSS y JavaScript compilado, que es la forma más sencilla

de empezar a utilizar Bootstrap. La desventaja es que esta versión no incluye
ni los archivos originales ni la documentación. Para descargar esta versión,
accede a getbootstrap.com y pulsa el botón Download Bootstrap.
 Descargar el código 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 configuración. Descarga la versión más
reciente en el sitio github.com/twbs/bootstrap/releases.
 Descargar el código fuente en formato Sass, se trata de una variante de la
versión anterior y que se ha creado para facilitar la integración de Bootstrap
en las aplicaciones Ruby On Rails, Compass o cualquier otro proyecto basado
en Sass. Descarga la versión más reciente en el sitio
github.com/twbs/bootstrap-sass/releases.
Distribución Básica
Plantilla Sencilla
Diseñando con rejilla
Preparando la página
Antes de comenzar a diseñar el layout o estructura de contenidos de las páginas, 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 páginas con
el siguiente código:
Bootstrap 2 incluía algunas utilidades para hacer que las páginas se adaptaran a los
dispositivos móviles. Bootstrap 3 se ha creado desde cero pensando en los móviles.
Así que en vez de incluir algunos estilos opcionales para móviles, todo eso ya está
incluido en el propio Bootstrap. Por eso nos gusta decir que para Bootstrap 3, los
dispositivos móviles son lo más importante.
Para que las páginas se muestren correctamente y el zoom funcione bien en los
dispositivos móviles, es importante que añadas la siguiente etiqueta dentro de la
cabecera <head> de las páginas:
Tipos de rejillas
Bootstrap incluye una rejila o retícula fluída pensada para móviles y que cumple con
el diseño webresponsive. Esta retícula crece hasta 12 columnas a medida que crece
el tamaño de la pantalla del dispositivo. Bootstrap incluye clases CSS para utilizar la
rejilla directamente en tus diseños y también define mixins de LESS para que puedas
crear diseños más semánticos.
El diseño de páginas 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 sólo
deberían contener como hijos elementos de tipo columna.
 Bootstrap define muchas clases CSS (como por ejemplo .row y .col-xs-4)
para crear rejillas rápidamente. También existen mixins de Less para crear
diseños más semánticos.
 La separación entre columnas se realiza aplicando padding. Para contrarrestar
sus efectos en la primera y última columnas, las filas (elementos .row) aplican
márgenes negativos.
 Las columnas de la rejilla definen su anchura especificando cuántas de las 12
columnas de la fila ocupan. Si por ejemplo quieres dividir una fila en tres
columnas iguales, utilizarías la clase .col-xs-4 (el 4 indica que cada columna
ocupa 4 de las 12 columnas en las que se divide cada fila).
Características de cada rejilla

La siguiente tabla muestra las características de la rejilla de Bootstrap en los
diferentes tipos de dispositivos.
Ejemplo básico de rejilla con Bootstrap
El siguiente ejemplo muestra cómo crear una rejilla con las clases .col-md-*. En los
dispositivos móviles (extra pequeño o pequeño) esta rejilla se muestra verticalmente,
pero en un ordenador (medio o grande) se ve horizontalmente.
Que da como resultado:
Tipografía básicas
Los estilos relacionados con la tipografía y el texto de los contenidos son esenciales
en cualquier framework CSS. Por esa razón, 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
páginas, 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 más detalles, que los puedes ver en http://librosweb.es/libro/bootstrap_3
Tablas
Añade la clase .table a cualquier elemento <table> para aplicar los estilos básicos
de Bootstrap 3 para tablas. El resultado es una tabla con un padding muy sutil y con
líneas de separación solamente en las filas.
Puede parecer absurdo tener que añadir 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 solución que propone Bootstrap 3 para crear tablas responsive que se vean bien
en dispositivos pequeños consiste en añadir 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:
Imágenes
Bootstrap 3 define varias clases CSS para decorar las imágenes de tus sitios web:
 .img-rounded, añade unas pequeñas 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 fotografías de las antiguas cámaras instantáneas.
Añade además una breve animación para hacer que la imagen aparezca al
cargar la página.
 .img-circle, convierte la imagen en un círculo aplicando el estilo border-
radius: 50%
Ejemplo:
Formularios
Los formularios son uno de los elementos más importantes de los sitios y
aplicaciones web. Por eso Bootstrap 3 permite diseñar formularios con aspectos muy
variados y define decenas de estilos para todos los campos de formulario.
Formulario Básico
Bootstrap 3 aplica por defecto algunos estilos a todos los componentes de los
formularios. Si además añades 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 más 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 más elementos para trabajar con Bootstrap, pero hemos visto lo más básico. 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 librería que utilizaremos para poder llevar a buen
puerto nuestra aplicación.
DEBS Acceso Datos es una librería freeware, de libre distribución elaborada por mi
persona (Daniel Bojorge) con el fin de hacer más 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 librería.
Para una mejor comprensión, recomiendo y aconsejo entrar a YouTube y ver todo
este video, donde explico a mayor detalle el funcionamiento de esta librería.
http://goo.gl/vfhSPG
Contenido
La librería consta de 2 propiedades y 6 métodos:

 Propiedades:
o cConex: Contiene la cadena de conexión a la base de datos
o conexión: Objeto de tipo SqlConnection, al cual se le pasa cConex.
 Métodos:
o AbrirConexion(): Abre una conexión con la base de datos
o CerrarConexion(): Cierra la conexión 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 sección (capítulo), abordaremos más de la librería, ya que iniciaremos
el proyecto de ejemplo, donde aplicaremos todos los métodos.
5. Programación en Capas
La programación por capas es una arquitectura cliente-servidor en el que el objetivo
primordial es la separación de la lógica de negocios de la lógica de diseño; un ejemplo
básico de esto consiste en separar la capa de datos de la capa de presentación 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 algún cambio, solo se ataca al nivel
requerido sin tener que revisar entre código mezclado. Un buen ejemplo de este
método de programación sería el modelo de interconexión de sistemas abiertos.
Además, permite distribuir el trabajo de creación de una aplicación por niveles; de

este modo, cada grupo de trabajo está totalmente abstraído del resto de niveles, de
forma que basta con conocer la API que existe entre niveles.
En el diseño de sistemas informáticos actual se suelen usar las arquitecturas

multinivel o Programación por capas. En dichas arquitecturas a cada nivel se le confía
una misión simple, lo que permite el diseño de arquitecturas escalables (que pueden
ampliarse con facilidad en caso de que las necesidades aumenten).
En las siguientes secciones, iré explicando con un ejemplo práctico el proceso de

programación en capas. Trabajaremos un total de 4 (cuatro) capas, las cuales son:
 Capa de Datos
 Capa de Entidades
 Capa de Negocio
 Capa de Presentación
La aplicación que haremos, será del control de clientes, utilizando la base de datos
Adventure Works en su versión 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
 Aplicación web vacía de ASP.NET
 Poner un nombre al proyecto
Esto nos generará una solución con un único proyecto vacío.
Ahora procederemos a agregar 3 proyectos nuevos a la solución y los nombraremos

CapaDatos, CapaEntidades y CapaNegocios, en todos escogeremos aplicación web
vacía ASP.NET.
Quedando de esta forma en el explorador de soluciones:
Luego debemos agregar referencia a la librería 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.
También 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 presentación (en nuestro caso
llamada AppWebVB
Este proceso se realiza de la misma forma que la librería DEBSAccesoDatos, pero
en lugar de examinar, escogeremos la opción SOLUCIÓN de la ventana de agregar
referencia, tal como lo muestro a continuación, donde agrego la capa de Entidades y
Negocios a la capa de presentación (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 demás capas, a como lo podemos ver en el siguiente gráfico.
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 básicamente una “transcripción” de los campos de la
tabla (que representa la entidad) y su debido constructor, quedando de la siguiente
manera:
Esta es la forma más básica de crear una entidad, pero si queremos hacerlo con
todos los requerimientos, debemos ver una opción más 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 librería de DEBSAccesoDatos.
El primer paso, será crear una clase CAD, la cual tendrá la conexión con la base de
datos.
CAD
Agregaremos una clase nueva a la que le pondremos por nombre CAD (Acrónimo de
Capa de Acceso a Datos)
Una vez creada, agregar los espacios de nombres a como se indica en la figura
siguiente, ahí también podemos ver esta clase debe heredar de DEBSAccesoDatos y
cómo vamos a construir el constructor.
Algo muy importante que debemos tomar en cuenta es la propiedad cConex, la cual
contiene la cadena de conexión a la base de datos que se utilizará, para saber cuál
es la más indicada, podemos ir al siguiente enlace
https://www.connectionstrings.com/sql-server-2012/
Luego debemos instanciar el objeto conexión a como se muestra en la figura anterior,
con esto ya tenemos cargada la librería, lista para usarse. De acá en adelante, todas
las nuevas clases que se crearán en la capa de datos, deben heredar de ésta clase
recién creada (CAD).
D_Costumer
En la capa de datos es donde crearemos todos los accesos de nuestra aplicación a
la base de datos, crearemos una clase para cada tabla (o proceso) a implementar, en
cada clase, como mínimo tendremos 4 métodos:
 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 vinculación necesaria, comenzamos con los métodos
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 método 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 envía el parámetro @CustomerId se devuelve ese registro (si existe) y si no se

envía, se devuelven todos los registros.
Para efectos didácticos se envían todos los campos (SELECT *), ya en producción, 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 parámetro el id de cliente. Este
método 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 método se encarga de guardar los registros, pero
en dos formas, insertando (nuevo) o actualizando (cambios) los registros, el método,
utiliza el procedimiento almacenado Customer_Set, quien es el encargado de hacer la
separación.
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 parámetro un objeto de tipo E_Customer, que luego
es enviado como parámetro 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

parámetros, 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 método ú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 vínculo entre la capa de datos y la capa de

presentación (UI o User Interface – Interface de Usuario). También acá es donde
pondremos toda la lógica de negocio, de momento lo que tendremos la invocación de
los métodos 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 también 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 métodos 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 continuación comenzaremos a trabajar
con la capa de presentación o UI (User Interface por sus siglas en inglés), en este
punto es donde se hace la diferencia entre una aplicación para escritorio (Desktop)
y una aplicación 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 también en la bibliografía.
Capa Presentación
Llegamos a la etapa del proyecto que será visible para el usuario y por tanto, es la
oportunidad de poner en práctica todo lo que vimos al inicio de este documento.
Como esto es un documento práctico, vamos directamente al proceso de creación.
Master Page
Por tanto, vamos a agregar un nuevo elemento en la capa de presentación, en nuestro
caso se llama AppWebVB, este elemento será un Master Page (Página Maestra), para
hacer una variante del curso de programación en capas Web.
Lo que hará que se agrega una master page llamada Pagina.Master al proyecto
A nivel de código, 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 sección donde pondremos las referencias a las librerías 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 información 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 imágenes.
De momento agregaremos la librería jQuery (la versión más actual) y Boostrap, luego
en la sección de encabezado (head) de la master page, agregaremos cada archivo.
Agregué también 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 título 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 librería 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 página, pero si
hubiesen más, recomiendo nombrarla diferente.
Al dar click en agregar, nos pide indicar cuál 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 título (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 botón 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 configuración predeterminada no deberían de tener problemas, pero si no

puede arrancar el servidor IIS, les recomiendo ir a las propiedades del proyecto y
en la sección web, habilitar la ejecución de una aplicación ASP.NET, por tanto deben
habilitar (por lo menos) las opciones señaladas. En mi casa también 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 aplicación web.
GetAll() – Devolver todos los registros en un GridView
Agregaremos un GridView a nuestra página, tomándolo del cuadro de herramientas.
Ya en nuestra página, 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 código de la página y agregaremos un método

llamado IniGrd(), el cual invocará el método 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 método 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 impresión en pantalla al
compilar, algo así:
En este caso específico, 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 sería la primera vista de nuestros datos.
Sólo 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 información en la pantalla, sin necesidad de utilizar la barra de
desplazamiento horizontal.
GridView Responsive
Como vimos en la sección 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, también la opción Responsive,
por tanto debemos ir al sitio web https://www.datatables.net/ y bajaremos la versión
más reciente de este plugin, de los cuales tomaremos los archivos necesarios
(marcados en esta imagen)
Luego en la página 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 inicialización del plugin, lo cual lo haremos una vez que se
cargue la página 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 página Default.aspx agregamos la inicialización 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": "Ningún 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 prácticos, quitaré el número de versión 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 presentación. Recomiendo ver la
página del plugin DataTable para tener más conocimiento de su funcionamiento.
Una captura más completa de lo que llevamos del proyecto es a como se ve a

continuación:
Ventana Modal Bootstrap
En esta etapa del proyecto, haré una pausa antes de pasar a consultar un registro y
modificar/eliminar, para hablar cómo 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 botón 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é cómo 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 botón que agregamos, ya él por sí sólo puede activar la ventana modal (ponerla
visible), ya que utiliza características de Bootstrap, por tanto al dar click sobre el
botón, se mostrará de la siguiente manera:
Algo más 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 código, en la parte inferior de la inicialización 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, también un pequeño truco, que cuando se cierre,
vuelva a cargar la página, enviando el formulario. Ya con esto, casi estamos listos
para cargar un Cliente. ¿Qué nos hace falta? Un poco de validación, para esto, no
vamos a utilizar ningún plugin de jQuery, sino la validación básica de html5, para
esto, los inputs de tipo correo (email), por ejemplo, obliga a escribir una dirección
de correo válida, los de tipo number, exige que se escriba un número y así
sucesivamente. Para esto, bastaría 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 fácilmente mediante
JavaScript o del lado del servidor.
Del lado del servidor, la solución sería 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 opción es haciéndolo 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 sería a como se muestra a continuación,

he escrito un correo inválido en el input correspondiente al correo electrónico 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 sección 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 método que reciba como parámetro el id del
cliente y ejecute el GetOne de la capa de negocio, éste método 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 método 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 método GetOne de la capa de Negocio (objeto

oCliente), éste método devuelve un objeto de tipo E_Customer, la entidad que
contiene la estructura de la tabla Customer, al final sólo 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 algún 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 notificación 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 ejecución por
defecto () y enviamos los valores vía Ajax al método del lado del servidor.
El siguiente código 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 sería lo

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

Todo el proceso lo llevaremos a cabo en el botón guardar de la ventana modal, por
cuestiones didácticas, haremos todo el proceso de actualización del lado del
servidor, luego el eliminar un registro será del lado del cliente, justo a como se
procesó el GetOne().
Agregué una método 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 botón 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 Inglés), nos hace falta el borrar un registro, el cual lo haremos llamando un
WebMethod del lado del cliente, pero bien se podría hacer del lado del servidor toda
la operación 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 botón 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 ejecución de esta acción sería algo así:
Como hemos podido ver, no es tan complicado realizar una aplicación web con Visual
Studio (Visual Basic), SQL Server, jQuery, Bootstrap y la librería DEBSAccesoDatos.
6. Conclusión
A lo largo de este documento has podido ir viendo cómo se puede armar una
aplicación 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 bibliografía la mayoría 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 alimentación. Dios te Bendiga
7. Bibliografía
 Apuntes propios
 Cursos online:
o http://goo.gl/Qq4h9q - Curso Programación en Capas para App
Desktop.
o http://goo.gl/dzEr6i - Curso Programación 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 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guía Práctica para Elaborar Una Aplicación Web en Capas PDF

Cargado por

Copyright:

Formatos disponibles

Guía Práctica para elaboración de una aplicación Web

Trataré en lo mayor posible de que este documento sea sencillo y práctico,

No pretendo hacer una guía definitiva para el desarrollo de aplicaciones web, ni

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

Además, permite distribuir el trabajo de creación de una aplicación por niveles; de

En el diseño de sistemas informáticos actual se suelen usar las arquitecturas

Adicionalmente, necesitaremos la librería de acceso a datos elaborada por mi

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que

A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje

Añadir JavaScript a una Página

Además, cuando se trabaja en un ambiente de producción con múltiples archivos

Ejemplo de código JavaScript en línea

Ejemplo de inclusión de un archivo externo JavaScript

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

Sin embargo, las siguientes variables tienen identificadores incorrectos:

Declaración simple de variable

Los espacios en blanco no tienen valor fuera de las comillas

Los paréntesis indican agrupación y prioridad en las operaciones

Operaciones con Números y Cadenas de Caracteres

El operador || (OR lógico) devuelve el valor del primer operando, si éste es

Los operadores de comparación permiten comprobar si determinados valores son

Al igual que en la mayor parte de los lenguajes de programación, en JavaScript

Una declaración básica de un arreglo sería

Algunas operaciones que podemos hacer con arreglos:

Funciones como constructores

 El código de la aplicación es mucho más largo porque muchas instrucciones

Declaración de una función nombrada

Por su forma de uso, es recomendable utilizar lo más posibles funciones nombradas.

Utilización de las funciones

Función que no devuelve valor

Son útiles para procesar algún tipo de información.

Funciones Anónimas Autoejecutables

Por supuesto que podemos enviarle parámetros a funciones autoejecutables los

La palabra clave this

En JavaScript, así como en la mayoría de los lenguajes de programación orientados

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la

Las empresas Microsoft y Nokia anunciaron que incluirán la biblioteca en sus

jQuery consiste en un único fichero JavaScript que contiene las funcionalidades

La característica principal de la biblioteca es que permite cambiar el contenido de

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

En este punto, te sugiero descargar la versión comprimida (Download the

Y en lo sucesivo, asumiremos que ya tenés cargado esta librería en la sección HEAD

La librería jQuery en resumen nos aporta las siguientes ventajas:

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

A continuación se muestran algunas técnicas comunes para la selección de

Selector por ID (#)

Selector por clase (.)

Selector por tipo de elemento

Navegación 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 métodos que incluyen

Obtenedores (Getters) & Establecedores (Setters)

Los métodos establecedores devuelven un objeto jQuery, permitiendo continuar con

Para más detalles sobre los eventos en jQuery, puede

Vamos a ver algunos ejemplos simples:

Sucede cuando el mouse se posiciona, sale de un elemento, en lugar de declarar por

css, attr, val, text, html

 css (key, value) podemos modificar las propiedades css de un elemento, o