Manual de Desarrollo Servicio Web I

Desarrollo de
Servicio Web I
DESARROLLO DE SERVICIO WEB I 2
CIBERTEC CARRERAS PROFESIONALES

ÍNDICE
Presentación 5
Red de contenidos 7
Unidad I: INTRODUCCION AL DESARROLLO WEB
1.1 : ASP.NET MVC 11
1.1.1 : Plataforma ASP.NET MVC 12
1.1.2 : Controladores 13
1.1.3 : URL de Enrutamiento 13
1.1.4 : Implementando acciones (POST/GET) 14
1.1.5 : Vistas 15
1.1.6 : Sintaxis Razor y Scaffolding 16
1.1.7 : ViewData yViewBag 17
Unidad II: TRABAJANDO CON DATOS EN ASP.NET MVC
2.1 : Recuperando datos desde un origen de datos en ADO.NET 31
2.1.1 : ADO.NET, arquitectura y proveedores 31
2.1.2 : Manejo de la cadena de conexión de un origen de datos: 34
ConfigurationManager
2.1.3 : Clase DataReader, métodos y propiedades 35
2.1.4 : Paginación de los datos recuperados 36
2.2 : Manipulación de datos desde un origen de datos en ADO.NET 53
2.2.1 : Operaciones de actualización sobre un origen de datos: Clase 53
Command
2.2.2 : Clase Command, métodos y propiedades 53
2.2.3 : Uso de la clase File y HttpPostFile para la actualización de 56
datos e imágenes
2.2.4 : Manejo de transacciones: Clase Transaction 57
Unidad III: IMPLEMENTANDO E-COMMERCE EN ASP.NET MVC
3.1 : Implementando una aplicación e-commerce 81

3.1.1 : Proceso E-Commerce 82

3.1.2 : Manejando el objeto Session 83
3.1.3 : Implementando el proceso del e-commerce (carrito de 84
compras)
Unidad IV: CONSUMO DE SERVICIOS
4.1 : Implementación y consumo de servicios WCF 107
4.1.1 : Introducción a los servicios WCF 107
4.1.2 : Servicio WCF 108
4.1.3 : Implementando un servicio WCF con acceso a datos 110
4.2 : Implementación y consumo de servicios WEB API 135
4.2.1 : Web API y el modelo MVC 135
4.2.2 : Verbos HTTP y convención para la implementación de 135

servicios Web
4.2.3 : Implementacion consumo de servicios Web API desde una 136
aplicación Web con acceso a datos
Unidad V: TRABAJANDO CON ANGULAR EN ASP.NETMVC
5.1 : AngularJS 157

5.1.1 : Introducción a Angular 157
5.1.2 : Integrando Angular en ASP.NET MVC 158
5.1.3 : Interacción con una base de datos y Angular 161

PRESENTACIÓN
Visual Studio 2015 y su plataforma .NET FrameWork permite implementar

desarrollos de software de manera rápida y robusta. ASP .NET, tanto en Web
Form como en MVC, admiten crear aplicaciones en tiempo mínimo bajo una
plataforma de librerías del .NET Framework. De esta manera, la aplicación
puede desarrollarse para entornos web y, luego, tener la posibilidad de emplear
cualquier dispositivo como cliente (Smartphone, Tablets, etc.) con muy poca
modificación.
El curso de Desarrollo de Servicio Web I pertenece a la Escuela de

Tecnología de Información y se dicta en las carreras de Tecnología de la
institución. Este curso brinda un conjunto de herramientas de programación
para trabajar en aplicaciones web, en función al diseño de páginas web y con
un origen de datos que permita al alumno realizar, en forma eficiente,
operaciones de consulta y actualización de datos bajo el entorno web.
El manual para este curso ha sido diseñado bajo la modalidad de unidades de

aprendizaje, las que desarrollamos durante semanas determinadas. En cada
una de ellas, el alumno hallará los logros que se deberá alcanzar al final de la
unidad; el tema tratado, el cual será ampliamente desarrollado; y los contenidos
que debe desarrollar. Por último, encontrará las actividades y trabajos prácticos
que deberá desarrollar en cada sesión, los que le permitirá reforzar lo
aprendido en la clase.
El curso es eminentemente práctico, consiste en un taller de programación con

Visual Studio y el Framework de MVC. En la primera parte del curso se
desarrollan aplicaciones Web ASP.NET MVC, acceso a datos utilizando las
clases ADO.NET y el uso del motor de renderizado Razor, implementación un
caso práctico web orientado a los negocios E-Commerce.
En la segunda parte del curso se profundiza el uso servicios para el acceso a
los datos: WCF, Web API REST FULL, etc. Finalmente, en la tercera parte del
curso se ve el uso del JavaScript en aplicaciones web utilizando un framework
llamado Angular.
Este manual reviste importancia para una capacitación en conocimientos

generales en el manejo de aplicaciones web, utilizando la tecnología de punta
que se implementa actualmente en el mercado.


REDDECONTENIDOS
Desarrollo de Servicio Web I
Introducci Trabajando Implementa Consumo Trabajando

ón al con datos ndo e- de con
desarrollo en commerce Servicios Angular en
Web ASP.NET en ASP.NET
MVC ASP.NET MVC
MVC
Recuperan Manipulan Implement Implement

ASP.Net
do datos do datos ando y ando y
MVC
desde un desde un consumo consumo
origen de origen de de de
datos en datos en servicios servicios
ADO.NET ADO.NET WCF WEB API
Implement AngularJS
ando una
aplicación
e-
commerce


UNIDAD DE
APRENDIZAJE
INTRODUCCION AL
DESARROLLO WEB
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, el alumno desarrolla interfaces de usuario para una aplicación

Web utilizando el patrón de diseño MVC.
TEMARIO
Tema 1.1: Introducción a ASP.NET MVC (3 horas)

1.1.1. Plataforma ASP.NET MVC
1.1.2. Controladores
1.1.3. URL de enrutamiento
1.1.4. Implementando acciones (POST/GET)
1.1.5. Vistas
1.1.6. Sintaxis Razor y Scaffolding
1.1.7. ViewData y ViewBag
ACTIVIDADES PROPUESTAS
 Los alumnos implementan un proyecto web utilizando en patrón de diseño

Modelo Vista Controlador.
 Los alumnos desarrollan los laboratorios de esta semana


1. INTRODUCCIÓN AL DESARROLLO WEB

1.1 ASP.NET MVC
ASP.NET MVC es una implementación reciente de la arquitectura Modelo-Vista-
Controlador sobre la base ya existente del Framework ASP.NET otorgándonos de esta
manera un sin fin de funciones que son parte del ecosistema del Framework .NET.
Además que nos permite el uso de lenguajes de programación robustos como C#,
Visual Basic .NET.
ASP.NET MVC nace como una opción para hacer frente al ya consagrado y alabado
Ruby on Rails un framework que procura hacer uso de buenas practicas de
programación como la integración de Unit tests o la separación clara de ocupaciones,
dándonos casi todos los beneficios otorgados por Ruby on Rails y sumando el gran y
prolijo arsenal proporcionado por .NET.
Entre las características más destacables de ASP.NET MVC tenemos las siguientes:
- Uso del patrón Modelo-Vista-Controlador.

- Facilidad para el uso de Unit Tests.
- Uso correcto de estándares Web y REST.
- Sistema eficiente de routing de links.
- Control a fondo del HTML generado.
- Uso de las mejores partes de ASP.NET.
- Es Open Source.
La siguiente figura muestra los principales componentes de su arquitectura:
Figura: 1
Ref: https://jjestruch.wordpress.com/2012/02/21/arquitectura-ddd-domain-driven-design-asp-net-
mvc/
¿ASP.NET MVC es mejor que ASP.NET Web Form?

Esta pregunta se responde fácilmente, ASP.NET MVC lo deberíamos usar cuando
tengamos que hacer un Software que sea de gran envergadura y en donde la
mantenibilidad y escalabilidad sean factores primordiales, en contraste deberíamos de

usar ASP.NET web form cuando hagamos aplicaciones simples donde el factor
primordial sea el tiempo.
El marco ASP.NET MVC ofrece las siguientes ventajas:

 Esto hace que sea más fácil de gestionar la complejidad de dividir una aplicación en
el modelo, la vista y el controlador.
 No utiliza el estado de vista o formas basadas en servidor. Esto hace que el marco
idóneo MVC para los desarrolladores que quieren un control total sobre el
comportamiento de una aplicación.
 Utiliza un patrón Front Controller que procesa las solicitudes de aplicaciones web a
través de un solo controlador. Esto le permite diseñar una aplicación que es
compatible con una rica infraestructura de enrutamiento.
 Proporciona un mejor soporte para el desarrollo guiado por pruebas (TDD).
 Funciona bien para las aplicaciones web que son apoyados por grandes equipos de
desarrolladores y diseñadores web que necesitan un alto grado de control sobre el
comportamiento de la aplicación.
El marco de trabajo basado en formularios Web ofrece las siguientes ventajas:

 Es compatible con un modelo de eventos que conserva el estado a través de
HTTP, lo que beneficia el desarrollo de aplicaciones Web de línea de negocio. La
aplicación basada en formularios Web ofrece decenas de eventos que se admiten
en cientos de controles de servidor.
 Utiliza un patrón Controlador Página que añade funcionalidad a las páginas
individuales.
 Utiliza el estado de vista sobre las formas basadas en servidor, que puede hacer la
gestión de la información de estado más fácil.
 Funciona bien para pequeños equipos de desarrolladores web y diseñadores que
quieren aprovechar el gran número de componentes disponibles para el desarrollo
rápido de aplicaciones.
 En general, es menos complejo para el desarrollo de aplicaciones, ya que los
componentes (la clase de página, controles, etc.) son fuertemente integrado y por
lo general requieren menos código que el modelo MVC.
1.1.1 Plataforma de ASP.NET MVC
ASP.NET MVC es la plataforma de desarrollo web de Microsoft basada en el conocido

patrón Modelo-Vista-Controlador. Está incluida en Visual Studio y aporta interesantes
características a la colección de herramientas del programador Web.
Referencia: http://codigobase.com/el-porque-del-mvc-modelo-vista-controlador

Su arquitectura permite separar las responsabilidades de una aplicación Web en partes

diferenciadas y ofrece diversos beneficios como siguientes:
 Facilidad de mantenimiento
 Facilidad para realizar testeo unitario y desarrollo orientado a pruebas.
 URLs limpias, fáciles de recordar y adecuadas para buscadores.
 Control absoluto sobre el HTML resultante generado, con la posibilidad de crear
webs "responsive" usando plantillas del framework Bootstrap de forma nativa.
 Potente integración con jQuery y otras bibliotecas JavaScript.
 Magnífico rendimiento y escalabilidad
 Gran extensibilidad y flexibilidad
1.1.2. Controladores
El marco de ASP.NET MVC asigna direcciones URL a las clases a las que se hace
referencia como controladores. Los controladores procesan solicitudes entrantes,
controlan los datos proporcionados por el usuario y las interacciones y ejecutan la
lógica de la aplicación adecuada. Normalmente, una clase controlador llama a un
componente de vista independiente para generar el marcado HTML para la solicitud.
La clase Controller hereda de ControllerBase y es la implementación predeterminada

de un controlador. Esta clase es responsable de las fases del procesamiento
siguientes:
 Localizar el método de acción adecuado para llamar y validar que se le puede

llamar.
 Obtener los valores para utilizar como argumentos del método de acción.
 Controlar todos los errores que se puedan producir durante la ejecución del método
de acción.
 Proporcionar la clase WebFormViewEngine predeterminada para representar los
tipos de página ASP.NET (vistas).
Todas las clases de controlador deben llevar el sufijo "Controller" en su nombre. En el

ejemplo siguiente, se muestra la clase de controlador de ejemplo que se denomina
HomeController. Esta clase de controlador contiene métodos de acción que
representan las páginas de vista.
1.1.3. URL de Enrutamiento
Por defecto, cuando cree una aplicación ASP.NET MVC, se define una tabla de
enrutamiento que se encarga de decidir qué controlador gestiona cada petición Web
basándose en la URL de dicha petición. Esta forma de enrutamiento presenta dos
grandes ventajas con respecto a las aplicaciones tradicionales de ASP.NET:

En cada petición URL, no se asigna un archivo físico del disco como una página .aspx,
sino que se asigna una acción de un controlador (más un parámetro), que nos muestra
una vista específica.
Las rutas son lógicas, es decir, siguen la estructura definida en la tabla de

enrutamiento, lo que favorece y facilita la gestión de la navegación en nuestro sitio.
La tabla de enrutamiento que se genera por defecto al crear una aplicación ASP.NET
MVC, la cual se encuentra en archivo RouteConfig.cs de la carpeta App_Start.
1.1.4. Implementando acciones (POST/GET)
El uso de POST equivale al uso de formularios HTML. La principal diferencia entre

enviar datos vía POST o vía GET (es decir usando la URL, ya sea a través de
querystring, o en valores de ruta) es que con POST los datos circulan en el cuerpo de la
petición y no son visibles en la URL.
Cuando se envíe el formulario vía POST, puede obtener los datos y realizar
operaciones. La realidad es que una acción puede estar implementada por un solo
método por cada verbo HTTP, eso significa que para la misma acción (por lo tanto, la
misma URL) puedo tener dos métodos en el controlador: uno que se invoque a través
de GET y otro que se invoque a través de POST. Así pues, puede añadir el siguiente
método a nuestro controlador.

1.1.5. Vistas
En el modelo Model-View-Controller (MVC), las vistas están pensadas exclusivamente

para encapsular la lógica de presentación. No deben contener lógica de aplicación ni
código de recuperación de base de datos. El controlador debe administrar toda la lógica
de aplicación. Una vista representa la interfaz de usuario adecuada usando los datos
que recibe del controlador. Estos datos se pasan a una vista desde un método de
acción de controlador usando el método View.
Las vistas en MVC ofrecen tres características adicionales de las cuales se puede
especificar: Create a strongly-typed view, Create as a parcial view y Use a layout or
master page
 Creación de Vistas de Tipado Fuerte: Esta casilla se selecciona cuando la vista va

a estar relacionada a un Modelo y este objeto debe ser un parámetro de la acción
en el controlador.
 Creación de Vistas Parciales: Cuando es necesario reutilizar código HTLM en
diferentes partes del proyecto, se crea una vista de este tipo. Por ejemplo, el menú
debe estar presente en gran parte de la aplicación, esta vista sería parcial y solo se
crearía una sola vez. Para crear una vista parcial, se debe nombrar de la siguiente
forma:
_NombreVistaParcial, la nombre se le debe anteponer el símbolo “_”. Ejemplo
_LoginPartial.cshtml ubicado en la carpeta /Views/Shared.
 Usar como Plantilla o Pagina Maestra: Es una vista genérica de toda la aplicación,
es la que contendrá el llamado a los archivo JS y CSS.
Las vistas de este tipo deben cumplir con la misma regla para llamar el archivo, al
nombre se le debe anteponer el símbolo “_”.
El llamado dinámico de las vistas por el Controlador se realiza por medio de la
función RenderBody().

1.1.6. Sintaxis Razor y Scaffolding
Razor es una sintaxis basada en C# que permite usarse como motor de programación
en las vistas o plantillas de nuestros controladores. No es el único motor para trabajar
con ASP.NET MVC. Entre los motores disponibles destaco los más conocidos: Spark,
NHaml, Brail, StringTemplate o NVelocity, algunos de ellos son conversiones de otros
lenguajes de programación. En Razor, el símbolo de la arroba (@) marca el inicio de
código de servidor.
El uso de la @ funciona de dos maneras básicas:
 @expresión: Renderiza la expresión en el navegador. Así @item.Nombre muestra

el valor de ítem.Nombre.
 @{ código }: Permite ejecutar un código que no genera salida HTML.
Scaffolding implica la creación de plantillas a través de los elementos del proyecto a

través de un método automatizado.
Los scaffolds generan páginas que se pueden usar y por las que se puede navegar,
es decir, implica la construcción de páginas CRUD. Los resultados que se aplica es
ofrecer una funcionalidad limitada.
La técnica scaffolding es un proceso de un solo sentido. No es posible volver a aplicar

la técnica scaffolding en los controladores y las vistas para reflejar un modelo sin
sobrescribir los cambios. Por lo tanto, se debe evaluar los módulos que se han
personalizado para saber a qué modelos se les puede volver a aplicar la técnica
scaffolding y a cuáles no.
Cuando tiene la clase del modelo listo, Scaffolding y la Vista permite realizar CRUD
(Create, Read, Update, Delete) operaciones. Todo lo que necesita hacer es seleccionar
la plantilla scafold y el modelo de datos para generar los métodos de acción que se
implementarán en el controlador.

1.1.7. ViewData y ViewBag
El ViewData es un objeto del tipo diccionario (clave – valor) que no requiere

instanciarse. En este modelo se pueden pasar datos desde el controlador a la vista, a
través de una clase diccionario “ViewDataDictionary”
El ViewBag es muy parecido a el ViewData, es un objeto tipo clave – valor, pero se le

asigna de manera diferente. En este modelo, no ser requiere ser casteados.
El ViewModel permite para pasar información de una acción de un controlador a una

vista. Esta propiedad Model no funciona como las anteriores, sino que lo que se pasa
es un objeto, que se manda de la acción hacia la vista.
Cuando se usa Model para acceder a los datos, en lugar de ViewData o ViewBag,
defina en la primera línea, @model. Esa línea le indica al framework de que tipo es el
objeto que la vista recibe del controlador (es decir, de que tipo es la propiedad Model).
A diferencia de ViewData y ViewBag que existen tanto en el controlador como en la

vista, el controlador no tiene una propiedad Model. En su lugar, se usa una sobrecarga
del método View() y se manda el objeto como parámetro

Laboratorio 1.1
Creando una aplicación ASP.NET MVC
Implemente un proyecto ASP.NET MVC aplicando el patrón arquitectónico MVC donde permita
crear una página de inicio de un sitio web.
Creando el proyecto
Iniciamos Visual Studio 2019 y creamos un nuevo proyecto:
1. Seleccionar el proyecto Web Visual Studio 2019, selecciona la opción CREAR UN
PROYECTO
Selecciona
2. Selecciona en el Tipo de Lenguaje: C#, el tipo de plataforma: Windows y el tipo de

proyecto Web. A partir de allí selecciona aplicación ASP.NET (.NET Framework),
presiona el botón Siguiente.
Selecciona

3. A continuación, ingrese el nombre del proyecto y su ubicación, tal como se

encuentra. Presiona el botón CREAR
Nombre y ubicación
del proyecto
4. Para finalizar, selecciona el patrón MVC, tal como se muestra. Presiona el botón
CREAR
Selecciona MVC

Agregando la carpeta imágenes

En el explorador de soluciones, agregar una carpeta Nueva, llamada imágenes. En
dicha carpeta agregar los archivos de imágenes: jpg.
Crear carpeta y agregar

archivos
Agregando Hojas de Estilo css

Para brindar un mejor estilo a la vista, agregamos, en la carpeta Content, una hoja de
estilo llamada estilos.css, tal como se muestra la figura.
Crear archivo estilos.css

A continuación definimos estilos a las etiquetas que utilizará las páginas cshtml.
Agregando archivo Script js

Para programar la página principal.cshtml, agregamos, en la carpeta Script, un archivo
librería.js, tal como se muestra la figura
Crear archivo librería.js

A continuación visualizamos el contenido del archivo js, donde programamos la clase

.itmenu en el evento hover.
Trabajando con el _Layout

Abrir la pagina _Layout, para realizar el diseño de la página maestra.
Primero agregamos un link para enlazarnos al archivo estilo.css, y agregamos el link
script para librería.js, tal como se muestra
Agregar archivo estilos.css
Agregar el archivo
librería.js

En el body del _Layout, diseña los bloques <header> y <nav> la cual se visualizará en
todas las páginas que utilicen esta pagina maestra. Guardar los cambios efectuados en
el archivo.
Bloque <header>
Bloque <nav>
Bloque Render
Bloque <footer>, el cual

está divido en dos
bloques <div>
Agregando un Controlador al Proyecto

A continuación agregamos el controlador: En la carpeta Controllers, selecciona la
opción Agregar  Controlador…, tal como se muestra en la figura.

En la ventana Scafold, selecciona el tipo de controlador. Para nuestra aplicación

seleccionamos el controlador en blanco, tal como se muestra.
A continuación presionar el botón Agregar
Selecciona el controlador
en blanco
En la ventana Agregar controlador, asigne el nombre del controlador:

rincipalController, tal como se muestra en la figura.
Presione el botón Agregar.
Action Inicio del

controlador Principal

En el controlador, se muestra el ActionResult Inicio(). A continuación vamos a agregar

una vista al Action.
Agregar vista al Action

Inicio()
En la ventana Agregar vista, se visualiza el nombre de la vista. No hacer cambios, por

ahora. Presiona el botón AGREGAR
Nombre de la Vista, la
plantilla es vacía

A continuación se muestra la Vista inicio.cshtml.

Realice los cambios a la vista, tal como se muestra en la figura
Agrega enlace a la
hoja de estilo
Ejecute proyecto, presiona la tecla Ctrl + F5, donde se visualiza la Vista y su diseño a
través de la pagina.

Resumen
 ASP.NET MVC es una implementación reciente de la arquitectura Modelo-Vista-
Controlador sobre la base ya existente del Framework ASP.NET otorgándonos de esta
manera un sin fin de funciones que son parte del ecosistema del Framework .NET.
 Entre las características más destacables de ASP.NET MVC tenemos las siguientes:
 Uso del patrón Modelo-Vista-Controlador.
 Facilidad para el uso de Unit Tests.
 Uso correcto de estándares Web y REST.
 Sistema eficiente de routing de links.
 Control a fondo del HTML generado.
 Uso de las mejores partes de ASP.NET.
 ASP.NET MVC es la plataforma de desarrollo web de Microsoft basada en el conocido
patrón Modelo-Vista-Controlador. Está incluida en Visual Studio y aporta interesantes
características a la colección de herramientas del programador Web.
 Cuando cree una aplicación ASP.NET MVC se define una tabla de enrutamiento que se
encarga de decidir que controlador gestiona cada petición Web basándose en la URL de
dicha petición.
 En el modelo Model-View-Controller (MVC), las vistas están pensadas exclusivamente
para encapsular la lógica de presentación. No deben contener lógica de aplicación, ni
código de recuperación de base de datos. El controlador debe administrar toda la lógica de
aplicación. Una vista representa la interfaz de usuario adecuada usando los datos que
recibe del controlador.
 Scaffolding implica la creación de plantillas a través de los elementos del proyecto a través
de un método automatizado.
 Razor es una sintaxis basada en C# que permite usarse como motor de programación en
las vistas de nuestros controladores. No es el único motor para trabajar con ASP.NET
MVC.
 Si desea saber más acerca de estos temas, puede consultar las siguientes páginas.
o http://www.vitaminasdev.com/Recursos/8/asp-net-mvc-vs-asp-net-webforms
o http://librosweb.es/libro/jobeet_1_4/capitulo_4/la_arquitectura_mvc.html
o http://www.devjoker.com/contenidos/articulos/525/Patron-MVC-Modelo-Vista-
Controlador.aspx
o https://msdn.microsoft.com/es-es/library/dd381412(v=vs.108).aspx
o https://amatiasbaldi.wordpress.com/2012/05/16/microsoft-mvc4/
o http://www.forosdelweb.com/f179/jquery-c-mvc-crear-objeto-json-enviarlo-action-del-
controlador-1082637/
o http://www.mug-it.org.ar/343016-Comunicando-cliente-y-servidor-con-jQuery-en-ASPnet-
MVC3.note.aspx
o https://danielggarcia.wordpress.com/2013/11/12/el-controlador-en-asp-net-mvc-4-i-enrutado/
o http://www.desarrolloweb.com/articulos/pasar-datos-controladores-vistas-dotnet.html
Bibliografía Unidad de Aprendizaje 1
Jon Galloway, Brad Wilson, K. Scott Allen, David Matson

2014 Professional ASP.NET MVC
5 Wrox
Jon Galloway, Brad Wilson, K. Scott Allen, David Matson

2014 Professional ASP.NET MVC

5 Wrox

UNIDAD DE
APRENDIZAJE
TRABAJANDO CON DATOS EN ASP.NET

MVC
Al término de la unidad, el alumno desarrolla aplicaciones con acceso a datos teniendo

implementando procesos de consulta y actualización de datos.
TEMARIO
Tema 2.1: Recuperando datos desde un origen de datos en ADO.NET (6 horas)

2.1.1 ADO.NET, arquitectura y proveedores
2.1.2 Manejo de la cadena de conexión de un origen de datos: ConfigurationManager
2.1.3 Clase DataReader, métodos y propiedades
2.1.4 Paginación de los datos recuperados

Modelo Vista Controlador para realizar operaciones de consulta de datos


2. 1. RECUPERANDO DATOS DESDE UN ORIGEN DE DATOS

EN ADO.NET
Cuando desarrolle aplicaciones con ADO.NET, contará con diferentes requisitos para
trabajar con datos. En algunos casos, puede que simplemente desee realizar una
consulta de datos en un formulario; en otros casos necesita actualizar los datos.
Independientemente de lo que haga con los datos, hay ciertos conceptos
fundamentales que debe de comprender acerca del enfoque de los datos en ADO.NET,
los cuales los trataremos en este primer capítulo del manual.
2.1.1 ADO.NET, arquitectura y proveedores de datos

Tradicionalmente, el procesamiento de datos ha dependido principalmente de un
modelo de dos niveles basado en una conexión. A medida que aumenta el uso que
hace el procesamiento de datos de arquitecturas de varios niveles, los programadores
están pasando a un enfoque sin conexión con el fin de proporcionar una mejor
escalabilidad a sus aplicaciones.
Arquitectura de ADO.NET
Figura 1: Arquitectura de ADO.NET

Referencia: hampprogramandoando.blogspot.com
Componentes de ADO.NET
Los dos componentes principales de ADO.NET para el acceso a datos y su

manipulación son los proveedores de datos .NET Framework y DataSet.
LINQ to SQL
LINQ to SQL admite consultas en un modelo de objetos asignado a las estructuras de

datos de una base de datos relacional sin utilizar un modelo conceptual intermedio.
Cada tabla se representa mediante una clase distinta, acoplando de manera precisa el
modelo de objetos al esquema de la base de datos relacional. LINQ to SQL traduce
Language-integrated queries del modelo de objetos a Transact-SQL y lo envía a la
base de datos para su ejecución. Cuando la base de datos devuelve los resultados,
LINQ to SQL los vuelve a traducir a objetos.

ADO.NET Entity Framework
ADO.NET Entity Framework está diseñado para permitir que los desarrolladores creen
aplicaciones de acceso a los datos programando en un modelo de aplicación
conceptual en lugar de programar directamente en un esquema de almacenamiento
relacional. El objetivo es reducir la cantidad de código y mantenimiento que se necesita
para las aplicaciones orientadas a datos
WCF Data Services
Describe cómo se usa Servicios de datos de WCF para implementar servicios de datos
en web o en una intranet. Los datos se estructuran como entidades y relaciones de
acuerdo con las especificaciones de Entity Data Model. Los datos implementados en
este modelo se pueden direccionar mediante el protocolo HTTP estándar
XML Y ADO.NET
ADO.NET aprovecha la eficacia de XML para proporcionar acceso a datos sin

conexión. ADO.NET fue diseñado teniendo en cuenta las clases de XML incluidas en
.NET Framework; ambos son componentes de una única arquitectura.
Proveedores de datos ADO.NET
Los proveedores de datos .NET Framework sirven para conectarse a una base de
datos, ejecutar comandos y recuperar resultados. Esos resultados se procesan
directamente, se colocan en un DataSet con el fin de que el usuario pueda verlos
cuando los necesite, se combinan con datos de varios orígenes o se utilizan de forma
remota entre niveles. Los proveedores de datos .NET Framework son ligeros, de
manera que crean un nivel mínimo entre el origen de datos y el código, con lo que
aumenta el rendimiento sin sacrificar funcionalidad.
En la tabla siguiente, se muestran los proveedores de datos .NET que se incluyen en el

Framework .NET
Proveedor de Datos .NET Descripción

.NET Framework Proveedor de datos Proporciona acceso a datos para Microsoft
para SQL Server SQL Server. Utiliza la librería
System.Data.SqlClient.
Proveedor de datos .NET Framework Para orígenes de datos que se exponen
para OLE DB mediante OLE DB. Utiliza la librería
System.Data.OleDb.
Proveedor de datos .NET Framework Para orígenes de datos que se exponen
para ODBC mediante ODBC. Utiliza la librería
System.Data.Odbc.
Proveedor de datos .NET Framework Para orígenes de datos de Oracle. El
para Oracle proveedor de datos .NET Framework para
Oracle es compatible con la versión 8.1.7 y
posteriores del software de cliente de
Oracle y utiliza la librería
System.Data.OracleClient.
Proveedor EntityClient Proporciona acceso a datos para las
aplicaciones de Entity Data Model. Utiliza la
librería System.Data.EntityClient.
Ref: https://docs.microsoft.com/es-es/dotnet/framework/data/adonet/data-providers
Los cuatro objetos centrales que constituyen un proveedor de datos de .NET

Framework son:

Objeto Descripción
Connection Establece una conexión a una fuente de datos. La
clase base para todos los objetos Connection es
DbConnection.
Command Ejecuta un comando en una fuente de datos.
Expone Parameters y puede ejecutarse en el
ámbito de un objeto Transaction desde
Connection. La clase base para todos los objetos
Command es DbCommand.
DataReader Lee un flujo de datos de solo avance y solo lectura
desde una fuente de datos. La clase base para
todos los objetos DataReader es DbDataReader.
DataAdapter Llena un DataSet y realiza las actualizaciones
necesarias en una fuente de datos. La clase base
para todos los objetos DataAdapter es
DbDataAdapter.
Objeto Descripción
Transaction Incluye operaciones de actualización en las
transacciones que se realizan en el origen de datos.
ADO.NET es también compatible con las
transacciones que usan clases en el espacio de
nombres System.Transactions.
CommandBuilder Un objeto auxiliar que genera automáticamente las
propiedades de comando de un DataAdapter o que
obtiene de un procedimiento almacenado
información acerca de parámetros con la que puede
rellenar la colección Parameters de un objeto
Command.
Parameter Define los parámetros de entrada y salida para los
comandos y procedimientos almacenados
ConnectionStringBuilder Un objeto auxiliar que proporciona un modo sencillo
de crear y administrar el contenido de las cadenas
de conexión utilizadas por los objetos Connection.
Exception Se devuelve cuando se detecta un error en el
origen de dato
ClientPermission Se proporciona para los atributos de seguridad de
acceso del código de los proveedores de datos
DATASET EN ADO.NET
 El objeto DataSet es esencial para la compatibilidad con escenarios de datos

distribuidos desconectados con ADO.NET.
 El objeto DataSet es una representación residente en memoria de datos que

proporciona un modelo de programación relacional coherente independientemente
del origen de datos. Se puede utilizar con muchos y distintos orígenes de datos,
con datos XML o para administrar datos locales de la aplicación.
 El DataSet representa un conjunto completo de datos que incluye tablas

relacionadas y restricciones, así como relaciones entre las tablas. En la siguiente
ilustración se muestra el modelo de objetos DataSet.

Figura 2: DataSet
Referencia: edn.embarcadero.com
Figura 2: DataSet y Components

Referencia: www.c-sharpcorner.com
2.1.2 Manejando una cadena de conexión a un origen de datos:

ConfigurationManager
En ADO.NET, se utiliza un objeto Connection para conectar con un determinado origen

de datos mediante una cadena de conexión en la que se proporciona la información de
autenticación necesaria. El objeto Connection utilizado depende del tipo de origen de
datos.
Cada proveedor de datos .NET Framework incluye un objeto Connection:
 Proveedor de datos para OLE DB incluye un objeto OleDbConnection,

 Proveedor de datos para SQL Server incluye un objeto SqlConnection,
 Proveedor de datos para ODBC incluye un objeto OdbcConnection y
 Proveedor de datos para Oracle incluye un objeto OracleConnection.
Conectar a SQL Server mediante ADO.NET
Para conectarse a Microsoft SQL Server 7.0 o posterior, utilice el objeto SqlConnection
del proveedor de datos .NET Framework para SQL Server. El proveedor de datos
.NET Framework para SQL Server admite un formato de cadena de conexión que es
similar al de OLE DB (ADO).
En el ejemplo siguiente, se muestra la forma de crear un abra una conexión a un origen

de datos en SQL Server
SqlConnection cn = new SqlConnection(“server=(local); database=NorthWind;

user id=sa; pwd=sql”);
cn.Open()

Donde
 Data Source: Origen de datos
 Initial Catalog=Nombre de la base de datos
 User id=usuario
 Pwd=clave
Cerrar una Conexión
Debe cerrar siempre el objeto Connection cuando deje de usarlo. Esta operación se
puede realizar mediante los métodos Close o Dispose del objeto Connection.
Las conexiones no se liberan automáticamente cuando el objeto Connection queda

fuera de ámbito o es reclamado por el garbageCollector.
2.1.3 La clase DataReader: métodos y propiedades
La recuperación de datos mediante DataReader implica crear una instancia del objeto
Command y de un DataReader a continuación, para lo cual se llama a
Command.ExecuteReader a fin de recuperar filas de un origen de datos.
Figura 3: Diagrama del objeto DataReader

Referencia: http://www.dotnetero.com/2006/08/adonet-para-novatos.html
Se puede utilizar el método Read del objeto DataReader para obtener una fila a partir
de los resultados de una consulta. Para tener acceso a cada columna de la fila
devuelta, puede pasar a DataReader el nombre o referencia numérica de la columna en
cuestión. Sin embargo, el mejor rendimiento se logra con los métodos que ofrece
DataReader y que permiten tener acceso a los valores de las columnas en sus tipos de
datos nativos (GetDateTime, GetDouble, GetGuid, GetInt32, etc.).
Para obtener una lista de métodos de descriptor de acceso con tipo para DataReaders
de proveedores de datos:
Proveedor Descripción
OledbDataReader Proveedor de datos para OLEDB
SqlDataReader Proveedor de datos para SQL Server
OdbcDataReader Proveedor de datos para ODBC
OracleDataReader Proveedor de datos para Oracle
Ref: https://docs.microsoft.com/es-es/dotnet/framework/data/adonet/retrieving-data-using-a-datareader
Recuperar varios conjuntos de resultados con NextResult
En el caso en que se devuelvan varios resultados, el DataReader proporciona el

método NextResult para recorrer los conjuntos de resultados en orden.

Obtener información del esquema a partir del DataReader
Mientras hay abierto un DataReader, puede utilizar el método GetSchemaTable para

recuperar información del esquema acerca del conjunto actual de resultados.
GetSchemaTable devuelve un objeto DataTable rellenado con filas y columnas que
contienen la información del esquema del conjunto actual de resultados.
DataTable contiene una fila por cada una de las columnas del conjunto de resultados.
Cada columna de una fila de la tabla de esquema está asociada a una propiedad de la
columna que se devuelve en el conjunto de resultados. ColumnName es el nombre de
la propiedad y el valor de la columna es el de la propiedad. En el ejemplo de código
siguiente se muestra la información del esquema de DataReader.
2.1.4 Paginación de los datos recuperados
La paginación en sitios web es una forma de estructurar el contenido, agrupándolo por

una cantidad fija de elementos o registros. La paginación es simplemente el número de
páginas que se muestran en la parte inferior de una página web que sirve para separar
el contenido y facilitar la navegación.
Figura: Paginación
Referencia: https://sitechecker.pro/es/pagination/
A menudo es el elemento más olvidado en el diseño de páginas web, pero podría

decirse que es uno de los más importantes.
En el flujo de trabajo típico de una aplicación web de MVC, los métodos de acción de
controlador administran una solicitud web de entrada. Estos métodos de acción usan
los valores de parámetro de entrada para ejecutar el código de aplicación y recuperar o
actualizar los objetos del modelo de datos de una base de datos.
Cuando se trata de mostrar grandes cantidades de información en una web, ya sean

productos de una tienda, resultados de una búsqueda o anuncios en una web de
empleo, tradicionalmente se ha venido utilizando un recurso de interfaz conocido como
paginación web. Esta técnica permite mantener el tamaño de cada página dentro de lo
manejable en cuanto a navegación e interfaz. Al mismo tiempo, permite reducir el
tamaño de la página la cantidad de información a transferir, ganando en velocidad.
Soluciones a nivel de concepto y de diseño sobre una paginación para una web
concreta puede haber muchas. Este apunte pretende únicamente mostrar algunos
ejemplos recogidos de ciertas webs: qué elementos son comunes y cuáles originales e
interesantes. A partir de ahí, cada cual puede meditar la solución más adecuada para
su web.

Laboratorio 2.1
Consultando datos desde una aplicación ASP.NET MVC
Implemente un proyecto ASP.NET MVC donde permita listar los registros de la tabla
tb_productos desde la web.
Trabajando con el Modelo

Primero, creamos una clase en la carpeta Models: Agregar una clase llamada Producto, tal
como se muestra
Selecciona la
opción
En la ventana Agregar nuevo elemento, selecciona el elemento Clase y asigne el nombre:

Cliente, presiona el botón Agregar
Selecciona el
elemento
Asigne su nombre

A continuación, defina los atributos de la clase Cliente, asigne el titulo a cada atributo, tal como
se muestra
Librería de
notaciones
Defina los
atributos
Trabajando con la conexión de datos
Abrir el web.config y defina la cadena de conexión llamada cnx, tal como se muestra. Utilice la
etiqueta <connectionStrings>
Defina la cadena
de conexión

A continuación, agregar en la carpeta Controller un controlador, selecciona el controlador MVC

5 en blanco, tal como se muestra
Seleccionar
A continuación, ingrese el nombre del Controlador, presiona al botón Agregar

En la ventana de código NegociosController:

 Importar la carpeta Models, la librería para acceso a la etiqueta Configuraction del
web.Config y de acceso a datos
Importar las librerías
En el controlador, defina la conexión utilizando el ConfigurationManager:
Conexión

A continuación, defina un método de tipo numerable donde liste los clientes, tal como se
muestra
Definir el método
En el ActionResult Index(), enviar a la Vista el método listado(), tal como se muestra
Enviar a la Vista la lista

de clientes

En la ventana Agregar Vista, aparece el nombre de la Vista: Index, selecciona la plantilla: List y
la clase de modelo Cliente. Presionar el botón Agregar
Selecciona la plantilla y
el modelo
Generada la Vista, presiona F5 para listar los registros.

Laboratorio 2.2
Consulta con paginación en ASP.NET MVC
Del proyecto ASP.NET MVC anterior, crea una consulta que permita listar los registros de la
tabla tb_pedidoscabe, listando los registros a 15 registros por página.

Desde el mismo proyecto, creamos en la carpeta Models, la clase Pedido
Clase Pedido
Trabajando con el Controlador

Desde el mismo proyecto, creamos el controlador Consultas.
En esta página hacemos una referencia a la carpeta Models, System.Configuration y
System.Data.SqlClient.
En el controlador, instancia la conexión a la base de datos Negocios2020
Referencia a Librerias

A continuación, defina el metodo para listar los registros de tb_pedidoscabe, donde se ingresa
como parámetro el nombre del procedure
Metodo listado
Implementa el ActionResult Paginacion, donde ejecuta y resulta el numero de registros a

visualizar en la Vista.
ActionResult
paginacion

A continuación implementamos el proceso del listado a través de una etiqueta <table>, tal
como se muestra. Para leer cada registro utilizamos el comando foreach para visualizar cada
registro.
Sintaxis Razor para la

paginación
Guarde el proyecto y ejecuta la pagina Ctrl + F5, donde se visualiza la Vista con su paginación
respectiva.

Laboratorio 2.3
Consulta con paginación en ASP.NET MVC
Del proyecto ASP.NET MVC anterior, crea una consulta que permita listar los registros de la
tabla tb_pedidoscabe por un determinado año del campo fechapedido, listando los registros a
15 registros por página.

Desde el mismo proyecto, creamos el controlador Consultas.
En esta página hacemos una referencia a la carpeta Models, Configuration y Data.SqlClient. En
el controlador, instancia la conexión a la base de datos Negocios2020
Referencia a Librerias
Defina un método llamado listado, donde reciba como parámetro el nombre del procedure y la
lista de parámetros, el cual retorna los registros de la consulta
Método donde ejecuta un

procedure y su lista de
parámetros

Defina el ActionResult donde envía a la vista los registros de pedidos por año, paginando su
resultado.
Agrega la vista del Action, defina un formulario donde defina un TextBox llamado “y” y al
finalizar la lista, defina la numeración de la paginación del filtro
Formulario
Paginación

Guarde la Vista, para ejecutar presiona Ctrl + F5, ingrese el año, al presionar el botón
Procesar, visualizamos los registros y los botones de la paginación.

Resumen
 Cuando desarrolle aplicaciones con ADO.NET, contará con diferentes requisitos para
trabajar con datos. En algunos casos, puede que simplemente desee realizar una consulta
de datos en un formulario; en otros casos necesita actualizar los datos.
 Los dos componentes principales de ADO.NET para el acceso a datos y su manipulación
son los proveedores de datos .NET Framework y DataSet.
 Los proveedores de datos .NET Framework sirven para conectarse a una base de datos,
ejecutar comandos y recuperar resultados. Esos resultados se procesan directamente, se
colocan en un DataSet con el fin de que el usuario pueda verlos cuando los necesite, se
combinan con datos de varios orígenes o se utilizan de forma remota entre niveles.
 En ADO.NET, se utiliza un objeto Connection para conectar con un determinado origen de
datos mediante una cadena de conexión en la que se proporciona la información de
autenticación necesaria. El objeto Connection utilizado depende del tipo de origen de
datos.
 La recuperación de datos mediante DataReader implica crear una instancia del objeto
Command y de un DataReader a continuación, para lo cual se llama a
Command.ExecuteReader a fin de recuperar filas de un origen de datos
 Se puede utilizar el método Read del objeto DataReader para obtener una fila a partir de
los resultados de una consulta. Para tener acceso a cada columna de la fila devuelta,
puede pasar a DataReader el nombre o referencia numérica de la columna en cuestión.
 La paginación en sitios web es una forma de estructurar el contenido, agrupándolo por una
cantidad fija de elementos o registros. La paginación es simplemente el número de páginas
que se muestran en la parte inferior de una página web que sirve para separar el contenido
y facilitar la navegación.
 En el flujo de trabajo típico de una aplicación web de MVC, los métodos de acción de
controlador administran una solicitud web de entrada. Estos métodos de acción usan los
valores de parámetro de entrada para ejecutar el código de aplicación y recuperar o
actualizar los objetos del modelo de datos de una base de datos.
 http://www.vitaminasdev.com/Recursos/8/asp-net-mvc-vs-asp-net-webforms
 http://librosweb.es/libro/jobeet_1_4/capitulo_4/la_arquitectura_mvc.html
 http://www.devjoker.com/contenidos/articulos/525/Patron-MVC-Modelo-Vista-
Controlador.aspx
 https://msdn.microsoft.com/es-es/library/dd381412(v=vs.108).aspx
 https://amatiasbaldi.wordpress.com/2012/05/16/microsoft-mvc4/
 http://www.forosdelweb.com/f179/jquery-c-mvc-crear-objeto-json-enviarlo-action-del-
controlador-1082637/
 http://www.mug-it.org.ar/343016-Comunicando-cliente-y-servidor-con-jQuery-en-
ASPnet-MVC3.note.aspx
 https://danielggarcia.wordpress.com/2013/11/12/el-controlador-en-asp-net-mvc-4-i-
enrutado/
 http://www.desarrolloweb.com/articulos/pasar-datos-controladores-vistas-dotnet.html


UNIDAD DE
APRENDIZAJE
TRABAJANDO CON DATOS EN

ASP.NET MVC
Al término de la unidad, el alumno desarrolla aplicaciones con acceso a datos teniendo

implementando procesos de consulta y actualización de datos
TEMARIO
Tema 3.1: Manipulación de datos desde un origen de datos en ADO.NET (6 horas)

3.1.1 Operaciones de actualización sobre un origen de datos: clase Command
3.1.2 Clase Command: métodos y propiedades
3.1.3 Uso de la Clase File y HttpPostFile para la actualización de datos e imágenes.
3.1.4 Manejo de transacciones: Clase Transaction

Modelo Vista Controlador para actualizar datos


3.1 MANIPULACIÓN DE DATOS DESDE UN ORIGEN DE

DATOS EN ADO.NET
3.1.1 Operaciones de actualización sobre un origen de datos: clase
Command
Las instrucciones SQL que modifican datos (por ejemplo INSERT, UPDATE o DELETE)
no devuelven ninguna fila. De la misma forma, muchos procedimientos almacenados
realizan alguna acción pero no devuelven filas. Para ejecutar comandos que no
devuelvan filas, cree un objeto Command con el comando SQL adecuado y una
Connection, incluidos los Parameters necesarios. El comando se debe ejecutar con el
método ExecuteNonQuery del objeto Command.
El método ExecuteNonQuery devuelve un entero que representa el número de filas que

se ven afectadas por la instrucción o por el procedimiento almacenado que se haya
ejecutado. Si se ejecutan varias instrucciones, el valor devuelto es la suma de los
registros afectados por todas las instrucciones ejecutadas
3.1.2 Clase Command: métodos y propiedades
Una vez establecida una conexión a un origen de datos, puede ejecutar comandos y
devolver resultados desde el mismo mediante un objeto DbCommand.
Figura 1: Diagrama del objeto Command

Referencia: http://www.dotnetero.com/2006/08/adonet-para-novatos.html
Para crear un comando, puede utilizar uno de los constructores de comando del
proveedor de datos .NET Framework con el que esté trabajando. Los constructores
pueden aceptar argumentos opcionales, como una instrucción SQL para ejecutar en el
origen de datos, un objeto DbConnection o un objeto DbTransaction. También puede
configurar dichos objetos como propiedades del comando. También puede crear un
comando para una determinada conexión mediante el método CreateCommand de un
objeto DbConnection. La instrucción SQL que ejecuta el comando se puede configurar
mediante la propiedad CommandText.
Cada proveedor de datos de .NET FrameWork cuenta con un objeto Command:
Proveedor Descripción
OledbCommand Proveedor de datos para OLEDB
SqlCommand Proveedor de datos para SQL Server
OdbcCommand Proveedor de datos para ODBC
OracleCommand Proveedor de datos para Oracle

Ejecución de un objeto Command

Cada proveedor de datos .NET Framework incluido en .NET Framework dispone de su
propio objeto command que hereda de DbCommand.
El proveedor de datos .NET Framework para OLE DB incluye un objeto

OleDbCommand, el proveedor de datos .NET Framework para SQL Server incluye un
objeto SqlCommand, el proveedor de datos .NET Framework para ODBC incluye un
objeto OdbcCommand y el proveedor de datos .NET Framework para Oracle incluye
un objeto OracleCommand.
Cada uno de estos objetos expone métodos para ejecutar comandos que se basan en
el tipo de comando y el valor devuelto deseado, tal como se describe en la tabla
siguiente:
Comando Valor de retorno

ExecuteReader Devuelve un objeto DataReader.
ExecuteScalar Devuelve un solo valor escalar.
ExecuteNonQuery Ejecuta un comando que no devuelve ninguna fila.
ExecuteXMLReader Devuelve un valor XmlReader. Solo está disponible para un
objeto SqlCommand.
Ref: https://docs.microsoft.com/en-us/dotnet/api/system.data.common.dbcommand?view=netframework-
4.8
Cada objeto Command fuertemente tipado admite también una enumeración

CommandType que especifica cómo se interpreta una cadena de comando, tal como
se describe en la tabla siguiente
Comando Valor de retorno

Text Comando de SQL que define las instrucciones que se van a
ejecutar en el origen de dato
StoredProcedure Nombre del procedimiento almacenado. Puede usar la
propiedad Parameters de un comando para tener acceso a los
parámetros de entrada y de salida y a los valores devueltos,
independientemente del método Execute al que se llame. Al
usar ExecuteReader, no es posible el acceso a los valores
devueltos y los parámetros de salida hasta que se cierra
DataReader
TableDirect Nombre de una tabla.
4.8
Ejecución de una consulta que retorne un conjunto de resultados

El objeto Command de ADO.NET tiene un método ExecuteReader que permite
ejecutar una consulta que retorna uno o más conjunto de resultados.
Al ejecutar el método ExecuteReader, puede pasar un parámetro al método el cual

representa la enumeración CommandBehavior, que permite controlar al Command
como se ejecutado.
A continuación, se muestra la descripción de los enumerables del CommandBehavior:
Valor Descripción
CommandBehavior.CloseConnection Se utiliza para cerrar la conexión en forma
automática, tan pronto como el dataReader
es cerrado.
CommandBehavior.SingleResult Retorna un único conjunto de resultados

Valor Descripción
CommandBehavior.SingleRow Retorna una fila
4.8
Ejecutando operaciones de actualización de datos utilizando SQL o

procedimiento almacenado
Los procedimientos almacenados ofrecen numerosas ventajas en el caso de

aplicaciones que procesan datos. Mediante el uso de procedimientos almacenados, las
operaciones de bases de datos se pueden encapsular en un solo comando, optimizar
para lograr el mejor rendimiento, y mejorar con seguridad adicional.
Aunque es cierto que para llamar a un procedimiento almacenado basta con pasar en
forma de instrucción SQL su nombre seguido de los argumentos de parámetros, el uso
de la colección Parameters del objeto DbCommand de ADO.NET permite definir más
explícitamente los parámetros del procedimiento almacenado, y tener acceso a los
parámetros de salida y a los valores devueltos.
Figura 2: Diagrama del objeto SqlCommand

Referencia: http://yinyangit.wordpress.com/2011/08/05/ado-net-tutorial-lesson-06-adding-
parameters-to-sqlcommands/
Manejo de parámetros en actualización de datos
Cuando se usan parámetros con SqlCommand para ejecutar un procedimiento

almacenado de SQL Server, los nombres de los parámetros agregados a la colección
Parameters deben coincidir con los nombres de los marcadores de parámetro del
procedimiento almacenado.
El proveedor de datos de .NET Framework para SQL Server no admite el uso del
marcador de posición de signo de interrogación de cierre (?) para pasar parámetros a
una instrucción SQL o a un procedimiento almacenado. Este proveedor trata los
parámetros del procedimiento almacenado como parámetros con nombre y busca
marcadores de parámetros coincidentes.
Para crear un objeto DbParameter, se puede usar su constructor o bien se puede

agregue a DbParameterCollection mediante una llamada al método Add de la
colección DbParameterCollection.
El método Add acepta como entrada argumentos del constructor o cualquier objeto de
parámetro ya existente, en función del proveedor de datos.
En el caso de los parámetros que no sean de entrada (INPUT), debe de asignarse la

propiedad ParameterDirection y especifique cual es el tipo de dirección del parámetro:
InputOutput, Output o ReturnValue

El tipo de datos de un parámetro es específico del proveedor de datos de .NET

Framework. Al especificar el tipo, el valor de Parameter se convierte en el tipo del
proveedor de datos de .NET Framework antes de pasar el valor al origen de datos. Si lo
desea, puede especificar el tipo de un objeto Parameter de forma genérica
estableciendo la propiedad DbType del objeto Parameter en un DbType determinado.
Las instrucciones SQL que modifican datos (por ejemplo INSERT, UPDATE o DELETE)
no devuelven ninguna fila. De la misma forma, muchos procedimientos almacenados
realizan alguna acción pero no devuelven filas. Para ejecutar comandos que no
devuelvan filas, cree un objeto Command con el comando SQL adecuado y una
Connection, incluidos los Parameters necesarios. El comando se debe ejecutar con el
método ExecuteNonQuery del objeto Command.
El método ExecuteNonQuery devuelve un entero que representa el número de filas

que se ven afectadas por la instrucción o por el procedimiento almacenado que se haya
ejecutado. Si se ejecutan varias instrucciones, el valor devuelto es la suma de los
registros afectados por todas las instrucciones ejecutadas.
3.1.3 Uso de la Clase File y HttpPostFile para la actualización de

datos e imágenes.
Desarrollar una aplicación que nos permita subir archivos a un servidor desde un
explorador Web es un proceso bastante sencillo, ya que la etiqueta <input
type="file" /> hace prácticamente todo el trabajo por nosotros en lo que se refiere a
la parte del "front-end".
En primer lugar debemos crear un formulario donde hagamos uso del tag input con el
type=”file”. Además necesitamos especificar a nivel de formulario el atributo enctype.
Este atributo indica el tipo de contenido que se va a enviar al servidor. Como nos
cuentan en la página oficial de W3, cuando el método utilizado es post el valor por
defecto de este atributo es “application/x-www-form-urlencoded”. Sin embargo, si
necesitamos hacer uso del elemento input de tipo file debemos modificar este valor por
“multipart/form-data”.
@using(Html.BeginForm(method="post"enctype="multipart/form-data"
action= "metodo"))
{
}
La clase HttpPostedFileBase es una clase abstracta que contiene los mismos

miembros que la clase HttpPostedFile. La clase HttpPostedFileBase le permite crear
clases derivadas que son como la clase HttpPostedFile, pero que puede personalizar
y que funcionan fuera de la tubería ASP.NET.
Cuando realiza pruebas unitarias, generalmente usa una clase derivada para
implementar miembros que tienen un comportamiento personalizado que cumple con el
escenario que está probando.
Propiedades
ContentLength Obtiene el tamaño de un archivo cargado, en
bytes.
ContentType Obtiene el tipo de contenido MIME de un archivo
cargado.
FileName Obtiene el nombre completo del archivo en el
cliente.

Metodos
SaveAs(String) Guarda el contenido de un archivo cargado.
ToString() Devuelve una cadena que representa el objeto
actual.
Ref: https://docs.microsoft.com/en-us/dotnet/api/system.web.httppostedfilebase?view=netframework-4.8
Este es el método de acción que publicará esta vista que guarda el archivo en un
directorio en la carpeta App_Data llamado " App_Data ".
[ HttpPost ] public ActionResult Index ( HttpPostedFileBase file

)
{
if (file.ContentLength > 0 )
{
var fileName = Path.GetFileName (file.FileName );
var path = Path.Combine (Server. MapPath ("~/App_Data/uploads"
), fileName);
file.SaveAs (path );
}
return RedirectToAction ( "Index" );

}
3.1.4 Manejo de transacciones en .NET

Cuando se compra un libro de una librería en línea, se intercambia dinero (en forma de
crédito) por el libro. Si tiene disponibilidad de crédito, una serie de operaciones
relacionadas garantiza que se obtenga el libro y la librería obtiene el dinero. Sin
embargo, si la operación sufre de un error durante el intercambio comercial, el erro
afecta a la totalidad del proceso. No se obtiene el libro y la librería no obtiene el dinero.
Una transacción consiste en un comando único o en un grupo de comandos que se

ejecutan como un paquete. Las transacciones permiten combinar varias operaciones
en una sola unidad de trabajo. Si en un punto de la transacción se produjera un error,
todas las actualizaciones podrían revertirse y devolverse al estado que tenían antes de
la transacción.
Una transacción debe ajustarse a las propiedades: atomicidad, coherencia, aislamiento

y durabilidad para poder garantizar la coherencia de datos. La mayoría de los sistemas
de bases de datos relacionales, como Microsoft SQL Server, admiten transacciones, al
proporcionar funciones de bloqueo, registro y administración de transacciones cada vez
que una aplicación cliente realiza una operación de actualización, inserción o
eliminación.
Implementando una transacción implícita y explícita
Una transacción explícita es aquella en que se define explícitamente el inicio y el final

de la transacción. Las aplicaciones utilizan las instrucciones BEGIN TRANSACTION,
COMMIT TRANSACTION, COMMIT WORK, ROLLBACK TRANSACTION o
ROLLBACK WORK de Transact-SQL para definir transacciones explícitas.
BEGIN TRANSACTION
Marca el punto de inicio de una transacción explícita para una conexión.

COMMIT TRANSACTION o COMMIT WORK

Se utiliza para finalizar una transacción correctamente si no hubo errores. Todas las
modificaciones de datos realizadas en la transacción se convierten en parte
permanentes de la base de datos. Se liberan los recursos ocupados por la transacción.
ROLLBACK TRANSACTION o ROLLBACK WORK
Se utiliza para eliminar una transacción en la que se encontraron errores. Todos los
datos modificados por la transacción vuelven al estado en el que estaban al inicio de la
transacción. Se liberan los recursos ocupados por la transacción.
En ADO, utilice el método BeginTrans en un objeto Connection para iniciar una

transacción explícita. Para finalizar la transacción, llame a los métodos CommitTrans o
RollbackTrans del objeto Connection.
En el proveedor administrado de SqlCliente de ADO.NET, utilice el método

BeginTransaction en un objeto SqlConnection para iniciar una transacción explícita.
Para finalizar la transacción, llame a los métodos Commit() o Rollback() del objeto
SqlTransaction.
El modo de transacciones explícitas se mantiene solamente durante la transacción.

Cuando la transacción termina, la conexión vuelve al modo de transacción en que
estaba antes de iniciar la transacción explícita, es decir, el modo implícito o el modo de
confirmación automática.
Cada proveedor de datos de .NET Framework tiene su propio objeto Transaction para
realizar transacciones locales. Si necesita que se realice una transacción en una base
de datos de SQL Server, seleccione una transacción de System.Data.SqlClient. En
transacciones de Oracle, utilice el proveedor System.Data.OracleClient. Además, existe
una nueva clase DbTransaction disponible para la escritura de código independiente
del proveedor que requiere transacciones.
En ADO.NET, las transacciones se controlan con el objeto Connection. Puede iniciar

una transacción local con el método BeginTransaction. Una vez iniciada una
transacción, puede inscribir un comando en esa transacción con la propiedad
Transaction de un objeto Command. Luego, puede confirmar o revertir las
modificaciones realizadas en el origen de datos según el resultado correcto o incorrecto
de los componentes de la transacción. Las operaciones para confirmar una transacción
es Commit y la operación para revertir o deshacer una transacción es RollBack.
Una transacción implícita inicia una nueva transacción en una conexión a SQL Server
Database Engine (Motor de base de datos de SQL Server) después de confirmar o
revertir la transacción actual. No tiene que realizar ninguna acción para delinear el
inicio de una transacción, sólo tiene que confirmar o revertir cada transacción. El modo
de transacciones implícitas genera una cadena continua de transacciones.
La transacción sigue activa hasta que emita una instrucción COMMIT o ROLLBACK.
Una vez que la primera transacción se ha confirmado o revertido, la instancia Motor de
base de datos inicia automáticamente una nueva transacción la siguiente vez que la
conexión ejecute una de estas instrucciones. La instancia continúa generando una
cadena de transacciones implícitas hasta que se desactiva el modo de transacciones
implícitas.

Laboratorio 3.1
Actualizacion de datos en ASP.NET MVC
Implemente un proyecto ASP.NET MVC donde permita actualizar los registros de la tabla
tb_vendedor, los cuales se encuentra almacenado en la base de datos negocios2020
Trabajando con el Models

En la carpeta Models, agregue dos clases: Vendedor y Pais, defina a cada clase cada uno de
sus atributos, tal como se muestra.
Clase Vendedor
Clase Pais

Definiendo la cadena de conexión

En el web.config, defina la conexión a la base de datos, utilice la etiqueta <connectionStrings>
tal como se muestra.
Trabajando con el controlador Vendedores

En el controlador, defina las referencias incluyendo la carpeta Models, tal como se muestra.
Referencias a las
librerías

Como siguiente paso, defina la conexión a la base de datos. Utilice el ConfigurationManager

para leer la cadena publicada en el web.config.
A continuación, defina los métodos de tipo IEnumerable, los cuales retornan los registros de las
tablas tb_paises y tb_vendedores.
En esta imagen, retornamos los registros de la tabla tb_paises, tal como se muestra
Retorna los registros

de tb_paises

Este método Vendedores(), retorna los registros de la tabla tb_Vendedor.

de tb_vendedor
ActionResult Index()
Defina el ActionResult, el cual envía a la vista la lista de los registros de tb_vendedor a través
del metodo vendedores.

A continuación, agrega la vista del ActionResult Index() y presiona la tecla F5 donde ejecute la
pagina, visualizando la lista de los registros.

Actualización de datos
Para desarrollar este proceso, defina un metodo llamado CRUD, el cual recibe como parámetro
el nombre del procedure y la lista de parámetros, ejecutando una operación de actualización:
Insert, Delete, Update, tal como se muestra.
Metodo CRUD
ActionResult Create
A continuación, defina el ActionResult Create(), tipo GET, el cual envía a la pagina los países y
un nuevo Vendedor()
ActionResult GET

Defina el ActionResult Create(), tipo POST, el cual reciben el registro de Vendedor, y ejecuta el
metodo CRUD.
A continuación, agrega la vista del ActionResult Create() y agregar el DropDownList para

visualizar los registros de tb_paises.

En la vista, agregar el DropDownList en el campo idpais y agregar al final un ViewBag donde

visualizamos el mensaje del proceso. Ejecute la vista.
DropDown de paises
ViewBag.mensaje
Ejecuta la vista, para agregar registros a la tabla tb_Vendedor, tal como se muestra.

ActionResult Edit
Defina el ActionResult Edit(), tipo GET, el cual envía a la pagina el vendedor seleccionado
desde el Index. Además enviamos la lista de países con el país seleccionado desde el
ViewBag.
Action Edit (GET)
Defina el ActionResult Edit(), tipo POST, el cual reciben el registro de Vendedor, y ejecuta el
metodo CRUD para actualizar los datos del Vendedor seleccionado

A continuación, agrega la vista del ActionResult Edit() y agregar el DropDownList para

visualizar los registros de tb_paises.
Vista Edit

DropDown de paises
El DbContext del modelo (Negocios2017.Context.cs), expone cada uno de los DbSet de las
ViewBag.mensaje
tablas que conforman el modelo, tal como se muestra

Ejecuta la vista Index, selecciona un Vendedor desde la opción Edit, donde se direcciona a la
Vista Edit, cambie los datos y presiona el botón Save para actualizar los datos.

Laboratorio 3.2
Actualización de datos con imágenes en ASP.NET MVC
En el mismo proyecto ASP.NET MVC realice el ingreso de datos de la tabla tb_usuario, donde
en dicho registro almacena la dirección de su foto (imagen).
SOLUCION
En la base de datos, crea la tabla tb_usuario, tal como se muestra.
Tabla tb_usuario
Defina en el controlador el ActionResult ClientesxNombre, definiendo el parámetro de entrada

nom, el cual recibe el valor para realizar el filtro. Aplicamos expresiones Lambda para filtrar los
registros.
Trabajando con el Models

En la carpeta Models, agregue la clase: Usuario, tal como se muestra.
Clase Usuario

Definiendo la cadena de conexión

En el web.config, defina la conexión a la base de datos, utilice la etiqueta <connectionStrings>
Trabajando con el controlador Usuarios

En el controlador, defina las referencias incluyendo la carpeta Models, tal como se muestra.
Referencias a las
librerías

Como siguiente paso, defina la conexión a la base de datos. Utilice el ConfigurationManager

para leer la cadena publicada en el web.config.
A continuación, defina el método de tipo IEnumerable, los cuales retornan los registros de las
tablas tb_usuario, tal como se muestra

de tb_usuario

Defina el ActionResult, el cual envía a la vista la lista de los registros de tb_usuario a través del
metodo usuarios().
A continuación, agrega la vista del ActionResult Index(). Realice algunos cambios al diseño de
la vista.

Realice el diseño de la Vista, donde visualice la foto del usuario.
Defina la class
.imgfoto
Visualizar la foto
Guarde, presiona la tecla F5 para visualizar los registros.

Actualización de datos
Para desarrollar este proceso, defina un metodo llamado CRUD, el cual recibe como parámetro
el nombre del procedure y la lista de parámetros, ejecutando una operación de actualización:
Insert, Delete, Update, tal como se muestra.
Metodo CRUD
ActionResult Create
A continuación, defina el ActionResult Create(), tipo GET, el cual envía un nuevo Usuario()
ActionResult GET

Defina el ActionResult Create(), tipo POST, el cual reciben el registro de Usuario, y ejecuta el
metodo CRUD.
A continuación, agrega la vista del ActionResult Create(), realizar las modificaciones de la vista


TextBox de tipo “file”
ViewBag.mensaje
Ejecuta la vista, para agregar registros a la tabla tb_Usuario, tal como se muestra.

Resumen
 Las instrucciones SQL que modifican datos (por ejemplo INSERT, UPDATE o DELETE) no
devuelven ninguna fila. De la misma forma, muchos procedimientos almacenados realizan
alguna acción pero no devuelven filas.
 Para ejecutar comandos que no devuelvan filas, cree un objeto Command con el comando
SQL adecuado y una Connection, incluidos los Parameters necesarios. El comando se
debe ejecutar con el método ExecuteNonQuery del objeto Command.
 Cada proveedor de datos .NET Framework incluido en .NET Framework dispone de su
propio objeto command que hereda de DbCommand. El proveedor de datos .NET
Framework para para SQL Server incluye un objeto SqlCommand.
 Cada objeto Command fuertemente tipado admite también una enumeración
CommandType que especifica cómo se interpreta una cadena de comando
 Desarrollar una aplicación que nos permita subir archivos a un servidor desde un
explorador Web es un proceso bastante sencillo, ya que la etiqueta <input type="file" />
hace prácticamente todo el trabajo por nosotros en lo que se refiere a la parte del "front-
end".
 La clase HttpPostedFileBase es una clase abstracta que contiene los mismos miembros
que la clase HttpPostedFile. La clase HttpPostedFileBase le permite crear clases
derivadas que son como la clase HttpPostedFile, pero que puede personalizar y que
funcionan fuera de la tubería ASP.NET.
 Una transacción consiste en un comando único o en un grupo de comandos que se
ejecutan como un paquete. Las transacciones permiten combinar varias operaciones en
una sola unidad de trabajo. Si en un punto de la transacción se produjera un error, todas
las actualizaciones podrían revertirse y devolverse al estado que tenían antes de la
transacción.
 En ADO.NET, las transacciones se controlan con el objeto Connection. Puede iniciar una
transacción local con el método BeginTransaction. Una vez iniciada una transacción, puede
inscribir un comando en esa transacción con la propiedad Transaction de un objeto
Command. Luego, puede confirmar o revertir las modificaciones realizadas en el origen de
datos según el resultado correcto o incorrecto de los componentes de la transacción. Las
operaciones para confirmar una transacción es Commit y la operación para revertir o
deshacer una transacción es RollBack.
o http://dawconsblog.blogspot.com/2014/04/tutorial-crud-con-mvc-y-entity-
framework_14.html
o https://translate.google.com.pe/translate?hl=es&sl=en&u=https://msdn.microsoft.co
m/en-us/data/jj729737.aspx&prev=search
o http://speakingin.net/2007/11/18/aspnet-mvc-framework-primera-parte/
o https://docs.microsoft.com/en-
us/dotnet/api/system.web.httppostedfilebase?view=netframework-4.8

UNIDAD DE
APRENDIZAJE
IMPLEMENTANDO E-COMMERCE
EN ASP.NET MVC
Al término de la unidad, el alumno desarrolla aplicaciones e-commerce teniendo en

cuenta las funciones de compra, validación de usuario, checkout, registro y pago.
TEMARIO
Tema 4.1: Implementando una aplicación e-commerce

4.1.1. Proceso del e-commerce
4.1.2. Manejando el objeto Session.
4.1.3. Implementando el proceso del e-commerce (carrito de compras)

Modelo Vista Controlador para registrar un proceso de e-commerce.


4.1 Implementando una aplicación e-commerce

El comercio electrónico, o E-commerce, como es conocido en gran cantidad de portales
existentes en la web, es definido por el Centro Global de Mercado Electrónico como
“cualquier forma de transacción o intercambio de información con fines comerciales en
la que las partes interactúan utilizando Tecnologías de la Información y
Comunicaciones (TIC), en lugar de hacerlo por intercambio o contacto físico directo”.
Figura 1: e-commerce
http://beople.es/las-10-tendencias-del-e-commerce/
Al hablar de E-commerce es requisito indispensable referirse a la tecnología como

método y fin de comercialización, puesto que esta es la forma como se imponen las
actividades empresariales. El uso de las TIC para promover la comercialización de
bienes y servicios dentro de un mercado, conlleva al mejoramiento constante de los
procesos de abastecimiento y lleva el mercado local a un enfoque global, permitiendo
que las empresas puedan ser eficientes y flexibles en sus operaciones.
La actividad comercial en Internet o comercio electrónico, no difiere mucho de la

actividad comercial en otros medios, el comercio real, y se basa en los mismos
principios: una oferta, una logística y unos sistemas de pago.
Figura 2: definición de e-commerce

http://es.slideshare.net/cmcordon/e-commercekcn-alicante169b
Podría pensarse que tener unas páginas web y una pasarela de pagos podría ser
suficiente, pero no es así. Cualquier acción de comercio electrónico debe estar guiada
por criterios de rentabilidad o, al menos, de inversión, y por tanto deben destinarse los
recursos necesarios para el cumplimiento de los objetivos. Porque si bien se suele
decir que poner una tienda virtual en Internet es más barato que hacerlo en el mundo
real, las diferencias de coste no son tantas como parece, si se pretende hacerlo bien,
claro.
Los objetivos básicos de cualquier sitio web comercial son tres:

 atraer visitantes,
 fidelizarlos y, en consecuencia,
 venderles nuestros productos o servicios

Para poder obtener un beneficio con el que rentabilizar las inversiones realizadas que
son las que permiten la realización de los dos primeros objetivos. El equilibrio en la
aplicación de los recursos necesarios para el cumplimiento de estos objetivos permitirá
traspasar el umbral de rentabilidad y convertir la presencia en Internet en un auténtico
negocio.
4.1.1 Proceso del e-commerce

En el comercio electrónico intervienen, al menos, cuatro agentes:
 El proveedor, que ofrece sus productos o servicios a través de Internet.

 El cliente, que adquiere a través de Internet los productos o servicios ofertados
por el proveedor.
 El gestor de medios de pago, que establece los mecanismos para que el
proveedor reciba el dinero que paga el cliente a cambio de los productos o
servicios del proveedor.
 La entidad de certificación, que garantiza mediante un certificado electrónico
que los agentes que intervienen en el proceso de la transacción electrónica son
quienes dicen ser.
Además de estos agentes suelen intervenir otros que están más relacionados con el
suministro de tecnología en Internet (proveedores de hospedaje, diseñadores de
páginas web, etc.) que con el propio comercio electrónico.
Básicamente un sistema de comercio electrónico está constituido por unas páginas

web que ofrecen un catálogo de productos o servicios. Cuando el cliente localiza un
producto que le interesa rellena un formulario con sus datos, los del producto
seleccionado y los correspondientes al medio de pago elegido. Al activar el formulario,
si el medio de pago elegido ha sido una tarjeta de crédito, se activa la llamada
"pasarela de pagos" o TPV (terminal punto de venta) virtual, que no es más que un
software desarrollado por entidades financieras que permite la aceptación de pagos por
Internet. En ese momento se genera una comunicación que realiza los siguientes
pasos: el banco del cliente acepta (o rechaza) la operación, el proveedor y el cliente
son informados de este hecho, y a través de las redes bancarias, el dinero del pago es
transferido desde la cuenta del cliente a la del proveedor. A partir de ese momento, el
proveedor enviará al cliente el artículo que ha comprado.
Figura 3: proceso de e-commerce

http://www.brainsins.com/es/blog/dropshipping-for-dummies/5916
Todas estas operaciones se suelen realizar bajo lo que se denomina "servidor seguro",
que no es otra cosa que un ordenador verificado por una entidad de certificación y que
utiliza un protocolo especial denominado SSL (Secure Sockets Layer), garantizando la
confidencialidad de los datos, o más recientemente con el protocolo SET (Secure
Electronic Transaction).

El carrito de compras en el e-commerce
La aparición y consolidación de las plataformas de e-commerce ha provocado que, en

el tramo final del ciclo de compra (en el momento de la transacción), el comprador
potencial no interactúe con ninguna persona, sino con un canal web habilitado por la
empresa, con el llamado carrito de compra.
Figura 4: carrito de compras

http://www.clarika.com.ar/es/Ecommerce.aspx
Los carritos de compra son aplicaciones dinámicas que están destinadas a la venta por
internet y que si están confeccionadas a medida pueden integrarse fácilmente dentro
de websites o portales existentes, donde el cliente busca comodidad para elegir
productos (libros, música, videos, comestibles, indumentaria, artículos para el hogar,
electrodomésticos, muebles, juguetes, productos industriales, software, hardware, y un
largo etc.) -o servicios- de acuerdo a sus características y precios, y simplicidad para
comprar.
El desarrollo y programación de un carrito de compras puede realizarse a medida

según requerimientos específicos (estos carritos son más fáciles de integrar
visualmente a un sitio de internet).
Por otro lado, dentro de las opciones existentes también están los carritos de compra
enlatados (en este caso se debe estar seguro de que sus características son
compatibles con los requerimientos); open source (código abierto) como osCommerce
o una amplia variedad de carritos de compras pagos.
4.1.2. Manejando el objeto Session
En los programas que hemos visto hasta ahora, hemos utilizado variables que solo
existían en el archivo que era ejecutado. Cuando cargábamos otra página distinta, los
valores de estas variables se perdían a menos que nos tomásemos la molestia de
pasarlos por la URL o inscribirlos en las cookies o en un formulario para su posterior
explotación. Estos métodos, aunque útiles, no son todo lo prácticos que podrían en
determinados casos en los que la variable que queremos conservar ha de ser utilizada
en varios scripts diferentes y distantes los unos de los otros.
Podríamos pensar que ese problema puede quedar resuelto con las cookies ya que se
trata de variables que pueden ser invocadas en cualquier momento. El problema, ya lo
hemos dicho, es que las cookies no son aceptadas ni por la totalidad de los usuarios ni
por la totalidad de los navegadores lo cual implica que una aplicación que se sirviera de
las cookies para pasar variables de un archivo a otro no sería 100% infalible.
Nos resulta pues necesario el poder declarar ciertas variables que puedan ser
reutilizadas tantas veces como queramos dentro de una misma sesión. Imaginemos un
sitio multilingüe en el que cada vez que queremos imprimir un mensaje en cualquier
página necesitamos saber en qué idioma debe hacerse. Podríamos introducir un script
identificador de la lengua del navegador en cada uno de los archivos o bien declarar

una variable que fuese valida para toda la sesión y que tuviese como valor el idioma
reconocido en un primer momento.
Estas variables que son válidas durante una sesión y que luego son "olvidadas" son
definidas con el objeto Session de la siguiente forma:
Session["nombre de la variable"] = valor de la variable
Una vez definida, la variable Session, será almacenada en memoria y podrá ser
empleada en cualquier script del sitio web.
La duración de una sesión viene definida por defecto en 20 minutos. Esto quiere decir
que si en 20 minutos no realizamos ninguna acción, el servidor dará por finalizada la
sesión y todas las variables Session serán abandonadas. Esta duración puede ser
modificada con la propiedad Timeout:
Session.Timeout = n° de minutos que queramos que dure
Una forma de borrar las variables Session sin necesidad de esperara que pase este
plazo es a partir del método Abandon:
Session.Abandon
De este modo todas las variables Session serán borradas y la sesión se dará por
finalizada. Este método puede resultar práctico cuando estemos haciendo pruebas con
el script y necesitemos reinicializar las variables.
Lo que se suele hacer es crear un archivo en el que se borran las cookies y se

abandona la sesión. Este archivo será ejecutado cuando queramos hacer borrón y
cuenta nueva:
4.1.3 Implementando el proceso del e-commerce
Figura 5: Implementando el carrito de compras

https://codigofuentenet.wordpress.com/2013/02/05/carrito-de-compras-asp-net-y-c/
1. Primero a diferencia del carito del súper el de nosotros no es necesario que se

tome (crearlo) al principio; no mas llegue a nuestro sitio el cliente. Sino que el
cliente puede revisar el catalogo de productos y hasta que este listo a comprar se
le asignara un carrito donde introducir su compra.
2. Segundo en el carro de supermercado es capaz de contener una gran cantidad de

productos a la vez, nuestro carro de compras debe ser capaz de hacer lo mismo.
3. Tercero el carro de supermercado me permite introducir de un productos varios del
mismo, el que programaremos debe ser capaz de hacerlo.
4. Cuarto cuando llega a pagar en el supermercado totaliza su compra a partir de los
subtotales de todas sus productos esto lo hace mentalmente, de esta forma decide
si dejar algo por que no le alcanza el dinero. Nuestro carro de compras debe ser
capaz de mostrarnos el subtotal a partir de cada producto que llevamos y así como

en el supermercado me debe de permitir eliminar un producto si no me alcanza el

dinero.
5. Y por ultimo en el carro de compras me debe permitir actualizar la cantidad de
producto si quiero mas de un producto del mismo tipo o quiero dejar de ese
producto uno.

Laboratorio 4.1
Implementando el proceso del e-commerce en ASP.NET MVC
Implemente una aplicación ASP.NET MVC que permita registrar las ventas por internet.
Solución.
Creamos un proyecto ASP.NET MVC llamado MvcCarrito
En la carpeta Content vamos a agregar una hoja de Estilo tal como se muestra
Seleccionar
En la ventana Agregar nuevo elemento, selecciona la plantilla hoja de estilo y le asignas el

nombre styleCarrito.css, tal como se muestra
Seleccionar
Nombre

Defina las clases en la hoja de estilo tal como se muestra:
Cuerpo de la pagina
Registro de cada producto
Imagen del producto
Producto seleccionado

Agregando una Vista Parcial

En la carpeta Shared, agrega una página parcial Razor, llamada _PartialProducto, tal como se
muestra
Seleccionar
Selecciona la plantilla Página parcial de MVC (Razor) y asigne su nombre
Seleccionar
Nombre

En la clase partial definimos el diseño de la página para listar los productos, tal como se
muestra
En la clase partial _PartialRegistro definimos el diseño para visualizar los datos del producto
seleccionado, tal como se muestra

Agregando un Controlador
A continuación agregamos el controlador llamado CarritoController, tal como se muestra
Seleccionar

En el controlador Carrito, defina el ActionResult Index, que retorna los registros de

tb_productos, evalúo si la Session carrito exists, de no ser así, lo defino
Agregando la Vista
Agregar la vista llamada Index, de plantilla Empty; presiona el botón Agregar

A continuación defina la Vista del Action Index, diseña la vista tal como se muestra.
Ejecuta la aplicación, donde se visualiza la lista de productos

En el controlador Carrito, defina el método Seleccionar, donde recibe el id, busca el registro en
la tabla tb_productos, enviando el registro.

A continuación agregar la Vista Seleccionar, tal como se muestra
Defina la vista a continuación utilizando la clase partial _PartialRegistro

A continuación ejecuta el proyecto, al seleccionar el producto, mostraremos sus datos, tal como
se muestra
Realizar la Compra
En el controlador Carrito, defina el actionResult Comprar(); el cual retorna los registros de

Session[“carrito”] y almacena el total del monto en el ViewBag.mt, tal como se muestra.

Defina la vista Comprar, tal como se muestra
Defina la vista parcial: _PartialComprar la cual se agregará en la Vista Comprar

A continuación defina la vista Comprar, tal como se muestra
Al ejecutar el proyecto, agrega algunos productos. Al presionar la opción realizar Compra, se

visualiza tal como se muestra

ActionResult para eliminar el registro del producto seleccionado
Realizar el Pago
Defina el ActionResult Pago, el cual envía los datos de la compra, tal como se muestra. A
continuación defina la vista del método.

Vista del ActionResult Pago
Almacenar la Transacción
Defina las librerías de trabajo dentro del controlador

Función autogenera(), retorna el siguiente valor del número del pedido. Utilice la función
ExecuteScalar en el proceso
Función Monto(), retorna el total acumulados del campo monto de detalle.

A continuación defina el Actionresult Pago, el cual ejecuta el proceso para agrega registros a la
base de datos.

Archivos del proceso

Resumen
 El comercio electrónico, o E-commerce, como es conocido en gran cantidad de portales
existentes en la web, es definido por el Centro Global de Mercado Electrónico como
“cualquier forma de transacción o intercambio de información con fines comerciales en la
que las partes interactúan utilizando Tecnologías de la Información y Comunicaciones
(TIC), en lugar de hacerlo por intercambio o contacto físico directo”.
 La actividad comercial en Internet o comercio electrónico, no difiere mucho de la actividad
comercial en otros medios, el comercio real, y se basa en los mismos principios: una oferta,
una logística y unos sistemas de pago
 La capa de acceso a datos realiza las operaciones CRUD (Crear, Obtener, Actualizar y
Borrar), el modelo de objetos que .NET Framework proporciona para estas operaciones es
ADO.NET. Los objetivos básicos de cualquier sitio web comercial son tres: atraer visitantes,
fidelizarlos y, en consecuencia, venderles nuestros productos o servicios
 Para poder obtener un beneficio con el que rentabilizar las inversiones realizadas que son
las que permiten la realización de los dos primeros objetivos. El equilibrio en la aplicación
de los recursos necesarios para el cumplimiento de estos objetivos permitirá traspasar el
umbral de rentabilidad y convertir la presencia en Internet en un auténtico negocio.
 La aparición y consolidación de las plataformas de e-commerce ha provocado que, en el
tramo final del ciclo de compra (en el momento de la transacción), el comprador potencial
no interactúe con ninguna persona, sino con un canal web habilitado por la empresa, con el
llamado carrito de compra
 Los carritos de compra son aplicaciones dinámicas que están destinadas a la venta por
internet y que si están confeccionadas a medida pueden integrarse fácilmente dentro de
websites o portales existentes, donde el cliente busca comodidad para elegir productos
(libros, música, videos, comestibles, indumentaria, artículos para el hogar,
electrodomésticos, muebles, juguetes, productos industriales, software, hardware, y un
largo etc.) -o servicios- de acuerdo a sus características y precios, y simplicidad para
comprar.
o http://albeverry.blogspot.com/
o http://rogerarandavega.blogspot.com/2014/04/arquitectura-n-capas-estado-del-
arte_18.html
o http://icomparable.blogspot.com/2011/03/aspnet-mvc-el-mvc-no-es-una-forma-
de.html
o http://lgjluis.blogspot.com/2013/11/aplicaciones-en-n-capas-con-net.html
o http://anexsoft.com/p/36/asp-net-mvc-usando-ado-net-y-las-3-capas


UNIDAD DE
APRENDIZAJE
CONSUMO DE SERVICIOS
Al término de la unidad, el alumno desarrolla aplicaciones Web para consumir

servicios WCF.
TEMARIO
Tema 5.1: Implementación y consumo de servicios WCF (4 horas)

5.1.1 lntroducción a los servicios WCF
5.1.2 Servicio WCF
5.1.3 Implementación de un servicio simple WCF con acceso a datos.
 Los alumnos implementan un proyecto web consumiendo servicios para el

manejo de datos utilizando el patrón de diseño Modelo Vista Controlador.


5.1. Implementando y consumo de servicios WCF

5.1.1 Introducción a los servicios WCF
Windows Communication Foundation (WCF) es un marco de trabajo para la creación
de aplicaciones orientadas a servicios. Con WCF, es posible enviar datos como
mensajes asincrónicos de un extremo de servicio a otro. Un extremo de servicio puede
formar parte de un servicio disponible continuamente hospedado por IIS, o puede ser
un servicio hospedado en una aplicación. Un extremo puede ser un cliente de un
servicio que solicita datos de un extremo de servicio. Los mensajes pueden ser tan
simples como un caracter o una palabra enviados como XML, o tan complejos como un
flujo de datos binarios.
Figura 1: servicio WCF

http://blog.ccaldera.com/creacion-y-consumo-de-servicio-wcf-ef/
Ventajas de utilizar WCF

 Código Centralizado. La principal ventaja del uso de servicios públicos es el código
centralizado, por ejemplo, si por algún motivo la estructura de la base de datos de
una aplicación cambia, solo se cambiara en el servicio y no en todas las
aplicaciones que dependan de ella.
 Seguridad. Gracias a que todo el acceso a la información se encuentra en una
sola capa de acceso, es posible tener un mejor control de la misma.
 Escalabilidad. En caso de que se creen nuevas aplicaciones con funcionalidades
similares, ya no será necesario crear todas las funciones desde cero, sino que
bastara con vincular la aplicación al WCF y tendrá tanta funcionalidad como sus
similares.
A continuación se indican unos cuantos escenarios de ejemplo:

 Un servicio seguro para procesar transacciones comerciales.
 Un servicio que proporciona datos actualizados a otras personas, como un
informe sobre tráfico u otro servicio de supervisión.
 Un servicio de chat que permite a dos personas comunicarse o intercambiar
datos en tiempo real.
 Una aplicación de panel que sondea los datos de uno o varios servicios y los
muestra en una presentación lógica.
 Exponer un flujo de trabajo implementado utilizando Windows Workflow
Foundation como un servicio WCF.
 Una aplicación de Silverlight para sondear un servicio en busca de las fuentes
de datos más recientes.
Los mensajes son enviados entre endpoints. Un endpoint es un lugar donde un

mensaje es enviado, o recibido, o ambos.
Un servicio expone uno o más application endpoints, y un cliente genera un endpoint

compatible con uno de los endpoints de un servicio dado. La combinación de un
servicio y un cliente compatibles conforman un communication stack.

Figura 2: arquitectura
http://www.esasp.net/2009/09/wcf-introduccion-y-conceptos-basicos.html
5.1.2 Servicios WCF

WCF es un modelo de programación para el desarrollo de aplicaciones con arquitectura
orientada a servicios (SOA). Aplicaciones distribuidas basadas en la comunicación
mediante mensajes.
Una aplicación WCF está compuesta por:
 Clientes: Son aplicaciones que inician la comunicación.

 Servicios: Son aplicaciones que esperan los mensajes de los clientes y
responden a los mismos.
Los mensajes son enviados entre endpoints. Un endpoint es un lugar donde un

mensaje es enviado, o recibido, o ambos.
Un servicio expone uno o más application endpoints, y un cliente genera un endpoint

compatible con uno de los endpoints de un servicio dado.
La combinación de un servicio y un cliente compatibles conforman un communication

stack.
Conceptos básicos de WCF
Address: especifica el lugar o donde se encuentra el servicio. Especifica la ruta donde

un mensaje será enviado. Todos los servicios son instalados con una dirección
especifica. Una address es normalmente especificada como una URL, donde la primera
parte especifica el mecanismo de transporte y la segunda parte determina el lugar
donde se encuentra el servicio.
Ejemplo:
http://www.ejemplowcf.com/miServicioWCF/EjemploServicio.svc

Binding: son usados para especificar los detalles del transporte, encoding y protocolo
requeridos por los clientes y servicios para comunicarse unos con otros. Los bindings
en WCF son usados para la representación de un endpoint. Y un endpoint es un lugar
donde los clientes pueden comunicarse con el servicio de WCF.
Un binding esta compuesto por una colección de elementos. Cada elemento describe
algunos aspectos de como el servicio se comunicará con el cliente. Un binding debe al
menos incluir un elemento de transporte, un message-encoding (este es provisto por el
elemento transporte por defecto), y por último una o varias definiciones del elemento de
protocolo.
Algunos ejemplos de bindings en WCF son: BasicHttpBinding, WSHttpBinding, etc.

Cada uno de estos bindings tiene predefinidos elementos requeridos para una tarea en
especial, y están prontos para ser usados en su proyecto. Por ejemplo,
BasicHttpBinding usa el protocolo HTTP como transporte para enviar mensaje SOAP
1.1 y tiene atributos y elementos como receiveTimeout, sendTimeout,
maxMessageSize, etc. Puede usar la configuración por defecto de atributos y
elementos de BasicHttpBinding o puede sobrescribirlos dependiendo de su necesidad.
Contract: es un conjunto de especificaciones que define la interfaz de un servicio

WCF. Un servicio WCF se comunica con otras aplicaciones de acuerdo a su contrato.
Hay muchos tipos de contractos en WCF, tales como Service contract, operation
contract, data contract, message contract y fault contract.
Service contract: es la interface de un servicio WCF. Nos dice que puede hacer un
servicio. Dentro de estas interfaces, se puede definir una cantidad de métodos o
operaciones que especifican las tareas del servicio. Un Servicio WCF tiene que tener al
menos un contracto para recibir los pedidos de los clientes que lo consumen.
Operation contract: está definido dentro de un service contract, y define los

parámetros y el tipo de retorno de una operación. Una operación puede tomar un dato
primitivo por ejemplo un char, un int como parámetro o incluso un mensaje, el cual
debería ser definido como un message contract.
Message contract: Si un operation contract necesita pasar un mensaje como

parámetro o retornar un mensaje, el tipo de estos mensajes debe ser definido como
message contract. Un message contract define los elementos de un mensaje, como por
ejemplo la seguridad del mensaje y también el elemento que debe ir en el cabezal y
cuerpo del mismo.
Data contract: son los tipos de datos de un servicio WCF. Todos los tipos de datos
usados por el servicio WCF deben ser descriptos en la metadata para habilitar a otras
aplicaciones a interoperar con el servicio. Una data contract puede ser usado por un
operation contract como parámetro o el tipo de retorno, o puede ser incluso usado por
un message contract. Si el servicio WCF solo usa tipos primitivos (int, char, etc) no es
necesario definir una data contract.
Fault contract: SI un operation contract retorna un error al cliente que lo llamo, el

cliente debe ser advertido de ese error. Estos tipos de errores son definidos como fault
contract.
Endpoint: Los mensajes son enviados entre endpoints. Y los endpoints son el lugar
donde los mensajes son enviados y recibidos o ambos, y tienen toda la información
requerida para el intercambio de mensajes. Un servicio puede exponer uno o mas
endpoints. Cuando necesitamos conectarnos al servicio, la aplicación cliente genera un
endpoint que es compatible con el endpoint del servicio.
Un servicio de WCF tiene un binding, un address y un service contract, esto es

conocido como el ABC de Windows Communication Foundation.

Behavior: es un tipo de configuración para extender la funcionalidad de un

componente de WCF. Tenemos muchos tipos de bahaviors en WCF, por ejemplo, un
service behavior, binding behavior, contract behavior, etc. Los behaviors son
configurados en el archivo de configuración de WCF.
Hosting: Un servicio WCF es un componente que puede ser llamado por otras
aplicaciones. Por esto, el servicio debe ser alojado en un ambiente para ser usado por
otras aplicaciones. El ambiente que aloja nuestro servicio WCF, es una aplicaci’on que
maneja y controla el tiempo de vida de nuestro servicio.
Channels: Hemos visto previamente que un servicio WCF debe ser alojando en algún
ambiente (puede ser una aplicación o un server). La aplicación cliente tiene que
especificar los bindings necesarios para conectarse al servicio WCF. Ahora los
elementos del binding, son interfaces y deben ser implementados en clases concretas.
Esta implementación de un elemento del binding es lo que llamamos channel. (canal).
Un elemento del binding representa una configuración y el channel es la
implementación asociada con esa configuración.
Metadata: describe las características de un servicio a una entidad externa para poder
comunicarse con el servicio. Para explicarlo un poquito más, la metadata puede ser
consumida usando la utilidad de SvcUtil.exe el cual genera una clase proxy y la
configuración que la aplicación cliente puede usar para interactuar con el servicio.
La metadata que expone el servicio incluye el esquema del documento XML que define
la data contract del servicio y los documentos WSDL que describen los métodos del
servicio.
5.1.3 Implementación de un servicio simple WCF con acceso a

datos
Pasos para desarrollar un servicio.
 Definir el Contrato (ServiceContract): Se escribe la interfaz en un lenguaje de
programación de .NET, agregando los distintos métodos que serán incluidos en el
contrato.

 Implementar el Contrato (ServiceContract): Se escribe una clase mediante la cual

se implemente la interfaz. Es posible establecer comportamientos a la definición
del servicio usando el atributo ServiceBehavior.
Configurar el Servicio: Especificar los endpoints y metadata del servicio, estos son
definidos en un archivo de configuración de .NET (Web.config o App.config).
En el Web.Config, configuraremos 2 cosas:

 El Servicio (<services>):
 El nombre del servicio que coincidirá con el nombre de la clase.
 El behaviorConfiguration que es definido más abajo en el mismo fichero.
Dentro del servicio debemos identificar un endpoint del mismo:

 Definiremos el contrato del endpoint.
 El tipo de binding.
 El Comportamiento (<behaviors>):
 Exponer el metadata para que los clientes puedan ver y consumir el servicio.
Llegados a este punto, podemos compilar el servicio y comprobar si todo ha ido

bien, para ello abriremos el fichero CodigosWS.svc en el explorador, y debemos
obtener una imagen como esta:

 Diseñar una aplicación Hosting del servicio: Web Host dentro del IIS - Self-Host
dentro de cualquier proceso .NET - Managed Windows Services - Windows
Process Activation Service.
 Diseñar una aplicación cliente del servicio: Acá definiremos las aplicaciones
clientes que consumirán el servicio.

Consumo de un servicio WCF desde una aplicación WEB

El escenario de alojamiento elegido puede influir en el lado del consumidor.
Puede consumir los servicios WCF de varias maneras. Si usa WCF en el lado del
cliente será muy productivo, ya que WCF incluye herramientas que pueden generar
clases de proxy para llamar a los servicios WCF. WCF proporciona compatibilidad con
los estándares y las herramientas principalmente a través de SvcUtil.exe. Lo usará
como herramienta principal de interpretación de metadatos. Eso, en combinación con la
capacidad de Framework de WCF para aprovechar la reflexión para interrogar tipos
adornados con los atributos apropiados, hace la generación y el uso de Framework de
WCF menos complicado que con los marcos existentes.
Además, Visual Studio 2015 incluye sencillas características para agregar referencias
al servicio a sus proyectos y generar continuamente clases de proxy.
CRUD con WCF

Windows Communication Foundation o WCF es un marco para la creación de
aplicaciones orientadas a servicios. Mediante el uso de WCF podemos transferir datos
como mensajes asíncronos.
WCF Data Services proporciona un medio fácil de permitir a los clientes utilizar las
funcionalidades de back-end en las bases de datos que residen en el lado del servidor,
donde crea una capa de servicios de interfaz basado en la nube, la cual es expuesta
entre el cliente y el Entity Data Model (EDM), que, por otra parte interactúa con el
database.
Figura 3: CRUD en WCF

http://www.dotnetfunda.com/articles/show/1893/a-basic-introduction-to-creation-of-crud-
operation-using-odata-web-ser

Laboratorio 5.1
Implementando CRUD en ASP.NET MVC consumiendo un
servicio WCF
Implemente un proyecto ASP.NET MVC donde permita realizar las operaciones de
actualización y consulta de datos consumiendo un servicio WCF.
SOLUCION
Crear un nuevo proyecto tipo Aplicación servicio WCF, tal como se muestra.
Selecciona C#, Todas las

plataformas, Servicio
Seleccionar
Asigne el nombre y ubicación del proyecto WCF, tal como se muestra. Presiona botón CREAR
Nombre y ubicación
del proyecto

Trabajando con el Servicio Web

Como primer paso, trabajamos con la IService1, para definir el DataContract y los métodos del
ServiceContract
IService y Service
Primero defina los DataContract para Cliente y Pais, defina en cada uno sus atributos
(DataMember), tal como se muestra
DataContract
Cliente
DataContract Pais

A continuación, defina los métodos de actualización y consulta, tal como se muestra
OperationContract
Trabajando con Service1: Implementando los métodos

A continuación, nos situamos en el archivo Service1.svc e implementamos los métodos
definidos en la interface.
Librerias
Para implementar los métodos,

selecciona Implementar
interfaz de forma explícita

Seleccionado la opción se agrega la lista de los métodos a implementar, tal como se muestra
Métodos a implementar
en Service1
Luego definimos la conexión a la base de datos Negocios2020, tal como se muestra.
Definición de la conexión
de datos

Implemente el método clientes(), el cual retorna, como lista, los registros de la tabla tb_clientes.
Método que retorna los

registros de tb_clientes
A continuación, implemente el método paises(), el cual retorna, como lista, los registros de la
tabla tb_paises
Método que retorna los

registros de tb_paises

Implementa el método Agregar, donde inserta un registro a la tabla tb_clientes, retornando un

mensaje de tipo string, tal como se muestra
Método insertar, ejecuta el

insert into a tb_clientes
Implementa el método Actualizar, donde actualiza los datos de un registro a la tabla tb_clientes,
retornando un mensaje de tipo string, tal como se muestra
Método actualizar, ejecuta

el update a tb_clientes

Implemente el método Buscar(), donde retorna el registro de tb_cliente por su campo idcliente,
Método buscar, donde

retorna el cliente por su
campo idcliente
Por último, Implemente el método Eliminar(), donde elimina el registro de tb_cliente por su
campo idcliente, tal como se muestra
Método eliminar(), donde

elimina el cliente por su
campo idcliente

Para consumir el servicio, primero compile el proyecto y luego el Service1.svc debemos

ejecutarlo en un Explorador, el cual nos dara una dirección URL donde se ejecuta el servicio
Compilar el proyecto
Ver en el Explorador

Copiar la dirección URL, para consumir el servicio
URL del Servicio

Trabajando con el proyecto ASP.NET MVC

En el proyecto MVC, agregar una referencia de servicio, para consumir el servicio del proyecto
WCF, tal como se muestra
Selecciona la referencia de
servicio
En la ventana, pegar la dirección del servicio y presiona el botón Ir, donde se visualiza los
métodos definidos. Asigne un nombre a la referencia, tal como se muestra.
Nombre de la referencia

A continuación, agregamos un controlador al proyecto
Selecciona controlador en
blanco
Asigne el nombre del Controlador, tal como se muestra.
Como primer paso, importar la referencia de Negocio, tal como se muestra
Importar la referencia del

servicio

Instanciar la referencia con el nombre de servicio, tal como muestra.
Instanciar el servicio con el

nombre de servicio
Trabajando con el ActionResult Clientes()
Defina el ActionResult Clientes(), el cual retorna la lista de los clientes.
ActionResult donde retorna la

lista de clientes

Definido el ActionResult, agregar una vista, cuya plantilla será de tipo List y su clase Cliente
(WCF), tal como se muestra
Definir la vista del

ActionResult
Ejecuta la Vista, visualizando los resultados de la consulta

Trabajando con el ActionResult Create()
Defina el ActionResult Create(), GET y POST donde envía un nuevo Cliente() y retorna los
datos para ejecutar el método Agregar del servicio, tal como se muestra.
Método GET
Método POST
Definido el ActionResult, agregar una vista, cuya plantilla será de tipo CREATE y su clase
Cliente (WCF), tal como se muestra
Vista CREATE

Modifica la estructura de la Vista, agrega el DropDown para países tal como se muestra.
DropDown para
paises
Ejecuta la Vista para agregar registros de la tabla tb_clientes

Trabajando con el Action Edit

En el controlador defina el método Edit GET y POST donde envía los datos del cliente y retorna
los datos para ejecutar el método Actualizar del servicio, tal como se muestra
Método GET
Método POST
Definido el ActionResult, agregar una vista, cuya plantilla será de tipo EDIT y su clase Cliente
(WCF), tal como se muestra
Vista EDIT

En la vista modificar el contenido del campo Pais, agregar un DropDownList para listar los
registros de países, tal como se muestra
DropDown para
paises
Ejecuta la Vista Clientes(), selecciona un cliente, donde se visualiza los datos del cliente, edite
o modifique sus valores, al presionar el botón Save, se ejecuta el proceso y se visualiza en la
lista los clientes y del cliente modificado.

Resumen
 Windows Communication Foundation (WCF) es un marco de trabajo para la creación
de aplicaciones orientadas a servicios. Con WCF, es posible enviar datos como
mensajes asincrónicos de un extremo de servicio a otro. Un extremo de servicio puede
formar parte de un servicio disponible continuamente hospedado por IIS, o puede ser
un servicio hospedado en una aplicación. Un extremo puede ser un cliente de un
servicio que solicita datos de un extremo de servicio. Los mensajes pueden ser tan
simples como un caracter o una palabra enviados como XML, o tan complejos como un
flujo de datos binarios.
 Los mensajes son enviados entre endpoints. Un endpoint es un lugar donde un
mensaje es enviado, o recibido, o ambos. Un servicio expone uno o más application
endpoints, y un cliente genera un endpoint compatible con uno de los endpoints de un
servicio dado. La combinación de un servicio y un cliente compatibles conforman un
communication stack.
 Una de las Ventajas de utilizar WCF
o Código Centralizado. La principal ventaja del uso de servicios públicos es el
código centralizado.
o Seguridad. Donde se accede a la información que se encuentra en una sola
capa de acceso, es posible tener un mejor control de la misma.
o Escalabilidad
 El consumo de servicios WCF le habilita para agregar servicios WCF existentes al
proceso empresarial. Es posible agregar varios servicios WCF a una única
orquestación.
 Entre los adaptadores de envío WCF de BizTalk se incluyen cinco adaptadores de
envío físicos que representan los enlaces predefinidos de WCF BasicHttpBinding,
WsHttpBinding, NetTcpBinding, NetNamedPipeBinding y NetMsmqBinding. Asimismo,
los adaptadores de WCF de BizTalk incorporan los adaptadores personalizados que
permiten configurar libremente la información de comportamiento y enlace de WCF en
un puerto de envío.
 Si desea ver mas
o https://msdn.microsoft.com/es-es/library/ms731082(v=vs.110).aspx
o http://www.esasp.net/2009/09/wcf-introduccion-y-conceptos-basicos.html
o https://msdn.microsoft.com/es-es/library/bb226529.aspx
o http://www.dotnetfunda.com/articles/show/1893/a-basic-introduction-to-
creation-of-crud-operation-using-odata-web-ser
o http://pabletoreto.blogspot.com/2014/12/crear-hospedar-y-consumir-un-
wcf4.html
o http://www.esasp.net/2009/09/wcf-desarrollando-un-servicio-y-cliente.html


UNIDAD DE
APRENDIZAJE
CONSUMO DE SERVICIOS
Al término de la unidad, el alumno desarrolla aplicaciones Web con Formularios para

consumir servicios WCF.
TEMARIO
Tema 6.1: Implementación y consumo de servicios Web API (4 horas)

6.1.1 El web API y el modelo MVC
6.1.2 Verbos HTTP y convención para la implementación de un servicio Web
6.1.3 Implementando un Servicio Web API y consumo desde una aplicación
Web con acceso a datos
 Los alumnos implementan un proyecto web consumiendo servicios para el

manejo de datos utilizando el patrón de diseño Modelo Vista Controlador.


6.1 Implementando y consumo de servicios Web API

6.1.1 El web API y el modelo MVC
La API de Web ASP.NET es un marco que hace que sea fácil de construir servicios
HTTP que llegan a una amplia gama de clientes, incluyendo los navegadores y
dispositivos móviles.
Figura 1
http://maninformatic.blogspot.pe/2013/12/diferencia-entre-mvc-y-web-api.html
La API de Web ASP.NET es una plataforma ideal para la creación de aplicaciones cuyo
propósito es exponer servicios bajo el protocolo HTTP utilizando el estilo de la
arquitectura REST (Representational State Transfer).
¿Por qué utilizar el API Web?
 Es un framework que usa los servicios HTTP y hace que esto sea fácil para
proporcionar una respuesta a la solicitud del cliente. La respuesta depende de la
petición de los clientes. Web API construye los servicios HTTP y gestiona la
petición usando el protocola HTTP. Web API es codigo abierto y este puede ser
hospedado en la aplicación o en el servidor IIS. La petición puede ser GET, POST,
DELETE o PUT.
 Permite mostrar los datos en varios formatos, como XML y JSON.
 Está diseñado para llegar a un amplio rango de clientes en aplicaciones móviles,
tablets, Web.
6.1.2 Verbos HTTP y convención para la implementación de un

servicio web
Como se mencionó anteriormente, en este artículo vamos a consumir un URI API WEB
ASP.NET existentes (alojado en el servidor), por debajo de la mesa es de mencionar
todos los URI:
Método
Acción URI relativa
HTTP
Obtenga una lista de
GET / Api / ServerData
ServerData

Método
Acción URI relativa
HTTP
Obtener una ServerData por
GET / Api / ServerData / Identificación
ID
Obtén ServerData por tipo de / Api / ServerData / tipo / tipo de
GET
datos datos
Obtén ServerData por la
GET / Api / ServerData / ip / ip
máquina IP
Crear un ServerData fresca POST / Api / ServerData
Actualizar una ServerData
PUT / Api / ServerData / Identificación
existente
Eliminar una ServerData
DELETE / Api / ServerData / Identificación
existente
Ref: https://docs.microsoft.com/es-es/aspnet/web-api/overview/web-api-routing-and-
actions/routing-in-aspnet-web-api
Implementacion de un simple Web API

Si desea exponer los datos y/o información de una solicitud a sus clientes, pueden
utilizar dichos datos e interactuar con los mismos para exponerlos a sus clientes en la
Web.
Por ejemplo
 Una aplicación móvil requiere un servicio.
 HTML 5 requiere un servicio.
 PC de escritorio y tabletas requieren servicios.
Actualmente la mayoría de las aplicaciones de dispositivos requieren servicios API

Web.
El Marco ASP.Net aprovecha tanto los estándares web como HTTP, JSON y XML y
proporciona una forma sencilla de construir y exponer a los servicios de datos basados
en REST.
Algunos conceptos básicos de ASP.Net MVC son similares a la API de Web ASP.Net,
tales como enrutamiento y los controladores.
Consumo de servicio Web API desde una aplicación web

Para crear los controladores para la API. WebAPI es un framework MVC-como que
podemos utilizar para crear fácilmente un servicio RESTful, y se puede ejecutar dentro
de una aplicación MVC4, en su propio proyecto, o puede ser autoalojados fuera del IIS.
Pero eso no es todo; tiene muchas otras características, tales como: la negociación de
contenido (para serializar automáticamente los datos en el formato que se solicita).
6.1.3 Implementando un servicio Web API y consumo desde una

aplicación Web con acceso a datos
CRUD significa "Crear, leer, actualizar y eliminar", que son las cuatro operaciones
básicas de base de datos. Muchos servicios HTTP también modelan las operaciones
CRUD a través de REST o APIs similares a REST.

Para implementar un proceso CRUD, Web API nos provee de cuatro métodos HTTP
principales (GET, PUT, POST y DELETE) se pueden asignar a operaciones CRUD de
la siguiente manera.
 GET recupera la representación del recurso en un URI especificado. GET no

debería tener efectos secundarios en el servidor.
 PUT actualiza un recurso en un URI especificado. PUT también se puede utilizar
para crear un nuevo recurso en un URI especificado, si el servidor permite a los
clientes especificar nuevos URI. Para este tutorial, la API no admite la creación
mediante PUT.
 POST crea un nuevo recurso. El servidor asigna el URI para el nuevo objeto y
devuelve este URI como parte del mensaje de respuesta.
 DELETE elimina un recurso en un URI especificado.
Figura 2
http://www.tutorialsteacher.com/webapi/consume-web-api-for-crud-operation

Laboratorio 6.1
Implementando consulta en ASP.NET MVC consumiendo un
WEB API
Implemente un proyecto ASP.NET MVC donde permita realizar las operaciones de consulta y
actualización de datos consumiendo un servicio Web API.
Selecciona
Asigne nombre y ubicación del proyecto
Nombre y ubicación
del proyecto

Selecciona la plantilla a API web y la autenticación: Sin autenticación, tal como se muestra,
presionar el botón CREAR
Selecciona API web
Publicando la cadena de conexión

En el web.config publicar la cadena de conexión llamada cnx, tal como se muestra.

Definiendo la clase Cliente
En la carpeta Models, crea la clase Cliente y defina los atributos tal como se muestra.
Trabajando con APISController
En la carpeta Controllers, agregar un nuevo controlador llamado APISController, tal como se

muestra.
Selecciona

Asigne el nombre al controlador
Trabajando en el Controlador
Como primer paso, agrega las referencias y librerías, tal como se muestra.
Agrega las referencias
A continuación, definimos la conexión a la base de datos, tal como se muestra
Definir la conexión

En el controlador defina la interface del ActionResult llamada getclientes(), cuya ruta será
“api/listado”. A continuación, programa el método.
Metodo getcllientes()
Presiona la tecla F5 y agregue la ruta /api/listado, donde se visualiza la lista de los clientes, tal
como se muestra.

Trabajando con una aplicación ASP.NET MVC
Cree una aplicación ASP.NET MVC, a partir de allí vamos a agregar una librería para trabajar
con Web API.
Desde la opción Proyectos  Administrar paquetes NUGET, selecciona la opción Examinar.

Instale el paquete Microsoft.AspNet.WebApi.Client versión 5.2.7, tal como se muestra.
En la carpeta Models, agrega la clase Cliente y defina sus atributos.

En NegociosController, agregar las referencias a la aplicación Web Api: System.Net.Http, tal

como se muestra.
A continuacion, programa el ActionResult Index(), donde ejecutamos en forma asíncrona el

proceso getclientes(), tal como se muestra.

Agrega la Vista del método, de plantilla List y de clase de modelo Cliente, tal como se muestra
Defina la plantilla y
la clase de modelo

Modifica la estructura de la vista sobre los ActionLink, tal como se muestra
ActionLink, modifica el
valor del parámetro id
Ejecuta la vista, donde se lista los registros de tb_clientes

Trabajando con el Controlador: Action Create
En el HomeController, defina el ActionResult Create, el cual envía la vista con un registro en

blanco y recibe el registro con los datos para ejecutar el método Post del ValueController
Método donde envía un

registro en blanco
Método que recibe el registro y

ejecuta el método Post()
Crear la vista del Action Create, tal como se muestra
la clase de modelo

En la Vista, modifica el scafold del campo idpais por un DropDownList, tal como se muestra en
la figura.
Modifica el Scafold de idpais

por un DropDownList
Ejecuta la Vista, ingresa los datos a los controles, al presionar el botón Create, el registro se
agrega a la tabla y se visualiza en la página Index, tal como se muestra

Trabajando con el Controlador: Action Edit
En el HomeController, defina el ActionResult Edit, el cual envía la vista un registro de la tabla

tb_clientes y recibe el registro con los datos para ejecutar el método Put del ValueController
Método donde envía un

registro de tb_clientes
Método que recibe el registro y

ejecuta el método Put()

Crear la Vista Edit, tal como se muestra
la clase de modelo
En la Vista, modifica el scafold del campo idpais por un DropDownList, tal como se muestra en
la figura.
Modifica el Scafold de idpais

por un DropDownList

Ejecuta la Vista Index, al hacer click en el link Edit de un registro, visualizamos en la página
Edit, los datos del cliente seleccionado. Modificar su contenido. Al hacer click en el botón Save,
se direcciona a la página index(), con los datos actualizados
Visualizamos el registro actualizado

Trabajando con el Controlador: Action Delete
En el HomeController, defina el ActionResult Delete, el cual ejecuta el método Delete del

ValueController
Método que ejecuta el

método Delete()
Ejecuta la vista Index, selecciona un registro de tb_clientes, al presionar el link Delete, el

registro se elimina y se visualiza la lista actualizada, tal como se muestra.


Resumen
 La Web API se vuelve cada vez má importante con la proliferación de dispositivos que
utilizamos hoy en día. La mayoría de los dispositivo móviles, como teléfonos y tablets,
se ejecutan aplicaciones que utilizan datos recuperados de la Web a través de HTTP.
Las aplicaciones de escritorio también se están moviendo en esta dirección con más y
más contenido en línea y sincronización y Windows 8 prometiendo una experiencia en
aplicaciones similares.
 Del mismo modo, muchas aplicaciones web se basan en la funcionalidad del cliente
enriquecido para crear y manipular la interfaz de usuario del navegador, usando AJAX
en lugar de datos HTML generados por eñ servidor para cargar la interfaz de usuario
con los datos.
 Si desea exponer los datos / información de su solicitud a sus clientes y otras personas
luego de que otras personas puedan utilizar sus datos e interactuar con los datos /
información se expone a ellos.
Por ejemplo
o Una aplicación móvil requiere un servicio.
o HTML 5 requiere un servicio.
o PC de escritorio y tabletas requieren servicios.
Actualmente la mayoría de las aplicaciones de dispositivos requieren servicios API
Web.
El Marco ASP.Net aprovecha tanto los estándares web como HTTP, JSON y XML y
proporciona una forma sencilla de construir y exponer a los servicios de datos basados
en REST. Algunos conceptos básicos de ASP.Net MVC son similares a la API de Web
ASP.Net, tales como enrutamiento y los controladores.
 Si desea ver mas
o http://www.c-sharpcorner.com/UploadFile/4b0136/implement-Asp-Net-web-api-
2-in-Asp-Net-mvc-5/
o https://www.codeproject.com/Articles/805931/ASP-NET-MVC-Features-
WebAPI
o http://www.codemag.com/Article/1601031
o http://www.dotnetglobe.com/2012/03/crud-operation-using-aspnet-web-api-
in.html
o https://www.mindstick.com/Articles/1472/crud-operation-using-asp-dot-net-web-
api-and-entity-framework-in-asp-dot-net-mvc-4
o http://www.codesolution.org/crud-operations-using-asp-net-web-api/
o https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api
o http://dotnetmentors.com/web-api/rest-based-crud-operations-with-asp-net-
web-api.aspx

UNIDAD DE
APRENDIZAJE
TRABAJANDO CON ANGULAR

EN ASP.NET MVC
Al término de la unidad, el alumno conoce las técnicas para el diseño de un SPA, para
realizar operaciones de actualización de datos en ASP.NET MVC.
TEMARIO
5.1 Tema 07: AngularJS (3 horas)

5.1.1 Introduccion a Angular
5.1.2 Integrando Angular en ASP.NET MVC
5.1.3 Interacción con una base de datos y Angular
 Los alumnos implementan un proyecto web para consultar datos en un SPA

utilizando AngularJS.


5.1 ANGULARJS
5.1.1 Introducción a Angular
Desde su creación, Angular ha sido el framework preferido por la mayoría de los
desarrolladores Javascript. Este éxito ha provocado que los desarrolladores quieran
usar el framework para más y más cosas.
De ser una plataforma para la creación de Web Apps, ha evolucionado como motor de
una enorme cantidad de proyectos del ámbito empresarial y de ahí para aplicaciones
en la Web Mobile Híbrida, llevando la tecnología al límite de sus posibilidades.
La nueva herramienta está pensada para dar cabida a todos los usos dados por los
desarrolladores, llevar a Javascript a un nuevo nivel comparable a lenguajes más
tradicionales, siendo además capaz de resolver de una manera adecuada las
necesidades y problemas de la programación del lado del cliente. Entre las soluciones
aportadas en Angular o Angular 2:
TypeScript / Javascript:
Como base hemos puesto a Javascript, ya que es el inicio de los problemas de
escalabilidad del código. Ayuda poco a detectar errores y además produce con facilidad
situaciones poco deseables.
La sugerencia de usar TypeScript para desarrollar en Angular es casi una imposición

porque la documentación y los generadores de código están pensados en TypeScript.
Se supone que en futuro también estarán disponibles para Javascript, pero de
momento no es así. De todos modos, para la tranquilidad de muchos, TypeScript no
agrega más necesidad de procesamiento a las aplicaciones con Angular 2, ya que este
lenguaje solamente lo utilizas en la etapa de desarrollo y todo el código que se ejecuta
en el navegador es al final Javascript, ya que existe una transpilación previa.
Lazy SPA:
Ahora el inyector de dependencias de Angular no necesita que estén en memoria todas
las clases o código de todos los elementos que conforman una aplicación. Ahora con
Lazy SPA el framework puede funcionar sin conocer todo el código de la aplicación,
ofreciendo la posibilidad de cargar más adelante aquellas piezas que no necesitan
todavía.
Renderizado Universal:
Angular nació para hacer web y renderizar en HTML en el navegador, pero ahora el
renderizado universal nos permite que no solo se pueda renderizar una vista a HTML.
Gracias a ésto, alguien podría programar una aplicación y que el renderizado se haga,
por ejemplo, en otro lenguaje nativo para un dispositivo dado.
Otra cosa que permite el renderizado universal es que se use el motor de renderizado
de Angular del lado del servidor. Es una de las novedades más interesantes, ya que
ahora podrás usar el framework para renderizar vistas del lado del servidor,
permitiendo un mejor potencial de posicionamiento en buscadores de los contenidos de
una aplicación.
Data Binding Flow:

En Angular 2, el flujo de datos ahora está mucho más controlado y el desarrollador
puede direccionarlo fácilmente, permitiendo optimizar las aplicaciones. El resultado
puede llegar a ser hasta 5 veces más rápidas.
Componentes:
La arquitectura de una aplicación Angular ahora se realiza mediante componentes. En
este caso no se trata de una novedad de la versión 2, ya que en la versión de Angular
1.5 ya se introdujo el desarrollo basado en componentes.

Los componentes son estancos, no se comunican con el padre a no ser que se haga
explícitamente por medio de los mecanismos disponibles, etc. Todo esto genera
aplicaciones más mantenibles, donde se encapsula mejor la funcionalidad y cuyo
funcionamiento es más previsible. Ahora se evita el acceso universal a cualquier cosa
desde cualquier parte del código, vía herencia o cosas como el "Root Scope", que
permitía en versiones tempranas de Angular modificar cualquier cosa de la aplicación
desde cualquier sitio.
5.1.2 Integrando Angular en ASP.NET MVC

AngularJS es un framework de JavaScript que nos permite crear aplicaciones de
“página única” o SPA. AngularJS también nos permite implementar el patrón de diseño
MVVM.
Arrancamos el Visual Studio y creamos un nuevo proyecto de tipo Aplicación web

ASP.NET .NET FrameWork con C#.
Al crear la aplicación, selecciona la opción MVC, tal como se muestra.

Instalando AngularJS
Desde la opción de Proyecto, selecciona la opción Administrando paquetes NUGET.
En la opción EXAMINAR, escriba AngularJS y selecciona AngularJS, la versión más

reciente, tal como se muestra
A continuacion, agregamos un Action en el controlador Home, tal como se muestra

Agrega una Vista, la cual será vacía sin modelo, tal como se muestra.
Aquí en el div, llama una directiva llamada "ng-controller", cuyo valor consiste en el
nombre de la función JavaScript que se quiere aplicar a un Div, Span o cualquier
elemento HTML específico.
Después, en el campo de texto utilizo la directiva "ng-model" que proporciona la unión

entre la Vista y el Modelo. En ng-model, cuyo valor es "test", significa que el valor
introducido en este campo se reemplazará con el valor predeterminado, establecido en
la función JavaScript.
Hay que añadir la directica "ng-app" en la etiqueta HTML. ng-app declara que esto es
una página AngularJS. Si no agregas esta directiva en la etiqueta HTML, tu aplicación
no funcionará correctamente porque no podrá detectar las demás directivas de
AngularJS.

Ahora nuestra aplicación de Hola Mundo está lista para ser ejecutada.
5.1.3 Integrando con una base de datos y Angular
Figura 1
Ref: http://www.macoratti.net/16/03/mvc_crudajs1.htm
Una estrategia para trabajar con Angular en una aplicación ASP.NET MVC es
definir un archivo js para la ejecución de sus métodos en las vistas.
A continuación mostramos las siguientes directivas de AngularJS:
 ng-controller: define el controlador

 ng-repeat - repite la plantilla un cierto número de veces
 ng-click: agrega una función al evento de clic del controlador AngularJS
 ng-model: define un modelo de datos vinculado a nuestra vista
 ng-disabled: deshabilita / habilita el botón

Ahora necesitamos definir la aplicación AngularJS, el módulo, el controlador y

las funciones que utilizaremos en la vista.
Crear el archivo JavaScript e ingrese el nombre App.js. Ingrese el código a

continuación en este archivo:
// define la aplicación angular y el controlador

aplicación var = angular.module ("productApp", []);
// registre el controlador y cree la función para obtener los datos del controlador
MVC
app.controller ("productsCtrl", function ($ scope, $ http) {
$ http.get ('/ home / GetProdutos /')
.success (función (resultado) {
$ scope.produtos = resultado;
})
.error (función (datos) {
console.log (datos);
});
});
Tenga en cuenta que creé un módulo para la aplicación productApp y registré

el controlador productsCtrl para este módulo. Estamos inyectando el servicio $
http de Angular en el controlador.
El servicio $ http es un servicio de Angularjs para leer datos de servidores

remotos. Este soporte permite realizar solicitudes a uno o más servidores, lo
cual es esencial para una aplicación del lado del cliente como la nuestra que
necesita obtener y definir datos de un servidor.
El servicio $ http ayuda a facilitar la comunicación con servidores remotos a

través de HTTP y el objeto XMLHttpRequest o mediante JSONP.
El servicio $ http realiza una solicitud asincrónica con el servidor utilizando un

único argumento, que es la configuración del objeto, nuestro ejemplo sería el
método get, y se da una respuesta como una promesa.
Nota: Observe en el método get la sintaxis: '/ home / GetProdutos /' donde
home se refiere al controlador HomeController.
Entonces, para manejar el objeto de promesa devuelto, agregamos las

funciones success () y / o error () que manejarán el resultado con éxito o con
error.

Resumen
 La Inversión de Control es un patrón de diseño pensado para permitir un menor
acoplamiento entre componentes de una aplicación y fomentar así el reuso de los mismos.
 Actualmente existen dos técnicas de implementación para el IoC: Inyección de
dependencias y Service Locutor; en este manual nos enfocaremos en la implementación de
la Inyección de Dependencia (DI).
 Service Locator es un patrón que nos permite localizar servicios. Es una clase, el
ServiceLocator a la cual le podemos pedir instancias de un servicio concreto. Esto es útil
para poder tener distintas implementaciones de un mismo servicio y cambiar, mediante
configuración, la implementación que queremos que devuelva el ServiceLocator cuando le
pidamos la instancia del servicio. ServiceLocator actúa como un catálogo central de
instancias de servicios al que le podemos solicitar la instancia del servicio que
necesitemos.
 Para un localizador más sofisticado puedo heredar del Localizador de Servicios y pasar
esta subclase en la variable de la clase de registro. Puedo cambiar los métodos estáticos
para llamar a un método en la instancia en lugar de acceder directamente a las variables
de instancia. Puedo proporcionar localizadores para un hilo específico usando una
ubicación de almacenamiento específica para el hilo.
 Una dependencia entre un componente y otro, puede establecerse estáticamente o en
tiempo de compilación, o bien, dinámicamente o en tiempo de ejecución. Es en éste último
escenario es donde cabe el concepto de inyección, y para que esto fuera posible, debemos
referenciar interfaces y no implementaciones directas.
 Lo que propone entonces la Inyección de dependencias, es no instanciar las dependencias
explícitamente en su clase, sino que declarativamente expresarlas en la definición de la
clase. La esencia de la inyección de las dependencias es contar con un componente capaz
de obtener instancias validas de las dependencias del objeto y pasárselas durante la
creación o inicialización del objeto.
 En la inyección basada en un constructor, se creará una instancia de BusinessFacade
usando un constructor parametrizado al cual se le pasará una referencia de un
IBusinessLogic para poder inyectar la dependencia.
 Puede buscar:
 https://medium.com/asp-net-and-angular/how-to-create-an-asp-net-mvc-5-project-with-
angular-6-in-visual-studio-part-1-8b116e19a335
 https://programacion.net/articulo/aprende_como_funciona_angularjs_con_este_sencillo
_ejemplo_1239
 http://www.macoratti.net/16/03/mvc_crudajs1.htm

APÉNDICE

JQUERY Y AJAX
Introducción al Jquery
jQuery es la librería JavaScript que ha irrumpido con más fuerza como alternativa a
Prototype. Su autor original es John Resig, aunque como sucede con todas las librerías
exitosas, actualmente recibe contribuciones de decenas de programadores. jQuery
también ha sido programada de forma muy eficiente y su versión comprimida apenas
ocupa 20 KB.
jQuery comparte con Prototype muchas ideas e incluso dispone de funciones con el
mismo nombre. Sin embargo, su diseño interno tiene algunas diferencias drásticas
respecto a Prototype, sobre todo el "encadenamiento" de llamadas a métodos.
Agregando la librería
en el _Layout
Estructura de programación en Jquery

El símbolo $ indica que este es una sentencia de jQuery, puede ser reemplazada por la
palabra jQuery.
El evento .ready() tiene como finalidad ejecutaruna función inmediatamente después

de cargar todo el documento HTML y su DOM correspondiente, garantizando que el
código sea ejecutado sobre los elementos que ya hayan sido desplegados.
En este script de código, invocamos el objeto jQuery con el parámetro "document" y le

paso una función anónima para ser ejecutada cuando se dispare el evento "ready".
Funcion Jquery donde al

cargar la pagina visualiza
un mensaje

Selectores
Permiten obtener el contenido del documento para ser manipularlo. Al utilizarlos, los
selectores retornan un arreglo de objetos que coinciden con los criterios especificados.
Este arreglo no es un conjunto de objetos del DOM, son objetos de jQuery con un gran
número de funciones y propiedades predefinidas para realizar operaciones con los
mismos.
Los selectores básicos están basados en la sintaxis CSS y funcionan mas o menos de
la misma manera:
Select Descripción
nombre de etiqueta Encuentra elementos por etiqueta HTML
#id Encuentra elementos por ID o identificador
.clase Encuentra elementos por clase
etiqueta.clase Encuentra elementos del tipo de la etiqueta que tenga la
clase “clase”
etiqueta#id.clase Encuentra los elementos del tipo de la etiqueta que tienen
el ID y la clase
* Encuentra todos los elementos de la página
Filtros
Los filtros se utilizan para proveer un mayor control sobre como los elementos son
seleccionados en el documento.
Los filtros en jQuery vienen en 6 catagorias distintas: Básicos, Contenido, visibilidad,

atributo, hijo, formulario. Entre los filtros básicos tenemos:
Select Descripción
:first Selecciona solo el primero de los elementos en la lista
:last Selecciona solo el ultimo de los elementos en la lista
:even Selecciona solo los elementos en posiciones pares de la lista
:odd Selecciona solo los elemento en posiciones impares de la lista
:eq(n) Obtiene elementos que están solo en el índice especificado
:gt(n) Incluye elementos que están después del índice especificado
:lt(n) Incluye elementos que están antes del índice especificado
:heder Selecciona todos los elementos tipo encabezado (H1, H2, etc.)
:animated Selecciona todos los elementos que están siendo animados
:not(selector) Incluye todos los elementos que no cumplen con el selector
proporcionado
Manipulando contenido
Cuando seleccionamos y filtramos contenido de una página web, lo hacemos
normalmente porque queremos hacer algo con el: crear nuevo contenido y agregarlo
dinámicamente a la página.
jQuery tiene funciones para crear, copiar, eliminar y moved contenido, incluso para
envolver elementos dentro de otros. También provee soporte para trabajar con css.
Los métodos html() y text() permiten obtener y asignar contenido:
 html(): retorna el HTML contenido en el primer elemento seleccionado.

 html(htmlString): le asigna el valor de la variable htmlString como contenido HTML
a todos los elementos encontrados.
 text(): retorna el texto contenido en el primer elemento seleccionado.
 text(htmlString): le asigna el valor de la variable htmlString como texto a todos los
elementos encontrados.
Si pasamos HTML la función text(), el código será escapado y mostrado como texto.

Manipulando Atributos
jQuery permite la manipulación de atributos de uno o varios elementos HTML mediante
las siguientes funciones:
 attr(nombre): Retorna el valor del atributo "nombre" del elemento seleccionado.
 attr({nombre: valor}): Asigna varios atributos del elemento seleccionado. Para
asignar los atributos se usa la notación de objeto de javascript (JSON).
 attr(nombre, valor): Asigna "valor" al atributo "nombre" del elemento seleccionado.
 removeAttr(nombre): Elimina el atributo "nombre" del elemento seleccionado.
Un ejemplo es asignarle a la etiqueta <img> los atributos del origen y alt
Funcion Jquery donde

asigna propiedades a la
etiqueta <img>
Insertando Contenido
Las siguientes funciones permiten para agregar contenido a los elementos
seleccionados:
 append(contenido): agrega el contenido dentro del los elementos seleccionados.
 appendTo(selector): agrega el contenido a otros elementos especificados.
 prepend(contenido): agrega el contenido de primero dentro de los elementos
seleccionados.
 prependTo(selector): agrega el contenido de primero a otros elementos
especificados.
 after(contenido): agrega el contenido después del elemento seleccionado.
 before(contenido): agrega el contenido antes del elemento seleccionado.
 insertAfter(selector): agrega el contenido después de otros elementos elementos
seleccionados.
 insertBefore(contenido): agrega el contenido antes de otros elementos elementos
seleccionados.
En el siguiente ejemplo, agregamos elementos a la lista <ul>
Funcion Jquery donde agrega

elementos a la lista <ul>

Manejo de eventos
jQuery define una lista de eventos y funciones para la administración de los mismos, la
sintaxis por defecto para un manejador de evento es de la siguiente forma
$.fn.nombreEvento.
Entre los eventos más comunes:
Evento Descripción
.blur() Se lanza sobre un elemento que acaba de
perder el foco. Aplicable a los inputs de
formularios
.click() Se lanza cuando pinchamos sobre el
elemento que hemos asociado el evento.
.dblclick() Se lanza cuando hay un doble click sobre
el elemento
.focus() Evento que permite saber cuando un
elemento recibe el foco.
.hover() Se lanza cuando el mouse esta encima
del elemento del evento.
.keydown() Se lanza cuando el usuario pulsa una
tecla
.keypress() Se lanza cuando se mantiene presionada
la tecla, es decir, se lanza cada vez que
se escriba el carácter.
.load() Se lanza tan pronto el elemento ha
terminado de cargarse por completo.
.mousedown() Se lanza cuando pinchamos un elemento
.mousemove() Se lanza cuando el mouse esta encima
del elemento.
.mouseover() Se lanza cuando el mause entra por
primera vez en el elemento.
.one() Igual que el bind() pero el evento se
ejecuta una vez
.select() Se lanza cuando el usuario selecciona un
texto.
.toggle() Se utiliza para generar comportamientos
de cambio de estado generados al pinchar
sobre un elemento
Atributos del objeto Event

El objeto Event es pasado a todos los eventos que se lanzan y pone a nuestra
disposición una serie de atributos muy útiles a la hora de trabajar con eventos.
Atributo Descripcion
event.currentTarget Devuelte el elemento sobre el que se ha
lanzado el evento. Por ejemplo, si el evento
es un onclick de un enlace, el currentTarget
sería el enlace.
event.data Devuelve los datos que hayamos podido
pasar al evento cuando se asocia con bind
event.isDefaultPrevented() Devuelve si se ha lanzado el método
preventDefault() o no.

event.isImmediatePropagationStopped() Devuelve si el método

stopImmediatePropagation() se ha llamado,
o no, en este objeto.
event.isPropagationStopped() Devuelve si el método stopPropagation() ha
sido llamado
event.pageX Devuelve la posición relativa del ratón en
relación a la esquina izquierda del
documento. Esta propiedad es muy útil
cuando trabajamos con efectos.
event.pageY Devuelve la posición relativa del ratón con
respecto a la esquina superior del
documento.
event.preventDefault() Si llamamos a este método dentro de un
evento, la acción predeterminada que se
ejecutaría por este evento nunca será
ejecutada.
event.stopImmediatePropagation() Previene que se ejecuten otras acciones que
pudieran estar asociadas al evento.
event.stopPropagation() Previene que se ejecute cualquier evento
que pudiera estar asociado a los padre del
elemento dentro del árbol DOM.
event.target Es el elemento DOM que inició el evento
event.timeStamp Número en milisegundos desde el 1 de
enero de 1970, desde que el evento fue
lanzado. Esto podría ayudarnos para realizar
pruebas de rendimiento de nuestros scripts.
event.which Para eventos de teclado y ratón, este
atributo indica el botón o la tecla que ha sido
pulsada.
En el siguiente ejemplo definidos el evento click para los botones Saludos y Salir
utilizando jquery
Defina los eventos para los

input button
Recorrer los elementos del proyecto

Para iterar sobre la información obtenida del documento disponemos de las siguientes
funciones:
 size(): Retorna el numero de elementos en la lista de resultados. También se

puede obtener a través de la propiedad length;

 get(): Retorna una lista de elementos del DOM. Esta función es útil cuando se
necesitan hacer operaciones en el DOM en lugar de usar funciones de jQuery.
 get(posición): Retorna un elemento del DOM que esta en la posición especificada.
 find({expresión}): Busca elementos que cumplen con la expresión especificada.
 each(callback(i, element)): Ejecuta una función dentro del contexto de cada
elemento seleccionado. Ejecuta un callback recibiendo como parámetro la posición
de cada elemento y el propio elemento.
Jquery y Ajax
AJAX significa Asynchronous JavaScript and XML. Esta tecnología nos permite
comunicarnos con un servicio web sin tener que recargar la página. Con jQuery, hacer
uso de AJAX es muy sencillo. JQuery provee varias funciones para trabajar con AJAX.
La mas común es usar $.ajax().
Parametros de la función Ajax

 url: La dirección a donde enviar la solicitud.
 type: Tipo de request (solicitud). Ejemplo: GET, POST, PUT, DELETE, etc. En
caso de utilizar POST o PUT, por ejemplo, se puede enviar un objeto en otro
parámetro a la misma función llamado data. Ej: data: {'clave': 'valor'},
 datatype: El tipo de respuesta que se espera, en este caso es json.
Funciones
$.get():Realiza una llamada GET a una dirección específica. Esta función nos indica si
la operación fue exitosa y ha tenido errores.
$.getJSON(): es muy similar a la anterior, solo que es específica para cuando se

espera una respuesta tipo json. Para esta función se debe agrega ‘callback=?’ a la url.

$.getScript(): Carga un archivo Javascript a una dirección especifica.
$
.
p
o
st(): realiza una llamada POST a una dirección URL
$
.
l
o
a
d
(): carga una dirección url y coloca los datos retornados en los elementos
seleccionados.
Eventos Globales
Jquery ofrece un conjunto de funciones que se invocan automáticamente cuando se
dispara su evento correspondiente.
$.ajaxComplete(): es llamada cuando una función AJAX es completada
$.ajaxError(): es llamada cuando una función AJAX es completada pero con errores
$.ajaxSend(): se invoca cuando un AJAX es enviado

$.ajaxStart(): JQuery lleva un control de todas las llamadas AJAX que ejecutas. Si
ninguna está en curso, esta función es invocada.
$.ajaxStop(): se invoca cada vez que una función AJAX es completada y quedas otras
en curso. Incluso es invocada cuando la ultima función AJAX es cancelada.
$.ajaxSuccess(): es invocada cuando una función AJAX termina exitosamente.

Laboratorio
Creando una aplicación ASP.NET MVC y Jquery
Implemente un proyecto ASP.NET MVC donde permita realizar operaciones de listado y
actualización de productos utilizando anotaciones y ventanas de dialogo en jquery.

Primeramente definimos la clase en la carpeta Models: Agregar una clase llamada Producto
Seleccionar la
opción
En la plantilla selecciona Clase y asigne su nombre: Producto, presiona el botón Agregar
Nombre de la clase

En la clase defina la librería de Anotaciones y Validaciones
Importar la librería
A continuación defina la estructura de la clase Producto, validando el ingreso de sus datos.

Para trabajar con las ventanas modales con Jquery, utilizaremos dos librerías: jquery-1.8.2 y
jquery-ui-1.8.2.min, tal como se muestra.
Librerías a utilizar
En la carpeta Scripts, agregue un archivo JavaScript llamado jsEventos, tal como se muestra
Selecciona item
Nombre del archivo

A continuación defina cada uno de las acciones a los objetos que utilizaremos en el proceso
En el _Layout.cshtml, agregue las librerías de trabajo, tal como se muestra y comentar la línea
@Script.Render.
Agregar las librerías

al _Layout
Comentar la línea

A continuación agregamos, en la carpeta Controllers, un controlador llamado Home, tal como

se muestra.
Seleccionar
Agregar el controlador llamado HomeController, tal como se muestra
Nombre del
controlador

En el controlador Home, primero importamos la librería Models.

A continuación definimos la lista de Producto, llamada Productos, tal como se muestra.
Definimos un metodo para cargar los datos a los productos llamado cargarProductos()
En el Action Index, enviamos la lista de Productos.
Importar la librería
Defina la lista de Productos
Retorna la lista a la Vista
A continuación agregamos la Vista a la acción Index.En la ventana

 Activar la opción crear una vista fuertemente tipada y selecciona la clase Producto.
 En la plantilla Scaffold, selecciona la opción List, tal como se muestra
 Activar la opción Crear como vista parcial, presiona el boton Agregar
Activar la opción y
selecciona la clase de
modelo Producto
Selecciona la plantilla List
Selecciona, crear como vista parcial

A continuación se diseña la Vista Index, donde aparece en el encabezado el modelo de la

clase, la lista de productos y las opciones para Agregar, Editar, Actualizar y Eliminar
Script para ejecutar los botones
Botones que ejecutan

los procesos
Bloque donde se muestran

las ventanas modales
Action Create
En el controlador defina la opción Create, el cual agrega un nuevo producto a la Lista
Accion que envía la

Vista
Accion que recibe los

datos de la Vista y
agrega el registro

A continuación agrega la Vista a la acción Create, tal como se muestra, donde seleccionamos
la clase de modelo: producto; selecciona la plantilla para scaffold: Create
modelo Producto
Selecciona la plantilla Create
En la vista Create, diseñarla tal como se muestra en la figura.

Action Details
En el controlador defina la acción Details, el cual retorna el registro de Productos por su campo
id. Defina el proceso tal como se muestra.
Accion que envía el

registro a la Vista
A continuación agrega la Vista a la acción Details, tal como se muestra, donde seleccionamos
la clase de modelo: producto; selecciona la plantilla para scaffold: Details
modelo Producto
Selecciona la plantilla Details

A continuación diseña la vista Details, tal como se muestra
Action Edit
En el controlador defina la acción Edit, el cual retorna el registro de Productos por su campo id,
y recibe el registro para actualizar sus datos. Defina el proceso tal como se muestra

registro a la Vista
Accion que recibe el

registro de la Vista y
actualiza los datos

A continuación agrega la Vista a la acción Edit, tal como se muestra.
modelo Producto
Selecciona la plantilla Edit
A continuación diseña la Vista, tal como se muestra.

Action Delete
En el controlador defina la acción Delete, el cual retorna el registro de Productos por su campo
id, y confirmas la eliminación del registro por su id. Defina el proceso tal como se muestra

registro a la Vista
Accion que recibe el

registro de la Vista y
elimina el registro
A continuación agrega la Vista Delete, tal como se muestra
Selecciona la plantilla
Delete

Defina la vista tal como se muestra.
Para ejecutar el proceso presiona F5, donde se procede a: Agregar, Visualizar, Editar y
Eliminar productos utilizando pantallas modales

BOOTSTRAP
Introducción
Bootstrap es un framework CSS lanzado por un grupo de diseñadores de Twitter, para
maquetar y diseñar proyectos web, cuya particularidad es la de adaptar la interfaz del
sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta
automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de
diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.
Bootstrap brinda una base pre-codificada de HTML y CSS para armar el diseño de una
página web o una aplicación web, y al ofrecerse como un recurso de código abierto es
fácil de personalizar y adaptar a múltiples propósitos.
Al incorporar estilos para una enorme cantidad de elementos utilizados en websites y

aplicaciones modernas, reduce enormemente el tiempo necesario para implementar un
site al mismo tiempo que mantiene la capacidad para ser flexible y adaptable.
Una ventaja es que, por lo mismo que en sí mismo no requiere conexión con una base
de datos, un sitio web implementado en Bootstrap corre perfectamente desde una
versión local, sin acceso a un servidor.
Estructura y función
Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS
que implementan la variedad de componentes de la herramienta. Una hoja de estilo
llamada bootstrap.less incluye los componentes de las hojas de estilo. Los
desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los
componentes que deseen usar en su proyecto.
Los ajustes son posibles en una medida limitada a través de una hoja de estilo de
configuración central. Los cambios más profundos son posibles mediante las
declaraciones LESS.El uso del lenguaje de hojas de estilo LESS permite el uso de
variables, funciones y operadores, selectores anidados, así como clases mixin.
Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial
de "Personalizar" en la documentación. Por otra parte, los desarrolladores eligen en un
formulario los componentes y ajustes deseados, y de ser necesario, los valores de
varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye
la hoja de estilo CSS pre-compilada.
Sistema de cuadrilla y diseño sensible

Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho.
Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para
ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas
resoluciones y tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje,
tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el
ancho de las columnas automáticamente.
Entendiendo la hoja de estilo CSS

Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas
de estilo para todos los componentes de HTML. Esto otorga una uniformidad al
navegador y al sistema de anchura, da una apariencia moderna para el formateo de los
elementos de texto, tablas y formularios.
Componentes re-usables
En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de
elementos comúnmente usados. Ésta incluye botones con características avanzadas
(e.g grupo de botones o botones con opción de menú desplegable, listas de
navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.),
etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes
de alerta y barras de progreso.

Plug-ins de JavaScript
Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de
JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen
elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles.
También extienden la funcionalidad de algunos elementos de interfaz existentes,
incluyendo por ejemplo una función de auto-completar para campos de entrada (input).
Estilos de bootstrap
Archivos js

Aplicación ASP.NET MVC con Bootstrap

Implemente un proyecto ASP.NET MVC con bootstrap que permita abrir ventanas modales.
Creando el proyecto
1. Seleccionar el proyecto Web Visual Studio 2012
2. Seleccionar el FrameWork: 4.5.1
3. Seleccionar la plantilla Aplicación web de ASP.NET MVC 4
4. Asignar el nombre del proyecto
5. Presionar el botón ACEPTAR
Selecciona el tipo
de proyecto
Nombre del
proyecto
A continuación, seleccionar la plantilla del proyecto:

 Seleccionar la plantilla Básico
 Seleccionar el motor de vistas: Razor
En el proyecto agregar el FrameWork Bootstrap para ser implementado en la aplicación

ASP.NET MVC, tal como se muestra

Versión del bootstrap
Seleccionar e instalar
Instalado el framework, se podrá visualizar los archivos dentro del explorador de soluciones
Archivos js

En el archivo BundleConfig vamos a incluir varios archivos y librerías js y cs, tal como se muestra. En
lugar de incluir directamente las etiquetas <link> o <script> para referenciar los archivos externos, lo que
llamamos es Styles.Rendery Scripts.Render
En la pagina _Layout.cshtml, referenciamos las librerías utilizando @Scripts. Render y @Styles.Render,

tal como se muestra
Referenciar a las librerías .js
Referenciar a las librerías .css

En la carpeta Controllers, agrega un controlador llamado Home.
Controlador Home
En la acción Index, agrega una vista, tal como se muestra.
Vista Index

En la ventana Index, agrega el código script, tal como se muestra
Script donde programa el boton

btnSaludo y btn-primary
Utilizando las clases del bootstrap

defino el diseño de la ventana
modal
Ejecuta el proyecto, presionando F5. Al presionar el boton Saludo, se visualiza una ventana
Modal, tal como se muestra.

Aplicación ASP.NET MVC con Bootstrap

Implemente un proyecto ASP.NET MVC con bootstrap que permita realizar el mantenimiento de
datos utilizando ventanas modales.
Creando el proyecto
1. Seleccionar el proyecto Web Visual Studio 2012
2. Seleccionar el FrameWork: 4.5.1
3. Seleccionar la plantilla Aplicación web de ASP.NET MVC 4
4. Asignar el nombre del proyecto
5. Presionar el botón ACEPTAR
Selecciona el tipo
de proyecto
Nombre del
proyecto
A continuación, seleccionar la plantilla del proyecto:

 Seleccionar la plantilla Básico
 Seleccionar el motor de vistas: Razor

En el proyecto agregar el FrameWork Bootstrap para ser implementado en la aplicación

ASP.NET MVC, tal como se muestra
Versión del bootstrap
Seleccionar e instalar
Instalado el framework, se podrá visualizar los archivos dentro del explorador de soluciones
Archivos js

Trabajando con el modelo de datos

En la carpeta Models agregar una clase llamada Producto, tal como se muestra en la figura
Agregar la clase Producto
En la clase Producto, defina su estructura y sus validaciones, tal como se muestra
Validaciones y notaciones
Estructura de la clase
producto

En el archivo compartido _Layout.cshtml, agregar los Scripts y Styles del bootstrap, tal como se
muestra
Trabajando con el Controlador y las Vistas
En la carpeta Controllers, agregar el controlador llamado HomeController, tal como se muestra

en la figura.
Controlador Home

ActionResult Index
En la ventana del controlador, defina el ActionResult Index, el cual retorna la lista de los
registros de Producto.
Referencia a la carpeta Models
Lista de Productos
A continuación agrega una Vista al Action Index, donde seleccionamos la clase Producto y la
plantilla List, tal como se muestra.

Vista Index.cshtml, tal como se muestra.
Codifica en la vista Index, para trabajar con ventanas modales en los procesos
Script para programar el

evento Click de btnNuevo
Bloque donde se muestra la

ventana modal al ejecutar un
proceso
Etiqueta btnNuevo

Trabajando con el ActionResult Nuevo
A continuación defina el ActionResult Nuevo, tal como se muestra
Nuevo (Get)
Nuevo (Post) el cual

permite agregar un
registro a la coleccion
A continuación agregamos la Vista a la acción Nuevo, donde seleccionamos la clase Producto

y la plantilla será Create, tal como se muestra

En la vista Nuevo, realizar los cambios a la vista, tal como se muestra
Estructura de datos
Para verificar el proceso, presiona la tecla F5, al presionar el boton Nuevo, se muestra una
ventana modal para el ingreso de productos. Ingrese los datos, al presionar el boton Create, se
cierra la ventana modal y se visualiza la ventana principal con el registro agregado

Trabajando con el ActionResult Detalle
En el controlador Home, defina la acción Detalle, donde retorna el producto seleccionado por
su campo id, tal como se muestra.
ActionResult Detalle
Defina la vista para la acción Detalle. Selecciona la clase de modelo Producto y la plantilla
Details, tal como se muestra.

En la ventana Detalle.cshtml, realice los cambios tal como se muestra.
Regresamos a la vista Index para agregar el objeto btnDetalle y definimos su evento para
mostrar en la ventana modal los datos del producto seleccionado
Evento del boton btnDetalle
Objeto btnDetalle

Para comprobar su funcionalidad, presionar F5 para ejecutar el proyecto. Al presionar la opción

Detalle, se visualiza los datos del producto seleccionado.

Manual de Desarrollo Servicio Web I

Cargado por

Copyright:

Formatos disponibles

Manual de Desarrollo Servicio Web I

Cargado por

Información del documento

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

Manual de Desarrollo Servicio Web I

Cargado por

Copyright:

Formatos disponibles

Desarrollo de

CIBERTEC CARRERAS PROFESIONALES

CIBERTEC CARRERAS PROFESIONALES

3.1.1 : Proceso E-Commerce 82

4.1.1 : Introducción a los servicios WCF 107

4.1.2 : Servicio WCF 108

4.1.3 : Implementando un servicio WCF con acceso a datos 110

4.2 : Implementación y consumo de servicios WEB API 135

4.2.1 : Web API y el modelo MVC 135

4.2.2 : Verbos HTTP y convención para la implementación de 135

5.1 : AngularJS 157

CIBERTEC CARRERAS PROFESIONALES

Visual Studio 2015 y su plataforma .NET FrameWork permite implementar

El curso de Desarrollo de Servicio Web I pertenece a la Escuela de

El manual para este curso ha sido diseñado bajo la modalidad de unidades de

El curso es eminentemente práctico, consiste en un taller de programación con

Este manual reviste importancia para una capacitación en conocimientos

CIBERTEC CARRERAS PROFESIONALES

CIBERTEC CARRERAS PROFESIONALES

Desarrollo de Servicio Web I

Introducci Trabajando Implementa Consumo Trabajando

Recuperan Manipulan Implement Implement

CIBERTEC CARRERAS PROFESIONALES

CIBERTEC CARRERAS PROFESIONALES

Al término de la unidad, el alumno desarrolla interfaces de usuario para una aplicación

Tema 1.1: Introducción a ASP.NET MVC (3 horas)

 Los alumnos implementan un proyecto web utilizando en patrón de diseño

CIBERTEC CARRERAS PROFESIONALES

CIBERTEC CARRERAS PROFESIONALES

1. INTRODUCCIÓN AL DESARROLLO WEB

- Uso del patrón Modelo-Vista-Controlador.

La siguiente figura muestra los principales componentes de su arquitectura:

¿ASP.NET MVC es mejor que ASP.NET Web Form?

CIBERTEC CARRERAS PROFESIONALES

El marco ASP.NET MVC ofrece las siguientes ventajas:

El marco de trabajo basado en formularios Web ofrece las siguientes ventajas:

1.1.1 Plataforma de ASP.NET MVC

ASP.NET MVC es la plataforma de desarrollo web de Microsoft basada en el conocido

CIBERTEC CARRERAS PROFESIONALES

Su arquitectura permite separar las responsabilidades de una aplicación Web en partes

La clase Controller hereda de ControllerBase y es la implementación predeterminada

 Localizar el método de acción adecuado para llamar y validar que se le puede

Todas las clases de controlador deben llevar el sufijo "Controller" en su nombre. En el

1.1.3. URL de Enrutamiento

CIBERTEC CARRERAS PROFESIONALES

Las rutas son lógicas, es decir, siguen la estructura definida en la tabla de

1.1.4. Implementando acciones (POST/GET)

El uso de POST equivale al uso de formularios HTML. La principal diferencia entre

CIBERTEC CARRERAS PROFESIONALES

En el modelo Model-View-Controller (MVC), las vistas están pensadas exclusivamente

 Creación de Vistas de Tipado Fuerte: Esta casilla se selecciona cuando la vista va

CIBERTEC CARRERAS PROFESIONALES

1.1.6. Sintaxis Razor y Scaffolding

El uso de la @ funciona de dos maneras básicas:

 @expresión: Renderiza la expresión en el navegador. Así @item.Nombre muestra

Scaffolding implica la creación de plantillas a través de los elementos del proyecto a

La técnica scaffolding es un proceso de un solo sentido. No es posible volver a aplicar

CIBERTEC CARRERAS PROFESIONALES

1.1.7. ViewData y ViewBag

El ViewData es un objeto del tipo diccionario (clave – valor) que no requiere