Lenguaje de Programacion III

Lenguaje de
Programacin III
LENGUAJE DE PROGRAMACIN III
CIBERTEC
CARRERAS PROFESIONALES
NDICE
Presentacin
Red de contenidos
Unidad de aprendizaje 1
1.1 Tema 1
: Introduccin a la Web y ASP.NET
1.2 Tema 2
: Mantenimientos y seguridad con MVC 4.0
1.3 Tema 3
: OAuth Providers con MVC 4.0
2.1 Tema 4
: Interaccin con el Modelo
2.2 Tema 5
: El lenguaje Razor y los HTML Helpers
2.3 Tema 6
: Vistas
3.1 Tema 7
: El patrn Repository
3.2 Tema 8
: Inversion of Control (IoC)
3.3 Tema 9
: Ajax y Jquery
4.1 Tema 10
: ASP.NET Web Form
4.2 Tema 11
: Aplicaciones en 3 capas con ASP.NET Web Form I
4.3 Tema 12
: Aplicaciones en 3 capas con ASP.NET Web Form II
CIBERTEC
CIBERTEC
PRESENTACIN
El curso de Lenguaje de Programacin III pertenece a la Escuela de Tecnologa de
Informacin y se dicta en las carreras de Tecnologa de la institucin. Este curso brinda un
conjunto de herramientas de programacin para trabajar en aplicaciones web, en funcin
al diseo de pginas web y con un origen de datos que permita al alumno realizar, en
forma eficiente, operaciones de consulta y actualizacin de datos bajo el entorno web.
El manual para este curso ha sido diseado bajo la modalidad de unidades de aprendizaje,
las que desarrolla 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 prcticos que deber desarrollar en cada sesin, los que le
permitir reforzar lo aprendido en la clase.
El curso es eminentemente prctico. Consiste en diseo y programacin de aplicaciones
web con base de datos utilizando ADO .NET Entity Framework. La primera parte de este
manual ensea a familiarizarse con el entorno de desarrollo de una aplicacin web MVC
4.0: diseo del modelo, uso del Entity Framework Code First, generacin de
mantenimientos con el scafoolding, todo ello mediante ejemplos didcticos. Luego, se
desarrollar el tema de las vistas y controladores, de manera ms detallada,
implementando una solucin ecommerce. Finalmente se implementan mejoras a la
solucin dando una mayor interactividad del lado del cliente con Jquery, Ajax y adopcin
de patrones de software considerados Best Practices.
Este manual reviste importancia para una capacitacin en conocimientos generales en el
manejo de aplicaciones web, utilizando la tecnologa de punta que se implementa
actualmente en el mercado.
CIBERTEC
REDDECONTENIDOS
Lenguaje de Programacin III
Diseo de
un sitio web
con MVC
Introduccin
a ASP.Net
4.0
CIBERTEC
Diseo
con
Master
Pages
y
manejo
de
estado
Acceso a
datos con
EF y
seguridad
Control
es de
usuario
Acceso
a datos
con
ADO.N
et y
manejo
de
capas
Manejo de
JQUERY y
AJAX
Manejo
de
WebSe
rvices
y WCF
Manejo
de
control
es de
AJAX
ASP.Net
MVC
Manejo
de
imgene
sy
Proyect
os de
AJAX
AJAX
MVC
(Modelo
Vista
Controlad
or)
UNIDAD DE
APRENDIZAJE
1
Logros de la unidad de aprendizaje
Al trmino de la unidad, los alumnos, utilizando los conceptos explicados en clase, tienen claro
los componentes que forman parte de la arquitectura de la Web y las tecnologas que lo
implementan, adicionalmente se tendr una clara diferenciacin entre ASP.NET Web Form y
MVC, conociendo sus ventajas y desventajas.
Finalmente, con las tcnicas explicadas en clase, estarn en la capacidad de construir
aplicaciones Web orientadas a Datos con MVC, Entity Framework, seguridad con Simple
MembershipProvider e integracin con proveedores de autenticacin externas, tales como
Facebook, Google, etc.
1. INTRODUCCIN A LA WEB Y ASP.NET

TEMARIO:
Arquitectura de la Web
Patrn MVC (Modelo Vista Controlador)
ASP.NET MVC 4.0
Scaffolding y Razor
Web Form y MVC
Laboratorio
Resumen
1.1. Arquitectura de la Web

La World Wide Web (WWW o simplemente la "Web") es un medio global de informacin
cuyos usuarios pueden leer y escribir en ella a travs de computadoras conectadas a
Internet. El trmino es a menudo usado errneamente como un sinnimo para la Internet
misma, pero la Web es un servicio que opera sobre la Internet, como tambin lo hace el
correo electrnico.
En 1980, Tim Berners-Lee, un contratista independiente en la Organizacin Europea para
la Investigacin Nuclear (CERN por sus siglas en ingles), Suiza, desarroll ENQUIRE,
como una base de datos personal de gente y modelos de software, pero tambin como
una forma de interactuar con el hipertexto; cada nueva pgina de informacin en
ENQUIRE deba estar enlazada a una pgina existente
En la navidad de 1990, Berners-Lee haba desarrollado todas las herramientas necesarias
para trabajar la Web: el Protocolo de transferencia de hipertexto, el Lenguaje de Marcado
de Hipertexto, el primer navegador web (llamado WorldWideWeb, que fue tambin un
editor de pginas web), el primer servidor de aplicaciones HTTP, el primer servidor web
(http://info.cern.ch) y las primeras pginas web que describan el proyecto mismo.
CIBERTEC
El 6 de agosto de 1991, Berners-Lee public un breve resumen del proyecto de la World

Wide Web en el grupo de noticias alt.hypertext. Esta fecha tambin marca el inicio de la
Web como un servicio pblicamente disponible en Internet.
La Web hoy en da cuenta con una serie de componentes adicionales que interactan
entre s para poder hacer realidad su existencia y correcto funcionamiento.
La siguiente figura muestra los principales componentes de su arquitectura:
Lado del Cliente
Lado del Servidor

Http-Request
3
Http
Internet
Servidor Web
6
Http-Response
5
Browser
IE
FireFox
Chrome
Opera
Safari, etc.
Formato de Datos XML,

Json
Tecnologa Web
ASP.NET
PHP
JSF
JSP
Suite Macromedia
Etc.
Respuesta en HTML
Scripts del Cliente
Java Script
Jquery
1 Cliente Web o Browser: es quien da inicio a la interaccin de la web a travs de un

programa especial llamado Navegador o Browser y solicitando una direccin URL,
actualmente en el mercado los principales navegadores son Internet Explorer, Firefox,
Chrome, Opera, Safari, etc.
2 Protocolo de comunicacin Http: este protocolo hace posible la comunicacin desde la
mquina cliente hasta la mquina servidora donde se encuentran las aplicaciones web, se
vale del ruteo a travs del router, direcciones IP, servidores DNS, etc.
3 Servidor Web: son mquinas especiales que alojan las aplicaciones Web construidas.
En el mercado existe una diversidad de servidores Web tales como Apache, IIS, TomCat,
Http-IBM, etc.
4 Tecnologa Web: son las herramientas que ayudan a crear las aplicaciones Web, las
herramientas ms conocidas son PHP, ASP.NET, JSP, JSF, DreamWeaver, etc.
5 Respuesta HTML: cuando el servidor web recepciona la solicitud de pgina y procesa
el resultado, siempre hacia el usuario final enva un documento de formato especial
llamado HTML, este lenguaje HTML es interpretado por los Browser para formatear y
representar la pgina final.
6 Formato de datos: en algunos escenarios tambin se enva data hacia el lado del
cliente (Web Browser), dos de los formatos ms utilizados para el envo de data son XML y
Json
CIBERTEC
7 Scripts del cliente: finalmente, si se quiere dar mayor interaccin en el Browser, se

ejecutan programas clientes conocidos como cdigos script. Dos de las opciones ms
utilizadas para la ejecucin de script son JavaScript y Jquery.
1.2. Patrn MVC (Modelo Vista Controlador)
El Modelo Vista Controlador (MVC) es un patrn de arquitectura de software que separa
los datos y la lgica de negocio de una aplicacin de la interfaz de usuario y el mdulo
encargado de gestionar los eventos y las comunicaciones. Para ello, MVC propone la
construccin de tres componentes distintos que son el modelo, la vista y el controlador, es
decir, por un lado define componentes para la representacin de la informacin, y por otro
lado para la interaccin del usuario. Este patrn de diseo se basa en las ideas de
reutilizacin de cdigo y la separacin de conceptos, caractersticas que buscan facilitar la
tarea de desarrollo de aplicaciones y su posterior mantenimiento.
Modelo
Contiene el ncleo de la funcionalidad (dominio) de la aplicacin.
Encapsula el estado de la aplicacin.
No sabe nada / independiente del Controlador y la Vista.
Vista
Es la presentacin del Modelo.
Puede acceder al Modelo pero nunca cambiar su estado.
Puede ser notificada cuando hay un cambio de estado en el Modelo.
Controlador
Reacciona a la peticin del Cliente, ejecutando la accin adecuada y creando el modelo
pertinente
Es importante mencionar que el patrn MVC no es exclusivo para el diseo Web, en sus
inicios fue muy utilizado para el desarrollo de interfaces graficas de usuario (GUI), por otro
lado tampoco es una implementacin propietaria de alguna empresa tecnolgica, sea
Microsoft, Oracle o IBM.
MVC est implementado por muchas herramientas tales como:
Ruby
Java
Perl
PHP
Python
.NET
La siguiente figura muestra la idea grafica del patrn MVC para el entorno de la Web.
CIBERTEC
10
1.3. ASP.NET MVC 4.0

Como se coment en el apartado anterior, el patrn MVC es implementado por muchas
herramientas tecnolgicas, Microsoft ha implementado el patrn MVC en su tecnologa de
ASP.NET, para el desarrollo de aplicaciones web.
ASP.NET MVC es un poderoso framework para la construccin de sitios Web basndose
en los estndares de internet actuales tales como HTML 5, jquery, CSS 3, etc.
En el momento de crear este manual la versin actual es la MVC 4.0 que presenta las
siguientes nuevas caractersticas:
Soporte para la creacin de aplicaciones para Facebook.
Soporte para proveedores de autenticacin a travs del OAuth Providers.
Plantillas por default renovadas, con un estilo mejorado.
Mejoras en el soporte para el patrn Inversion Of Control e integracin con Unity
Mejoras en el ASP.NET Web Api, para dar soporte a las implementaciones
basadas en RESTful
Validaciones en lado del modelo
Uso de controladores Asncronos
Soporte para el desarrollo de aplicaciones Web Mvil, totalmente compatible con
los navegadores de los modernos SmartPhone (Windows Phone, Apple y
Android), etc.
1.4. Scaffolding y Razor
La palabra Scaffold est en ingls y en espaol significa "Andamio", pero en
programacin el scaffolding es un mtodo para construir aplicaciones basadas en bases
de datos. Esta tcnica est soportada por algunos frameworks del tipo MVC en el cual el
programador escribe una especificacin que describe cmo debe ser usada la base de
datos. Luego, el compilador utiliza esa especificacin para generar el cdigo que la
aplicacin usar para crear, leer, actualizar y eliminar registros de la base de datos, esto
es conocido como CRUD (create, read, update, delete).El Scaffolding fue popularizado por
el framework Ruby on Rails y ahora es utilizado por otros frameworks tales como
CakePHP, Symfony, ASP.NET MVC, etc.
El valor agregado de ASP.NET MVC es su extremada sencillez al momento de hacer uso
del Scaffold, generando aplicaciones de mantenimiento en tiempo record.
La siguiente imagen muestra la parte donde se va a generar todo el cdigo a travs del
Scaffolding.
CIBERTEC
11
Por otro lado el equipo de ASP.NET vio la necesidad de contar con un motor de
renderizado que sea simple, til y que de una mayor interaccin entre el modelo y la vista.
El resultado de esta necesidad es Razor.
ASP.NET Web Pages-Razor proporciona una sintaxis de programacin simple para
escribir cdigo en pginas web donde el cdigo basado en servidor se incrusta en el
formato HTML de las pginas web. El cdigo de Razor se ejecuta en el servidor antes de
que la pgina se enve al explorador. Este cdigo de servidor puede crear dinmicamente
contenido de cliente, es decir, puede generar formato HTML u otro contenido sobre la
marcha y, a continuacin, enviarlo al explorador junto con cualquier cdigo HTML esttico
que contenga la pgina
Finalmente, Razor no es un nuevo lenguaje de programacin, por el contrario se basa en
sintaxis de C# y VB, teniendo como principal objetivo reutilizar el conocimiento de los
programadores de .NET.
En la siguiente figura se muestra un ejemplo de la sintaxis Razor.
1.5. Web Form y MVC

ASP.NET ofrece dos alternativas para el desarrollo de aplicaciones Web, la tecnologa
ASP.NET MVC y la tecnologa de ASP.NET Web Form.
Ambas opciones presentan una serie de ventajas y desventajas que se muestran en los
siguientes cuadros:
ASP.NET Web Form
Ventajas
Desventajas
Tecnologa madura y estable con soporte
Problemas para dar soporte al paradigma
por miles de controles y herramientas de
de separacin de conceptos (Soc)
terceros
Modelo de programacin orientado a
Problemas para orientarlo a un proyecto de
eventos, hacindose muy similar al
Testing, TDD (Desarrollo orientado al Test)
desarrollo de aplicaciones Windows.
Soporte al manejo de estados.
Problemas de rendimiento cuando se hace
uso excesivo del manejo de estados.
Se necesita un conocimiento bsico de
Menos control del HMTL generado
HTML y javascript para construir interfaces
Web
Excelentes mecanismos de seguridad
Menos soporte para el desarrollo con
construidos de manera automtica.
mltiples equipos (desarrollo paralelo)
CIBERTEC
12
ASP.NET MVC
Ventajas
Desventajas
Ruteo URL y mejor soporte para los
Mayor esfuerzo en el aprendizaje del
motores de bsqueda
framework.
Excelente soporte para el desarrollo de tipo
TDD (Desarrollo orientado al Test)
Mejora en la separacin de conceptos ya
que usa el Modelo, la Vista y el controlador
Fcil manejo en desarrollo con mltiples
equipos.
Total control en el HTML para las vistas
MVC es un framework extensible y es un
proyecto Open Source.
1.6. Laboratorio
Creando una vista Details con MVC 4.0

1. Iniciamos Visual Studio 2012 y creamos un nuevo proyecto
2. Vamos a usar el lenguaje C# con la plantilla Web y el tipo de proyecto Aplicacin web
de ASP.NET MVC 4, como nombre de proyecto ponemos MVC01 y una ubicacin
donde se guardar el proyecto, finalmente damos Aceptar
CIBERTEC
13
1
2
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Bsico y como motor
de vista: Razor y damos click en Aceptar.
CIBERTEC
14
4. En la carpeta Models agregamos una clase llamada Cliente.
5. Agregamos las siguientes propiedades a la clase Cliente.
CIBERTEC
15
6. Ahora, agregamos nuestro controlador, hacemos click derecho a nuestra carpeta

Controllers y agregamos el controlador, tener en cuenta que nuestro controlador se
llamar ClienteController
CIBERTEC
16
7. Dentro del mtodo Index que se crea por defecto, instanciamos un objeto Cliente, este
objeto se devolver a la vista, tal como se muestra:
8. Ahora agregamos la vista, para ello, sobre el mtodo Index del Controlador, hacemos
click derecho y sale la opcin Agregar vista, para este caso, dejamos los valores por
defecto
CIBERTEC
CIBERTEC
17
18
Nota: Tener en cuenta que el MVC crea en la carpeta Views la estructura de carpeta
Cliente, y dentro de la carpeta Cliente un archivo llamado Index.cshtml.
9. En la vista Index que acabamos de crear, en la parte superior, referencia al objeto
Cliente a travs de @model
10. El lenguaje de marcado para crear nuestra vista es Razor, agregamos el siguiente
marcado.
@model Mvc01.Models.Cliente
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<fieldset>
<legend>Cliente</legend>
<div>
<b> @Html.DisplayNameFor(model=>model.ClienteId)</b>
</div>
<div>
@Html.DisplayFor(model=>model.ClienteId)
</div>
<div>
CIBERTEC
19
<b>@Html.DisplayNameFor(model=>model.Apellido)</b>
</div>
<div>
@Html.DisplayFor(model=>model.Apellido)
</div>
<div>
<b> @Html.DisplayNameFor(modelo=>modelo.Nombre)</b>
</div>
<div>
@Html.DisplayFor(modelo=>modelo.Nombre)
</div>
<div>
<b> @Html.DisplayNameFor(modelo=>modelo.Direccion)</b>
</div>
<div>
@Html.DisplayFor(modelo=>modelo.Direccion)
</div>
<div>
<b> @Html.DisplayNameFor(modelo=>modelo.DNI)</b>
</div>
<div>
@Html.DisplayFor(modelo=>modelo.DNI)
</div>
<div>
<b> @Html.DisplayNameFor(modelo=>modelo.FecNac)</b>
</div>
<div>
@Html.DisplayFor(modelo=>modelo.FecNac)
</div>
</fieldset>
11. Finalmente para darle metadata de configuracin, adecuamos la clase Cliente tal como
se muestra:
CIBERTEC
20
12. Ejecutamos (presionando F5) y navegamos a la pgina http://localhost:1171/Cliente,

tener en cuenta que el puerto puede variar segn su mquina.
1.7. Resumen
El funcionamiento de la Web es posible gracias a una serie de componentes que
interactan entre s, tales como el Web Browser, el protocolo Http, los servidores Web,
las aplicaciones Web, el formato HTML, XML, Json, cdigos scripts en Jquery, etc.
MVC es un patrn de software que nos permite un desarrollo de aplicaciones con una
mayor flexibilidad y eficiencia, haciendo una correcta separacin de conceptos, tales
como el modelo, la vista y el controlador.
CIBERTEC
21
Microsoft implementa el patrn MVC en su tecnologa de ASP.NET, para el desarrollo

de aplicaciones Web.
La adopcin de ASP.NET MVC, viene con nuevos conceptos tales como el
Scaffolding, Razor, etc.
Finalmente se concluye que para el desarrollo de aplicaciones Web, Microsoft ofrece
dos opciones, ASP.NET Web Form y ASP.NET MVC, cada una de ellas con una serie
de ventajas y desventajas.
CIBERTEC
22
2. MANTENIMIENTOS Y SEGURIDAD CON MVC 4.0

TEMARIO
Introduccin a Entity Framework

La clase DbContext
Anotaciones y Validacin
Simple MemberShip en MVC 4.0.
Laboratorio
AutoEvaluacion
Resumen
2.1 Introduccin a Entity Framework

Entity Framework es un conjunto de herramientas incluidas en ADO.NET que dan soporte
para el Desarrollo de Aplicaciones orientadas a datos. Arquitectos y desarrolladores de
aplicaciones orientadas a datos se debaten con la necesidad de realizar dos diferentes
objetivos. Por un lado deben modelar las entidades, sus relaciones y los problemas de
lgica de negocio que deben implementar, y por otro lado deben trabajar con los motores
de base de datos para almacenar y recuperar la informacin. La data puede usar mltiples
orgenes de datos y cada uno de ellos puede trabajar con sus propios protocolos de
comunicacin.
Entity Framework permite crear aplicaciones de acceso a datos programando con un
modelo de aplicaciones conceptuales en lugar de programar directamente con un esquema
de almacenamiento relacional. El objetivo es reducir la cantidad de cdigo y el
mantenimiento necesarios para las aplicaciones orientadas a datos. Las aplicaciones de
Entity Framework ofrecen las siguientes ventajas:
Las aplicaciones pueden funcionar en trminos de un modelo conceptual ms centrado

en la aplicacin, que incluye tipos con herencia, miembros complejos y relaciones.
Las aplicaciones estn libres de dependencias de codificacin rgida de un motor de
datos o de un esquema de almacenamiento.
Las asignaciones entre el modelo conceptual y el esquema especfico de
almacenamiento pueden cambiar sin tener que cambiar el cdigo de la aplicacin.
Los desarrolladores pueden trabajar con un modelo de objeto de aplicacin coherente
que se puede asignar a diversos esquemas de almacenamiento, posiblemente
implementados en sistemas de administracin de base de datos diferentes.
Se pueden asignar varios modelos conceptuales a un nico esquema de
almacenamiento.
La compatibilidad con Language Integrated Query (LINQ) proporciona validacin de la
sintaxis en el momento de la compilacin para consultas en un modelo conceptual.
La siguiente figura muestra las opciones disponibles en Entity Framework para poder
trabajar:
CIBERTEC
23
I
I
I
I
I
I.
II.
III.
Database First: en este modo de trabajo se puede generar el modelo de datos a

partir de una base datos existente
Model First: en este modo de trabajo se puede generar la base de datos a partir del
modelo visual generado en Visual Studio (modelo .edmx)
Code First: en este modo de trabajo se puede generar la base de datos a partir de
clases bsicas conocidas como POCO (Plain Old CLR Object), que son objetos
que ignoran la persistencia y viceversa, se puede, a partir de la base de datos,
generar las clases POCO.
2.2 La clase DbContext

La clase Dbcontext es parte del ncleo del API de EF en Microsoft.NET Framework 4 y es
la clase que le permite realizar consultas, seguimiento de cambios y actualizar la base de
datos usando las clases inflexibles que representan su modelo, en otras palabras, esta
clase ser la responsable de facilitarnos el manejo de los Select, Insert, Update y Delete
que se deben realizar en la base de datos para aplicaciones orientadas a datos
(mantenimientos).
Adicionalmente a travs de DbContext se puede sobrescribir una serie de mtodos para
modificar la convencin implementada entre MVC y Entity Framework, por ejemplo la
pluralizacin de los nombres de clase y tablas, el manejo de las relaciones entre tablas,
tablas con ms de una llave primaria, etc.
A continuacin se muestra una clase que hereda de DbContext y que sobrescribe el
mtodo OnModelCreating.
CIBERTEC
24
2.3 Anotaciones y Validacin

Una de las mayores necesidades de programacin de aplicaciones es la capacidad de
validar entradas de usuario. Para el caso de la web es una tarea que se debe realizar tanto
en el servidor y el cliente.
En ASP.NET WebForms se cuenta con un grandioso Set de controles de validacin que
cubre gran parte de las necesidades de validacin.
Con ASP.NET MVC la idea es asociar la validacin de entidades con anotaciones de datos,
o data annotations, realizando as una validacin de forma automtica. Lo interesante
tambin es que podemos utilizar data annotations desde cualquier tipo de aplicacin .NET
(Webforms, Winforms, WPF, Consola, o cualquier otra en la que tengamos disponible
System.ComponentModel.DataAnnotations), dejando de lado la alternativa de invocar
manualmente procedimientos de validacin.
Resumidamente, la tcnica consiste en decorar cada una de las propiedades con una serie
de
atributos
llamados
anotaciones
(definidos
en
System.ComponentModel.DataAnnotations) que indican las comprobaciones que se
aplicarn a la entidad para determinar su validez. La siguiente porcin de cdigo muestra
una entidad en la que se estn indicando estas restricciones en cada una de sus
propiedades:
public class Amigo
{
[Required, StringLength(50)]
public string Nombre { get; set; }
[Range(0, 120)]
public int Edad { get; set; }
}
Se puede apreciar que en la clase Amigo hay dos propiedades, Nombre y Edad, en la
propiedad Nombre se indica que debe tener un valor requerido y que la longitud de su valor
es mximo de 50 caracteres, por otro lado la el valor de la propiedad Edad debe estar entre
0 y 120.
2.4 Simple MemberShip en MVC 4.0.
CIBERTEC
25
ASP.NET Membership providers fue mostrado por primera vez con ASP.NET 2.0 en el ao
2005. Su objetivo era facilitar los requerimientos de Membresa, autenticacin, perfiles,
accesos, roles, usuarios, etc.
Su diseo inicial estuvo basado en generar una serie de tablas, procedimientos
almacenados en SQL Server y trabajar con varios controles Web form, mostrando as una
fuerte integracin y automatizacin a la hora de crear las interfaces de usuario para los
mecanismos de autenticacin.
Como muchas tecnologas de Microsoft, traen muchas ventajas y facilidades para el
desarrollo de soluciones de software, pero tambin acarrean una serie de problemas u
opciones poco tiles. Membership no fue la excepcin y uno de los grandes inconvenientes
era su modelo de base de datos, el cual se presenta muy sobrecargado y con algunos
problemas de performance.
Bajo este escenario, el equipo de ASP.NET realiza un rediseo completo de su sistema de
Membresa, dejando las mejores caractersticas y reescribiendo todo lo que en su primer
momento fue desacertado, teniendo como resultado final el Simple MemberShipProvider,
liberado con Visual Studio 2012.
La siguiente figura muestra una comparativa del modelo de base de datos
MemberShipProvider
SimpleMemberShip
SimpleMembership tiene el mismo objetivo, ayudarnos a abordar los requerimientos de

autenticacin, membresa, accesos, roles, etc. La diferencia con su predecesora est en su
modelo simplificado, fcil de entender y personalizar, adems de su integracin con MVC y
proveedores externos de autenticacin, tales como Facebook, Gmail, Microsoft, etc.
CIBERTEC
26
2.5 Laboratorio
Mantenimiento de varias clases con MVC 4.0

Introduccin
Esta gua consta de tres partes:
Generar el mantenimiento a varias clases y ver las opciones de sincronizacin que nos
da EF con la base de datos.
Validacin del modelo con las DataAnnotations
Seguridad con el MemberShiProvider
Mantenimiento con MVC y Entity Framework

de ASP.NET MVC 4, como nombre de proyecto ponemos VentasMVC y una ubicacin
donde se guardar el proyecto, finalmente damos Aceptar.
CIBERTEC
27
1
2
4
3. En la opcin de seleccionar plantilla de MVC, elegimos la opcin Aplicacin de Internet,
como motor de vista Razor y damos click en Aceptar.
CIBERTEC
28
4. En la carpeta Models agregamos las clases Proveedor, Categora y Producto con las
propiedades que se muestran.
public class Proveedor
{
public int ProveedorId { get; set; }
public string Nombre { get; set; }
public string Direccion { get; set; }
public string Correo { get; set; }
public List<Producto> productos { get; set; }
}
public class Categoria

{
public int CategoriaId { get; set; }
public string Descripcion { get; set; }
public List<Producto> productos { get; set; }
}
public class Producto

{
public int ProductoId { get; set; }
public string Descripcion { get; set; }
public decimal Precio { get; set; }
public int CategoriaId { get; set; }
public int ProveedorId { get; set; }
public virtual Categoria categoria { get; set;}
public virtual Proveedor proveedor { get; set; }
}
5. Agregamos la clase de contexto MyDataContext (dentro de la carpeta Models) que

referencia las tres clases (Proveedor, Categora, Producto), tener en cuenta que esta
clase hereda de DbContext
CIBERTEC
using
using
using
using
using
29
System;
System.Collections.Generic;
System.Data.Entity;
System.Linq;
System.Web;
namespace VentasMVC.Models
{
public class MyDataContext:DbContext
{
public DbSet<Producto> listaProducto { get; set; }
public DbSet<Categoria> listaCategoria { get; set; }
public DbSet<Proveedor> listaProveedor { get; set; }
}
}
Nuestras 4 clases creadas deberan estar en la carpeta Models, tal como se muestra:
6. Ahora agregamos una entrada al Web.Config de tipo connectionString, para indicarle a

EF el proveedor de accesos a datos y la BD, para este escenario usaremos SQL Server
2012, adems por convencin la propiedad Name del connectionString deber ser
igual al nombre de la clase que herede de DbContext. A la base de datos la
llamaremos VentasMVC
CIBERTEC
30
7. Llegado a este punto compilamos el proyecto para que se generen los assemblies del
modelo.
8. Ahora agregamos los controladores para la clase Proveedor, Categora y Producto
Para el caso de la clase Proveedor, al nombre del controlador le damos
ProveedorController, en la opcin plantilla elegimos Controlador MVC con acciones de
lectura, escritura y vistas que usa Entity Framework; en la opcin clase modelo
elegimos Proveedor y por ltimo en la opcin de clase de contexto MyDataContext.
Finalmente hacemos click a Agregar
CIBERTEC
31
Repetir la operacin para las clases Categora y Producto, con sus nombres respectivos
9. Scaffolding es una de las caractersticas del framework de MVC que nos genera cdigo
de manera automtica, para este escenario se ha creado la clase controller y las vistas
para las operaciones CRUD, en conjunto con EF ha creado la BD en el servidor, con el
nombre especificado en el Web.Config.
CIBERTEC
32
10. Ahora simplemente ejecutamos (F5).
11. Por defecto, EF genera las tablas con los nombres de las clases pluralizadas, es decir,
mi clase se llama Producto y la tabla se llama Productoes, mi clase se llama Proveedor
y la tabla se llama Proveedors, etc. Si queremos cambiar esa opcin reescribimos el
mtodo OnModelCreating de la clase MyDataContext.
CIBERTEC
33
12. Para que los cambios tenga efecto, borramos la BD y volvemos a ejecutar el proyecto
de Visual Studio.
13. Adicionalmente, cuando modificamos el modelo agregando o quitando propiedades a

una clase, o agregando nuevas clases, se debe actualizar la BD ya que queda de
sincronizado respecto al modelo original.
Vamos a agregar una clase llamada Empleado (en la carpeta Models) con las siguientes
propiedades:
CIBERTEC
34
[Table("Empleados")]
public class Empleado
{
[Column("EmpleadoId"),Key]
public int Codigo { get; set; }
public string Nombres { get; set; }
public string DNI { get; set; }
[Column("FecNac")]
public DateTime Nacimiento { get; set; }
}
Agregamos la clase Empleado a la clase de contexto MyDataContext
14. Si ejecutamos en este momento nos saldr un error que nos indica que el modelo ha
tenido cambios The model backing the 'MyDataContext' context has changed since
the database was created.
15. Para corregir el error activamos la opcin de migracin de Entity Framework a travs
de la consola del Package Manager
16. Abrimos el Package Manager.
CIBERTEC
35
17. En el promt del Package Manager (PM>) escribimos Enable-Migrations ContextTypeName VentasMVC.Models.MyDataContext , luego de la ejecucin verificar
que se haya creado la carpeta Migrations en el proyecto.
CIBERTEC
36
18. Con el comando anterior la clase MyDataContext est habilitada para poder actualizar
la base de datos. Hay dos modos de actualizacin: Manual y Automtica, empecemos
viendo la opcin Manual, en el prompt del PM> escribimos Add Migration prueba1
enter y luego update-database, de igual manera presionamos enter.
19. Verificamos la base de datos.
CIBERTEC
37
20. Si no quisiramos escribir los comandos de actualizacin por cada cambio que se hace
al modelo, entonces activamos la actualizacin automtica, para ello en la Clase
Configuration ponemos en el constructor:
AutomaticMigrationsEnabled = true;
Y en el global.asax, agregamos la entrada:
using System.Data.Entity;
using VentasMVC.Migrations;
Esto es en la seccin de los NameSpace y en el evento Application_Start()
Database.SetInitializer(new
MigrateDatabaseToLatestVersion<VentasMVC.Models.MyDataContext,
Configuration>());
21. Con estas opciones configuradas, agregamos una propiedad adicional a la clase
Empleado llamada Direccin y al ejecutar automticamente se debe actualizar la BD.
22. Llegado a este punto generar el scaffolding para la clase Empleado
Validacin del modelo con DataAnnotations

1. En nuestras 4 clases (Proveedor, Categora, Productos y Empleados) no hay un
mecanismo de validacin en la interfaz de usuario. A travs de las DataAnnotations
vamos a validar varias opciones(Required, Range, RegularExpression, StringLength etc)
CIBERTEC
38
Regex: ^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z09]+)*(\\.[A-Za-z]{2,})$
2. En el caso que se presente un problema con la actualizacin de la BD por posible

prdida de datos, agregar al constructor de la clase Configuration la entrada.
AutomaticMigrationDataLossAllowed = true;
3. Finalmente ejecutamos (F5)
CIBERTEC
39
Seguridad con MemberShipProvider

1. Antes de configurar el MemberShipProvider ampliemos los menus del template, que
crea MVC por defecto para el mantenimiento. Para ello abrimos el archivo
_Layout.cshtml del carpeta Views/Shared y agregamos las entradas para las clases
Categoria, Proveedor, Producto y Empleado.
2. Ejecutamos y vemos que aparecen en las opciones de men, el detalle es que todos
pueden acceder a estas opciones. Si quisiramos restringir el acceso a estas opciones
permitindole solo a un grupo determinado de usuarios una alternativa de solucin,
sera el uso del MemberShipProvider.
3. Agregamos una entrada al connectionString del web config
<add name="DefaultConnection"
connectionString="Server=.;Initial
Catalog=Seguridad;Trusted_connection=yes"
providerName="System.Data.SqlClient" />
CIBERTEC
40
4. Agregamos el atributo Authorize a las clases controladoras que deseamos darle

seguridad, por ejm a la clase CategoriaController, luego ejecutamos y cuando
queremos entrar a Categoria se nos dirigir a una pantalla de autenticacin en donde
podemos registrarnos.
Hacemos click a la opcin Categora.
CIBERTEC
41
Nos registramos haciendo click en Regstrese
CIBERTEC
42
Una vez registrados volvemos a ingresar a la opcin Categoria.
5. Tenga en cuenta que el MVC ha creado el SimpleMemberShipProvider con las tablas

necesarias en servidor que nosotros hemos especificado en la connectionString
DefaultConnection, para este caso le pusimos como nombre de BD Seguridad.
CIBERTEC
43
2.6 Resumen
Entity Framework es la tecnologa que proporciona Microsoft para el acceso a datos.
EF nos ofrece mltiples formas de trabajo: podemos partir de la base de datos, del
modelo de dominio o incluso de clases simples conocidas como POCO.
El corazn del EF es la clase DbContext. Esta clase principalmente nos ayuda con las
operaciones CRUD.
Las anotaciones de datos son una forma nueva en ASP.NET para realizar la validacin
de la entrada de datos por parte del usuario, consta de una serie de atributos que se
configuran al modelo, tanto a las clases como a sus propiedades.
SimpleMembership es una herramienta que nos ayuda a simplificar el desarrollo de la
parte de Membresia, autenticacin, acceso, roles, perfiles, etc. SimplemMembership
presenta un modelo simplificado y con integracin a proveedores externos de
autenticacin
CIBERTEC
44
3. OAUTH PROVIDERS CON MVC 4.0

TEMARIO
El protocolo OAuth
Proveedores externos para autenticacin en MVC 4
Revisin de la API de Facebook
Laboratorio
Resumen
3.1 El protocolo OAuth

OAuth es un protocolo de autorizacin estndar, abierto que permite que un tercero acceda
a los datos de un usuario sin necesidad de conocer su contrasea. Los usuarios no tienen
que compartir sus contraseas directamente en una aplicacin, sino que OAuth hace las
veces de llave que las aplicaciones utilizan para acceder a los datos de un usuario y actuar
en su nombre
En otras palabras, OAuth permite a un usuario del sitio A compartir su informacin en el
sitio A (proveedor de servicio) con el sitio B (llamado consumidor) sin compartir toda su
identidad.
Muchas empresas tecnologicas hoy en da han adoptado este estndar, sobre todo los
sitios de redes sociales tales como Twitter, Facebook, Google+, Linkedin, etc.
3.2 Proveedores externos para autenticacin en MVC 4

Una de las nuevas caractersticas de ASP.NET MVC 4 es la capacidad de poder
interactuar con diversos proveedores de autenticacin y autorizacin que usan el estndar
de OAuth, de tal manera que podamos construir nuestras aplicaciones Web haciendo uso
de estos proveedores.
En la versin 4 de MVC viene una implementacin por defecto para los proveedores de
Microsoft, Twitter, Facebook y Google. Los proyectos de MVC vienen con una clase
incluida llamada AuthConfig, dentro de esta clase hay implementaciones para los
proveedores antes mencionados, tal como se muestra:
public static class AuthConfig
{
public static void RegisterAuth()
{
// Para permitir que los usuarios de este sitio inicien sesin
con sus cuentas de otros sitios como, por ejemplo, Microsoft, Facebook y
Twitter,
// es necesario actualizar este sitio. Para obtener ms
informacin, visite http://go.microsoft.com/fwlink/?LinkID=252166
//OAuthWebSecurity.RegisterMicrosoftClient(
//
clientId: "",
//
clientSecret: "");
//OAuthWebSecurity.RegisterTwitterClient(
//
consumerKey: "",
//
consumerSecret: "");
OAuthWebSecurity.RegisterFacebookClient(
appId: "103897616468989",
appSecret: "c1425832817f4707d4d84634b1a69e25");
CIBERTEC
45
//OAuthWebSecurity.RegisterGoogleClient();
}
}
3.3 Revisin de la API de Facebook

Con el objetivo de facilitar la integracin de las aplicaciones MVC de Microsoft con los
servicios de Facebook, la comunidad de desarrolladores ha puesto a disposicin un SDK
que puede ser instalado directamente con Nuget o ingresado al sitio
http://facebooksdk.net/
El SDK para Facebook llega con una serie de propiedades mtodos y eventos, tal como se
muestra:
CIBERTEC
DateTimeConvertor
FacebookApiEventArgs
FacebookApiException
FacebookApiLimitException
FacebookBatchParameter
FacebookClient
FacebookMediaObject
FacebookMediaStream
FacebookOAuthException
FacebookOAuthResult
FacebookUploadProgressChangedEventArgs
HttpMethod
HttpWebRequestWrapper
HttpWebResponseWrapper
JsonArray
JsonObject
WebExceptionWrapper
46
Una explicacin detallada de cada elemento del SDK y ejemplos de cdigo se pueden
encontrar en http://facebooksdk.net/docs/reference/SDK/
3.4 Laboratorio
Integracin de MVC 4.0 con Facebook

Introduccin
Esta gua consta de:
Proceso de autenticacin con Facebook
Extensin del MembershipProvider para guardar datos adicionales
Uso del SDK
Autenticacin con Facebook

de ASP.NET MVC 4, como nombre de proyecto ponemos MVCFB y una ubicacin
CIBERTEC
47
1
2
4
CIBERTEC
48
4. Para poder permitir la autenticacin con Facebook, debemos registrar nuestra

aplicacin en su Site, para ello entramos a http://developers.facebook.com/ y nos
autenticamos, una vez ingresado hacemos clikc en Apps.
5. Hacemos click en Crear nueva Aplicacin
CIBERTEC
49
6. Se deber agregar un nombre para la aplicacin que sea nico (Facebook validar la
unicidad del nombre). Luego damos click en Continuar.
7. Luego llenamos los datos para que nuestro sitio web se autentique con Facebook.
Nota: No olvidar dar click en Guardar Cambios

8. Facebook nos ha generado un App ID y un App Secret para utilizarlo en nuestra
aplicacin.
CIBERTEC
50
Nota: Copiar los ID y cerrar sesin

9. Regresamos a Visual Studio 2012 y abrimos el archivo AuthConfig.cs ubicado en la
carpeta App_Start.
10. Quitamos los comentarios a la seccin OAuthWebSecurity.RegisterFacebookClient y

aadimos los IDs generados por Facebook para nuestra aplicacin.
CIBERTEC
51
11. Debido a que hemos elegido la plantilla Aplicacin de Internet, hay varias pginas que
se han creado por defecto, para probar la autenticacin por Facebook podemos
restringir el acceso a la opcin de men Contacto.
12. Para restringir el acceso abrimos el archivo HomeController.cs ubicado en la carpeta

Controllers y ubicamos el mtodo Contact y lo decoramos con el atributo [Authorize]
CIBERTEC
52
13. Antes de ejecutar, Facebook, despus de la validacin de autenticacin nos va a

brindar informacin adicional (con el consentimiento del usuario) tal como ID,
Nombres, token, etc. Esta informacin la vamos a guardar en la base de datos
MembershipProvider que viene con Visual Studio 2012. Podemos cambiar la ubicacin
del servidor y nombre de la base de datos de membresa, para ello en el Web.config,
en la seccin de connectioString ubicamos la entrada DefaultConnection, y ponemos
nuestro servidor local y como nombre de base de datos SeguridadMVC, tal como se
muestra:
14. Finalmente ejecutamos e intentamos acceder a la opcin Contacto.
CIBERTEC
CIBERTEC
53
54
15. Adicionalmente podemos ver que en el servidor SQL se cre la base de datos
SeguridadMVC y se registr el usuario autenticado.
CIBERTEC
55
Extensin del MembershipProvider para guardar datos adicionales

1. Facebook, despus del proceso de autenticacin, nos brinda datos adicionales del
usuario que guardaremos en nuestra base de datos SeguridadMVC. Para no modificar
las tablas existentes crearemos una clase adicional para que all se guarde la
informacin complementaria del usuario, agregamos un clase llama InformacionExtra,
dentro de la clase AccountModels.cs tal como se muestra:
2. Ahora para que a partir de esta clase se pueda crear la tabla se deber registrar en la
clase UsersContext que hereda de DbContext.
3. Ahora para poder ver el controlador donde se obtiene la informacin enviada por
Facebook, vemos el link
CIBERTEC
Segn la imagen, el
ExternalLoginCallBack
56
controlador
solicitado
Account
el
mtodo
es
4. Revisando el mtodo ExternalLoginCallBack (para el caso de nuevos usuarios) vemos

que trabaja con la vista ExternalLoginConfirmation y le enva un objeto de tipo
RegisterExternalLoginModel.
5. Entonces conforme a lo revisado, modificamos la clase RegisterExternalLoginModel

para que pueda almacenar los datos adicionales (Nombre del usuario y Link de la Web
personal).
Agregamos las propiedades Nombres y Link , tal como se muestra:
CIBERTEC
57
6. Una vez agregada estas dos propiedades, regresamos a mtodo ExternalLoginCallBack

de la clase AccoutController para recuperar la informacin que enva Facebook, tal
como se muestra:
7. Ahora modificamos la vista para mostrar la informacin adicional, abrimos el archivo

ExternalLoginConfirmation.cshtml de la carpeta Views/Account y agregamos el HtmlRazor para que se muestre los datos.
CIBERTEC
58
8. Ahora ejecutamos y al autenticarnos vemos que est la informacin adicional de

Nombres y Link, tal como se muestra:
Nota: Si ya existe base de datos de SeguridadMVC, es probable que salga un error por
desincronizacin del modelo con la base de datos (por la clase InformacionExtra). Para
solucionar el problema tiene dos opciones: borrar la base de datos de seguridad del
SQL Server o activar la migracin en el proyecto (Enable-Migrations)
9. Finalmente, para guardar esa informacin en la base de datos, ubicamos el mtodo
ExternalLoginConfirmation y modificamos el cdigo, tal como se muestra:
10. Ejecutamos y cuando damos grabar debera registrase la informacin en la base de

datos.
CIBERTEC
CIBERTEC
59
60
Uso del SDK para Facebook

1. Facebook puso a disposicin de los desarrolladores un SDK en C# para poder tener una
serie de mtodos que encapsulan los detalles internos de la API de Facebook, para
instalar el SDK lo podemos hacer a travs de Nuget, para ello hacemos click en el men
Herramientas-Administrador de paquetes de biblioteca-Administrar paquetes Nuget
para la solucin
Buscamos Facebook y le damos Instalar
CIBERTEC
61
Para ms informacin se recomienda la pgina http://facebooksdk.net/
2. Ahora con el accestoken recuperamos el campo de si el usuario ha sido verificado o no,

para ello vamos al mtodo y agregamos el cdigo que verifica si se tiene disponible el
accesstoken y si est disponible lo guardamos en una variable de sesin.
CIBERTEC
62
3. Ahora, a travs de la clase FacebookClient recuperamos el valor de verificado, tal como

se muestra:
4. Ejecutamos y vemos que el campo verificado de la base de datos est con un valor
diferente de nulo.
CIBERTEC
63
3.5 Resumen
El protocolo OAuth (Open Authorization) es un estndar de internet que permite
compartir informacin de una entidad sin necesidad de brindar informacin de
credenciales por parte de la entidad. Este protocolo, hoy en da, es utilizado para la
mayora de redes sociales tales como Facebook, Twitter, etc.
ASP.NET MVC 4 trae un modelo de programacin bastante rpido y sencillo de usar
para la utilizacin de los proveedores de autenticacin basados en OAuth. Los
proyectos de MVC tienen incorporada una clase llamada AuthConfig donde estn los
parmetros de configuracin para rpidamente integrarse con estos proveedores.
Una de las redes sociales de mayor impacto hoy es Facebook. En ASP.NET MVC hay
un SDK que nos facilita el desarrollo e integracin de nuestras aplicaciones con esta
red social.
CIBERTEC
64
UNIDAD DE
APRENDIZAJE
2
Al trmino de la unidad, los alumnos, utilizando las tcnicas explicadas en clase, podrn
desarrollar aplicaciones empresariales orientadas al e-commerce, considerando la exploracin
de catlogos en lnea, manejo de un carrito de compras y el proceso final de Checkout.
4. INTERACCIN CON EL MODELO

TEMARIO
Expresiones Lambda con Entity Framework

Laboratorio
Resumen
4.1 Expresiones Lambda con Entity Framework

Una expresin lambda es una funcin annima que puede contener expresiones e
instrucciones y se puede utilizar para crear delegados o tipos de rboles de expresin.
Los pasos para crear una expresin Lambda son los siguientes:
Para definir una expresin lambda se usa el llamado operador lambda (=>)
A la izquierda de este operador se indicarn las variables o parmetros de la funcin
annima.
A la derecha del operador indicaremos el cdigo de la funcin (la expresin o bloque de
instrucciones).
Las expresiones lambda son bastante usadas en consultas de LINQ basadas en mtodos
como argumentos de los mtodos de operador de consulta estndar, tales como Where.
Al escribir expresiones lambda, no tiene por qu especificar un tipo para los parmetros de
entrada, ya que el compilador puede deducir el tipo segn el cuerpo de la lambda, el tipo
de delegado subyacente y otros factores que se describen en la especificacin del lenguaje
C#. Para la mayora de los operadores de consulta estndar, la primera entrada es el tipo
de los elementos en la secuencia de origen. As, si est realizando una consulta sobre un
IEnumerable<Customer>, se deducir que la variable de entrada ser un objeto Customer,
lo cual significa que se podr tener acceso a sus mtodos y propiedades
Ejem:
IEnumerable<Customer> customers;
customers.Where(c => c.City == "London");
//La variable de entrada c es de tipo customer
Tambin puede proporcionar una expresin lambda cuando el tipo de argumento es
Expression<Func>, por ejemplo, en los operadores de consulta estndar que se definen en
CIBERTEC
65
System.Linq.Queryable. Al especificar un argumento Expression<Func>, la expresin

lambda se compilar en un rbol de expresin.
A continuacin, se muestra un operador de consulta estndar, el mtodo Count:
int[] numbers = { 5, 4, 1, 3, 9, 8, 6, 7, 2, 0 };
int oddNumbers = numbers.Count(n => n % 2 == 1);
El compilador puede deducir el tipo del parmetro de entrada, o tambin se puede
especificar explcitamente. Esta expresin lambda particular cuenta aquellos enteros (n)
que divididos por dos dan como resto 1.
A continuacin, se muestra una pequea lista de operadores de consulta estndar que se
definen en System.Linq.Queryable
Operador
SingleOrDefault
Single
Skip
Take
Any
CIBERTEC
Descripcin
Devuelve solo un
elemento que satisfice
la condicin o un valor
por
default,
este
mtodo emitir una
exception si existe
ms de un element
que
satisface
la
condicin
Devuelve solo un
elemento
que
satisface la condicin
, este mtodo emitir
una
exception
si
existe ms de un
element que satisfice
la condicin o si
ningn
elemento
satisface la condicin
Omite un numero
especifico
de
elementos y devuelve
los
elementos
restantes
Ejemplo
MyDataContext MyDB=new MyDataContext();
var item =
MyDB.listaCart.SingleOrDefault(c =>
c.Identificador == ShoppingCartId && c.AlbumId
== album.AlbumId);
Devuelve
un
especifico nmero de
elementos contiguos
desde un punto de
inicio,
en
una
coleccin
o
secuencia, es anlogo
al operador TOP de
SQL
int[] grades = { 59, 82, 70, 56, 92, 98, 85 };
Devuelve un valor
bool
indicando
si
algn elemento de
una
determinada
Pet[] pets =
MyDataContext MyDB = new MyDataContext();

var item = MyDB.listaAlbum.Single(a =>
a.AlbumId == id);
int[] grades = { 59, 82, 70, 56, 92, 98, 85 };

IEnumerable<int> lowerGrades =
grades.AsQueryable().OrderByDescending(g =>
g).Skip(3);
/* Resultado
82 70 59 56*/
IEnumerable<int> topThreeGrades =
grades.AsQueryable().OrderByDescending(grade
=> grade).Take(3);
/*Resultado
98 92 85
*/
{ new Pet { Name="Barley", Age=8,

Vaccinated=true },
new Pet { Name="Boots", Age=4,
coleccin, satisface la
condicin
66
Vaccinated=false },
new Pet { Name="Whiskers",
Age=1, Vaccinated=false } };
bool unvaccinated =
pets.AsQueryable().Any(p => p.Age
> 1 && p.Vaccinated == false);
Para mayor detalle de todos los operadores QueryAble y ejemplos, remitirse a
http://msdn.microsoft.com/en-us/library/system.linq.queryable_methods.aspx
4.2 Laboratorio
El laboratorio del Carrito de compras con MVC 4.0 abarca los conceptos que se han
tratado en las unidades anteriores, tales como Entity Framework, DbContext, Scaffold y
este captulo de Expresiones Lambda, para el desarrollo de este laboratorio por favor
refirase al laboratorio del captulo VI VISTAS
4.3 Resumen
Una expresin lambda es una funcin annima que se puede utilizar para crear
delegados o tipos de rbol de expresin.
Las expresiones Lambda nos facilita enormemente la manipulacin de colecciones,
haciendo operaciones en una sola expresin y que antes de ello se hubiera tenido que
recurrir a la creacin de procedimiento especializados.
Las expresiones Lambda son muy utilizadas tambin con los operadores estndares
definidos en LINQ, tales como Count, Skip, Take, Single, etc. esto nos ayuda ms aun
con el tratamiento de colecciones de objetos.
CIBERTEC
67
5. EL LENGUAJE RAZOR
TEMARIO
Razor y los HTML Helpers

Renderizado de los Helpers
Laboratorio
Resumen
5.1 Razor y los HTML Helpers

ASP.NET Web Pages con Razor proporciona una sintaxis de programacin simple para
escribir cdigo en pginas web donde el cdigo basado en el servidor se incrusta en el
formato HTML de las pginas web. El cdigo de Razor se ejecuta en el servidor antes de
que la pgina se enve al explorador. Este cdigo de servidor puede crear dinmicamente
el contenido de cliente, es decir, puede generar formato HTML u otro contenido sobre la
marcha y, a continuacin, enviarlo al explorador junto con cualquier cdigo HTML esttico
que contenga la pgina.
Algunos objetivos de diseo al momento de implementar Razor fueron:
Fcil de aprender, Razor no es un nuevo lenguaje, es una combinacin de cdigo .NET
con HTML.
Posibilidad de trabajar con un editor de texto. No es necesario tener Visual Studio para
poder implementar cdigo Razor, aunque su utilizacin con VS acelera la escritura de
cdigo gracias al soporte para Intellisense.
Soporte para el TDD, que permite desarrollar vistas totalmente independientes del
controlador.
Razor trabaja tanto con paginas aspx (Web Form) as como tambin con paginas csthml
(MVC)
CIBERTEC
68
Como se mencion anteriormente, Razor no es un nuevo lenguaje de programacin, el

equipo de Microsoft busc fusionar el conocimiento de la programacin en VB.NET o C#,
con el estndar HTML,
Combinar Razor con los Html Helpers nos ayuda a crear de manera rpida y sencilla el
cdigo e incluso acceder a datos que no necesariamente vienen del controlador, tal como
se muestra:
@{
var items = new List<SelectListItem>{
new SelectListItem {Value = "1", Text
};
=
=
=
=
=
"Blue"},
"Red"},
"Green", Selected = true},
"Yellow", Selected = true},
"Black"}
}
@Html.ListBox("myListbox", items, null, 6, true)
@{
var db = Database.Open("Northwind");
var data = db.Query("SELECT CategoryId, CategoryName FROM Categories");
var items = data.Select(i => new SelectListItem {
Value = i.CategoryId.ToString(),
Text = i.CategoryName,
Selected = i.CategoryId == 4 ? true : false
});
}
@Html.DropDownList("CategoryId", items)
@{
var db = Database.Open("Northwind");
var data = db.Query("SELECT CategoryId, CategoryName FROM Categories");
var items = data.Select(i => new SelectListItem {
Value = i.CategoryId.ToString(),
Text = i.CategoryName
});
}
@Html.DropDownList("CategoryId", "Please Select One", items, 4, new {@class
= "special"})
Finalmente, hay un amplio soporte de Intellisence en Visual studio.
CIBERTEC
69
5.2 Renderizado de los Helpers

Hay HTML Helpers para toda clase de controles de formulario Web: check boxes, hidden
fields, password boxes, radio buttons, text boxes, text areas, dropdown lists y list boxes.
Hay tambin un HTML Helper para el elemento Label, los cuales nos asocial descriptivas
de texto a un formulario Web. Cada HTML Helper nos da una forma rpida de crear HTML
valido para el lado del cliente. La siguiente tabla lista los Html Helpers y su correspondiente
renderizado HTML:
Helper
HTML Element
Html.CheckBox
Html.ActionLink
Html.DropDownList
Html.Hidden
Html.Label
Html.ListBox
Html.Password
Html.Radio
Html.TextArea
Html.TextBox
<input type="checkbox" />

<a href= />
<select></select>
<input type="hidden" />
<label for="" />
<select></select> or <select multiple></select>
<input type="password" />
<input type="radio" />
<textarea></textarea>
<input type="text" />
A continuacin, mostramos una comparativa de cdigo creado con los HTML Helpers de
Razor y su equivalencia en HTML
HTML Helper Razor
HTML renderizado
<form method="post">
First Name:
@Html.TextBox("firstname")<br />
Last Name:
@Html.TextBox("lastname",
Request["lastname"])<br />
<form method="post">
First Name: <input
id="firstname" name="firstname"
type="text" value="" /><br />
Last Name: <input id="lastname"
name="lastname" type="text" value=""
CIBERTEC
Town: @Html.TextBox("town",
Request["town"], new
Dictionary<string, object>(){{
"class", "special" }})<br />
Country: @Html.TextBox("country",
Request["country"], new { size = 50
})<br />
<input type="submit" />
</form>
70
/><br />
Town: <input id="town"
name="town" class="special"
type="text" value="" /><br />
Country: <input id="country"
name="country" size="50" type="text"
value="" /><br />
<input type="submit" />
</form>
5.3 Laboratorio
El laboratorio del Carrito de compras con MVC 4.0 abarca los conceptos que se han
tratado en las unidades anteriores, tales como Entity Framework, DbContext, Scaffold,
expresiones Lambdas y este captulo del Lenguaje Razor, para el desarrollo de este
laboratorio por favor refirase al laboratorio del captulo VI VISTAS
5.4 Resumen
Razor es el nuevo motor de renderizado incluido en ASP.NET que trabaja tanto con
WebForm as como tambin MVC.
Tener en cuenta que los motores de renderizado son los responsables de generar el cdigo
HTML en el servidor Web, para luego enviarlo al cliente web solicitante.
Razor no es nuevo lenguaje de programacin, uno de los principales objetivos de diseo
fue la de combinar el conocimiento de programacin (C#, VB) con el conocimiento de
HTML.
La combinacin de Razor con los HTML Helpers nos ayudan a construir pginas web
dinmicas, de una manera ms sencilla y rpida.
CIBERTEC
71
6. VISTAS
TEMARIO
Las vistas en MVC

Vistas Parciales
El patrn ViewModel
Laboratorio
Resumen
6.1 Las vistas en MVC

Llegado a este punto, tenemos claro que el patrn MVC se divide en tres componentes
principales que son el modelo, la vista y el controlador, y en esta seccin vamos a dar una
revisin a las vistas, la intencin es resumir algunos puntos claves al utilizar las vistas de
MVC.
Las vistas son las responsables de procesar la UI que ser mostrada al usuario. Algunas
veces tienen una referencia al modelo y en resumen lo que hacen es convertir el modelo en
un formato entendible para el cliente Web (HTML);la convencin de MVC sugiere que la
vista se llame igual que una accin en el controlador, es decir, si tenemos un controlador
llamado HomeController, el cual tiene un mtodo llamado Index, la vista debe llamarse
(casi siempre es as, pero no es obligatorio) Index.cshtml para C# o Index.vbcshtml en el
caso de Visual Basic.
Entonces algunos de los temas a tener claros al usar vistas en ASP.NET MVC son
Una pgina de vista es una instancia de la clase ViewPage. Hereda de la clase Page e
implementa la interfaz IViewDataContainer. La clase ViewPage define una propiedad
ViewData que devuelve un objeto ViewDataDictionary. Esta propiedad puede ser utilizada
para enviar datos a la vista desde el controlador.
En el modelo Model-View-Controller (MVC), las vistas estn pensadas exclusivamente para
encapsular la lgica de presentacin. No deben contener lgica de aplicacin ni cdigo de
recuperacin de base de datos (aun sabiendo que tcnicamente es posible). El controlador
debe administrar toda la lgica de aplicacin. Una vista representa la interfaz de usuario
adecuada usando los datos que recibe del controlador. Estos datos se pasan a una vista
desde un mtodo de accin de controlador usando el mtodo View.
Igual que las pginas ASP.NET en aplicaciones basadas en formularios Web Forms, las
vistas de pgina de ASP.NET (archivos .aspx) pueden usar pginas maestras para definir
un diseo y una estructura coherentes. En un sitio tpico, la pgina maestra se enlaza a
una pgina de contenido en la directiva @ Page de la pgina de contenido. Tambin en
MVC se definen pginas maestras; en las plantillas de proyecto de MVC se crea por default
un element denominado _Layout dentro de la carpeta View/Shared
6.2 Vistas Parciales

Una vista parcial permite definir una vista que se representar dentro de una vista primaria.
Las vistas parciales se implementan como si fueran controles de usuario de ASP.NET
(.ascx).
Cuando se crea una instancia de una vista parcial, obtiene su propia copia del objeto
ViewDataDictionary que est disponible para la vista primaria. Por lo tanto, la vista parcial
tiene acceso a los datos de la vista primaria. Sin embargo, si la vista parcial actualiza los
datos, esas actualizaciones solo afectan al objeto ViewData de la vista parcial. Los datos
de la vista primaria no cambian.
A continuacin se muestra una pantalla donde se ve la manera de crear una vista parcial
CIBERTEC
72
6.3 El patrn ViewModel

En el desarrollo de las aplicaciones MVC con Visual Studio se ha podido apreciar que una
vista se puede mapear a una clase del modelo (o a una coleccin de dicha clase).
En algunos escenarios las clases que existen en el modelo son exactamente lo que nuestra
vista necesitaba, pero tambin van a ver escenarios donde las clases de mi modelo no son
suficientes, quiz porque la vista necesita mostrar otros datos que una clase no tiene, por
ejemplo, se puede tener una clase llamada Items y una vista que necesita mostrar una
coleccin de los Items y adicionalmente un valor donde se muestre un valor sumarizado de
dichos Items, en este escenario la clase Items, por diseo, no tiene una propiedad que
muestre un valor sumarizado de una coleccin de dichos Items; en este caso es donde se
recurre al patrn ViewModel.
El patrn View Model nos ayuda a poder construir una clase que de soporte a las
necesidades de informacin de la vista.
Por sugerencia, en visual studio, la nominacin de las clases de tipo ViewModel, terminan
con la palabra ViewModel,tal como se muestra:
CIBERTEC
73
6.4 Laboratorio
Carrito de compras con MVC 4.0

Introduccin
Esta gua consta de:
Creacin del carrito de compras
Creacin del carrito de compras

de ASP.NET MVC 4, como nombre de proyecto ponemos CarritoMVC y una ubicacin
donde se guardar el proyecto, finalmente damos Aceptar.
CIBERTEC
74
1
2
3
4
CIBERTEC
75
4. Creamos nuestro modelo de clase de dominio inicial, en la carpeta Models.
5. Adicionalmente creamos nuestra clase de contexto de base de datos MyDataContext y

modificamos el Web.config para indicar la cadena de conexin.
CIBERTEC
76
6. Actualizamos el diseo de la web, con los recursos que vienen incluidos en la gua, a la
seccin Content del proyecto, tal como se muestra:
CIBERTEC
77
Actualizamos el _Layout.cshtml de la carpeta Views/Shared
Y el Index.cshtml de la carpeta Views/Home.
CIBERTEC
78
Finalmente ejecutamos y deberamos tener una vista tal como se muestra:
7. Ahora agregamos el controlador TiendaController donde se va a implementar las

principales funciones de la compra, tales como listar los gneros, ver los lbumes y su
detalle.
CIBERTEC
79
8. En el mtodo Index de la clase TiendaController obtenemos los gneros a partir del

modelo y se lo enviamos a la vista.
public class TiendaController : Controller
{
//
// GET: /Tienda/
//listar los generos
public ActionResult Index()
{
return View(MyDB.listaGenero.ToList());
}
9. Al mtodo Index, agregamos su vista, hacemos click derecho sobre el mtodo Index y
elegimos la opcin Agregar Vista, tal como se muestra:
CIBERTEC
80
10. En la vista creada agregamos el siguiente cdigo Razor.
CIBERTEC
81
11. Ejecutamos y cuando se cree nuestra BD, agregamos ciertos datos a la tabla Gnero.
12. Actualizamos la vista Index para que la lista de Gneros sean un hiperlink hacia los
lbumes asociados al gnero.
CIBERTEC
82
13. Agregamos el mtodo ListaAlbum, en la clase TiendaController
14. Ahora agregamos la vista para el mtodo ListaAlbum
15. Agregamos el cdigo Razor para mostrar los lbumes del gnero elegido y creamos el
mtodo Detalle de la clase TiendaController.
CIBERTEC
83
|
16. Generamos la vista para el controlador Detalle.
Nota: El ActionLink invoca a un mtodo. Agregar de un controlador ShoppingCart que

ser creado ms adelante
17. Previamente agregamos unos lbumes y artista a nuestra base de datos y ejecutamos.
CIBERTEC
84
18. Ahora agregamos nuestra clase de negocio ShoppingCart donde se implementar las
opciones de agregar tems, quitar tems, obtener total, limpiar tems, etc. En nuestro
folder Models agregamos la clase ShoppingCart.cs con el siguiente cdigo
namespace CarritoMVC.Models
{
public class ShoppingCart
{
string ShoppingCartId { get; set; }
public static ShoppingCart ObtenerCart(HttpContextBase context)
{
ShoppingCart obj = new ShoppingCart();
if (context.Session["IdCart"]==null)
{
if (!String.IsNullOrEmpty(context.User.Identity.Name))
{
context.Session["IdCart"] =
context.User.Identity.Name;
}
else
{
context.Session["IdCart"] = Guid.NewGuid().ToString();
}
}
obj.ShoppingCartId = context.Session["IdCart"].ToString();
return obj;
}
public void AgregarItem(Album album)
CIBERTEC
85
{
var item = MyDB.listaCart.SingleOrDefault(c => c.Identificador
== ShoppingCartId && c.AlbumId == album.AlbumId);
if (item != null)
{
item.Cantidad++;
}
else
{
item = new Cart
{
Identificador = ShoppingCartId,
Cantidad = 1,
AlbumId = album.AlbumId,
Fecha = DateTime.Now
};
MyDB.listaCart.Add(item);
}
MyDB.SaveChanges();
}
public int QuitarItem(int id)
{
var item = MyDB.listaCart.SingleOrDefault(c => c.Identificador
== ShoppingCartId && c.ID == id);
int cantidad = 0;
if (item.Cantidad > 1)
{
item.Cantidad--;
cantidad = item.Cantidad;
}
else
{
MyDB.listaCart.Remove(item);
}
MyDB.SaveChanges();
return cantidad;
}
public void LimpiarItems()
{
var items = MyDB.listaCart.Where(c => c.Identificador ==
ShoppingCartId);
foreach (var c in items)
{
MyDB.listaCart.Remove(c);
}
MyDB.SaveChanges();
}
public List<Cart> ObtenerItems()
{
var items=
MyDB.listaCart.Where(c=>c.Identificador==ShoppingCartId);
return items.ToList();
}
public decimal ObtenerTotal()
{
CIBERTEC
86
decimal? total = (from c in MyDB.listaCart

where c.Identificador == ShoppingCartId
select (int?)c.Cantidad * c.album.Precio).Sum();
return total ?? decimal.Zero;
}
public int ObtenerCantidad()
{
int ? cantidadTotal = (from c in MyDB.listaCart
where c.Identificador == ShoppingCartId
select (int ?)c.Cantidad).Sum();
return cantidadTotal ?? 0;
}
public int CrearOrden(Orden orden)
{
var items = ObtenerItems();
foreach (var item in items)
{
DetalleOrden detalle = new DetalleOrden
{
AlbumId = item.AlbumId,
OrdenId=orden.OrdenId,
Cantidad = item.Cantidad,
Precio = item.album.Precio
};
MyDB.listaDetalle.Add(detalle);
}
orden.Total = ObtenerTotal();
MyDB.SaveChanges();
LimpiarItems();
return orden.OrdenId;
}
public void ActualizarIdentificador(string usuario)
{
var items=MyDB.listaCart.Where(c => c.Identificador ==
ShoppingCartId);
foreach(var c in items)
{
c.Identificador = usuario;
}
MyDB.SaveChanges();
}
}
}
19. Adicionalmente creamos la carpeta ViewModels para almacenar las clases tipadas para
las vistas del ShoppingCart
CIBERTEC
87
20. Dentro de la carpeta ViewModels agregamos la clase ShoppincartViewModel y

ShoppingCarRemoveViewModel.
public class ShoppingCartViewModel
{
public List<Cart> Items { get; set; }
public decimal Total { get; set; }
}
namespace CarritoMVC.ViewModels
{
public class ShoppingCartRemoveViewModel
{
public string Mensaje { get; set; }
public decimal Total { get; set; }
public int CantidadTotal { get; set; }
public int CantidadItem { get; set; }
public int IdItem { get; set; }
}
CIBERTEC
88
21. Ahora agregamos nuestro controlador para el Shoppingcart.
22. Agregamos la lgica de programacin para el ShoppingCartController.

using
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.Mvc;
CarritoMVC.Models;
CarritoMVC.ViewModels;
namespace CarritoMVC.Controllers
{
public class ShoppingCartController : Controller
{
CIBERTEC
89
//
// GET: /ShoppingCart/
{
ShoppingCart carrito =
ShoppingCart.ObtenerCart(this.HttpContext);
var viewModel = new ShoppingCartViewModel
{
Items = carrito.ObtenerItems(),
Total = carrito.ObtenerTotal()
};
return View(viewModel);
}
public ActionResult Agregar(int id)
{
var item = MyDB.listaAlbum.Single(a => a.AlbumId == id);
var carrito = ShoppingCart.ObtenerCart(HttpContext);
carrito.AgregarItem(item);
return RedirectToAction("Index");
}
[HttpPost]
public ActionResult Quitar(int id)
{
string nombreAlbum = MyDB.listaCart.Single(c => c.CartId ==
id).album.Nombre;
int cantidadItem= carrito.QuitarItem(id);
var viewModel = new ShoppingCartRemoveViewModel
{
Mensaje = nombreAlbum + " ha sido quitado de su
compra",
Total = carrito.ObtenerTotal(),
CantidadTotal = carrito.ObtenerCantidad(),
CantidadItem = cantidadItem,
IdItem = id
};
return Json(viewModel);
}
[ChildActionOnly]
public ActionResult Resumen()
{
ViewData["Resumen"] = carrito.ObtenerCantidad();
return PartialView("Resumen");
}
}
}
23. Agregamos la vista para el mtodo Index de la clase ShoppingCartController
CIBERTEC
90
24. Agregamos el cdigo para la vista, para quitar tems del carrito usaremos Jquery con
Ajax.
@model CarritoMVC.ViewModels.ShoppingCartViewModel
@{
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$(".RemoveLink").click(
function () {
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
$.post("/ShoppingCart/Quitar",{"id":recordToDelete},
CIBERTEC
91
function (data) {
if (data.CantidadItem == 0) {
$('#row-' +
data.IdItem).fadeOut('slow');
}
else {
$('#item-count-' +
data.IdItem).text(data. CantidadItem);
}
$('#cart-total').text(data.Total);
$('#update-message').text(data.Mensaje);
}
);
}
}
);
}
);
</script>
<h3><em>Revisa</em> tu compra:</h3>
<p class="button">
@Html.ActionLink("Checkout>>","RegistroyPago","Checkout")
</p>
<div id="update-message"></div>
<table>
<tr>
<th>
Album
</th>
<th>
Precio
</th>
<th>
Cantidad
</th>
<th></th>
</tr>
@foreach (var item in Model.Items)
{
<tr id="row-@item.ID">
<td>
@Html.ActionLink(item.album.Nombre,"Detalle","Tienda",new
{id=item.AlbumId})
</td>
<td>
@item.album.Precio
</td>
<td id="item-count-@item.ID">
@item.Cantidad
</td>
<td>
<a href="#" data-id="@item.ID" class="RemoveLink">Borrar</a>
</td>
</tr>
}
<tr>
<td>Total</td>
<td></td>
<td></td>
CIBERTEC
92
<td id=cart-total>@Model.Total</td>
</tr>
</table>
25. Ejecutamos y hacemos la prueba de una compra.
26. Antes de hacer la lgica para el Checkout, verificamos que el usuario est autenticado.
Debemos actualizar el identificador del carrito, para ello, en la clase AccountController
creamos el mtodo ActualizarIdentificador y luego lo llamamos de los mtodos Login y
Register, tal como se muestra:
CIBERTEC
93
27. El proceso de checkout requiere que el usuario est autenticado, en este proyecto
vamos a utilizar el MemberShipProvider y vamos a crear una base de datos para la
Seguridad llamada CarritoSeguridad, para ello cambiamos el Web.Config, luego
creamos el checkout Controller usando un template vaco (vamos a la carpeta
Controller click derecho- Agregar Controlador y le llamamos CheckoutController)
finalmente decoramos la clase para que se autorice el uso a los usuarios autenticados.
CIBERTEC
94
28. En el CheckOutController agregamos la lgica para registrar, pagar (con el cdigo de la

promocin) y mostrar el proceso completado.
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.Mvc;
CarritoMVC.Models;
namespace CarritoMVC.Controllers
{
[Authorize]
public class CheckOutController : Controller
{
//
// GET: /CheckOut/
const string codigoPromocion = "FREE";
public ActionResult RegistroyPago()
{
return View();
CIBERTEC
95
}
[HttpPost]
public ActionResult RegistroyPago(FormCollection values)
{
var orden = new Orden();
TryUpdateModel(orden);
try
{
if (string.Equals(codigoPromocion,
values["codigoPromocion"], StringComparison.OrdinalIgnoreCase) ==
false)
{
return View(orden);
}
else
{
orden.Usuario = User.Identity.Name;
orden.Fecha = DateTime.Now;
MyDB.listaOrden.Add(orden);
MyDB.SaveChanges();
var carrito =
ShoppingCart.ObtenerCart(HttpContext);
carrito.CrearOrden(orden);
return RedirectToAction("Completado", new { id =
orden.OrdenId });
}
}
catch
{
return View(orden);
}
}
public ActionResult Completado(int id)
{
bool EsValido = MyDB.listaOrden.Any(o => o.OrdenId == id &&
o.Usuario == User.Identity.Name);
if (EsValido)
{
return View(id);
}
else
{
return View("Error");
}
}
}
}
29. Ahora, agregamos la vista para el mtodo RegistroyPago con la opcin de Scaffold
editar, tal como se muestra:
CIBERTEC
96
30. Cambie el cdigo de la vista por lo siguiente:

@model CarritoMVC.Models.Orden
@{
ViewBag.Title = "Registro y Pago";
}
<h2>Registro y pago</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Informacion de envio</legend>
@Html.EditorForModel()
</fieldset>
<fieldset>
<legend>Formas de pago</legend>
<p>Registre su codigo de promocion</p>
<div>
@Html.Label("Codigo")
</div>
<div>
@Html.TextBox("codigoPromocion")
</div>
</fieldset>
<input type="submit" value="Registrar Orden" />
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
31. En la clase Orden de la carpeta Models, excluimos del scaffold los campos OrdenId,
Usuario, Total y Fecha, ya que estos valores son configurados internamente.
CIBERTEC
97
32. Agregamos la vista para el mtodo Completado de la clase CheckOutController, tener

en cuenta que la vista tipada ser el tipo de datos int.
33. Cambiamos el cdigo de la vista por lo siguiente:

@model int
@{
ViewBag.Title = "CheckOut Completado";
}
<h2>Checkout Completado</h2>
<p>Gracias por el registro de tu pedido, el identificador de tu orden
es @Model</p>
<p>Continua
realizando
tus
compras
en
nuestra
@Html.ActionLink("Tienda","Index","Tienda")</p>
34. Finalmente para mejorar el diseo agregaremos vistas parciales.

Para ello en el mtodo Resumen de la clase ShoppingCartController agregamos una
vista parcial tal como se muestra:
CIBERTEC
98
@Html.ActionLink("Compra ("+ ViewData["Resumen"] +")","Index","ShoppingCart",new

{id="cart-status"})
35. Ahora creamos un men de gneros con vistas parciales, para ello en la clase
TiendaController creamos el mtodo MenuGeneros tal como se muestra:
36. A este mtodo le agregamos su vista tal como se muestra:
CIBERTEC
99
@model IEnumerable<CarritoMVC.Models.Genero>
<ul id="categories">
@foreach (var g in Model)
{
<li>@Html.ActionLink(g.Descripcion,"ListaAlbum","Tienda",new
{genero=g.Descripcion},null)</li>
}
</ul>
37. Actualizamos nuestro _Layout.cstml

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<meta charset="utf-8" />
<title>@ViewBag.Title - Mi aplicacin ASP.NET MVC</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/xicon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="header">
<h1>Tienda de musica</h1>
<ul id="navlist">
<li class="first"><a href="/" id="current">Home</a></li>
<li><a href="/Tienda/">Tienda</a></li>
<li>@{Html.RenderAction("Resumen",
"ShoppingCart");}</li>
</ul>
</div>
@{
Html.RenderAction("MenuGeneros", "Tienda");
}
CIBERTEC
100
<div id="main">
@RenderBody()
</div>
<div id="footer">
Construido con MVC 4.0
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
38. Actualizamos la pgina ListarAlbum.cshtml de la carpeta Views/Tienda, tal como se

muestra:
@model CarritoMVC.Models.Genero
@{
ViewBag.Title = "ListaAlbum";
}
<div id="genre">
<h2>Albumnes de @Model.Descripcion</h2>
<ul id="album-list">
@foreach(var a in Model.albumes)
{
<li>
<a href="@Url.Action("Detalle",new {id=a.AlbumId})">
<img src="@a.Url" />
<span>@a.Nombre</span>
</a>
</li>
}
</ul>
</div>
39. Y finalmente actualizamos la pgina Index.cshtml de la carpeta Views/Home, tal como

se muestra:
@{
ViewBag.Title = "Home Page";
}
<div id="promotion"></div>
40. Ejecutamos
CIBERTEC
101
6.5 Resumen
Las vistas son las responsables de procesar la interfaz de usuario, con ayuda de Razor
generarn el HTML que se enviar al cliente Web.
_Layout sirve para generar lo que en Web Form se conoce como paginas maestras,
plantillas que sirven como base de diseo del site.
Las vistas parciales son objetos de vista que pueden incluirse dentro de otras vistas. En
comparacin con Web Form, las vistas parciales serian homlogas de los controles ascx.
El patrn ViewModel tiene como objetivo dar soporte a las necesidades de informacin de
las vistas cuando las clases del modelo no satisfacen el requerimiento de informacin para
la pgina.
CIBERTEC
102
UNIDAD DE
APRENDIZAJE
3
Al trmino de la unidad, los alumnos, utilizando las tcnicas explicadas en clase implementarn
desarrollos de aplicaciones Web, considerando las mejores practicas de arquitectura de
Software, uso de patrones, etc.
Adicionalmente mejorarn la experiencia de usuario, agregando un mayor dinamismo e
interaccin de la pgina a travs de lenguajes de script (Jquery) y tecnologas de solicitud
asncronas (Ajax).
7. EL WEBGRID CONTROL
TEMARIO
El control WebGrid de MVC.

Miembros del WebGrid.
Laboratorio
Resumen
7.1 El control WebGrid de MVC

A principios del ao pasado Microsoft lanz ASP.NET MVC versin 3, adicionalmente un
nuevo producto llamado WebMatrix. WebMatrix incluye un nmero de Helpers que nos
ayudan a simplificar tareas como representacin de grficos y datos tabulares. Uno de
estos helpers es WebGrid, que permite representar datos tabulares de una manera muy
simple con soporte para formato personalizado de columnas, paginacin, clasificacin y
actualizaciones asncronas a travs de AJAX.
WebGrid que naci con WebMatrix est disponible para los proyectos de MVC
7.2 Miembros del WebGrid.
A continuacin se muestra un cuadro explicativo de las principales propiedades y mtodos
del control WebGrid.
Principales parmetros del constructor
Nombre
Tipo
Source
IEnumerable<dynamic> Es el origen de datos que se enlazar al control
columnNames
IEnumerable<string>
Filtra las columnas que se mostrarn en el control.
defaultSort
String
Especifica la columna por defecto por la que se ordenar la data

mostrada en el control.
rowsPerPage
Int
Especfica a cantidad de registros que se mostrar para la

paginacin (por defecto el valor es 10).
CIBERTEC
Comentario
103
canPage
Bool
Activa o desactiva la opcin de paginacin de la data.
canSort
Bool
Activa o desactiva la opcin de ordenar por columna
ajaxUpdateContainerId String
Configurando el ID del elemento contenido en el WebGrid,

permitir el soporte para AJAX.
Principales parmetros del mtodo WebGrid.GetHtml

Nombre
Tipo
Comentario
tableStyle
String
Permite agregar un estilo desde un archivo CSS a la tabla

del control
headerStyle
String
Permite agregar un estilo desde un archivo CSS a la

cabecera de la tabla del control
footerStyle
String
Permite agregar un estilo desde un archivo CSS al pie de

pgina de la tabla del control
rowStyle
String
Permite agregar un estilo desde un archivo CSS a una fila

de la tabla
alternatingRowStyle String
Permite agregar un estilo desde un archivo CSS a las filas

alternadas de la tabla
selectedRowStyle
String
Permite agregar un estilo desde un archivo CSS a una fila

de la tabla, cuando es seleccionada
Caption
String
Muestra un ttulo a la tabla
displayHeader
Bool
Indica si se mostrar un ttulo a la cabecera de las filas
Columns
IEnumerable<WebGridColumn> Indica el conjunto de columnas que mostrar el control
exclusions
IEnumerable<string>
Indica el conjunto de columnas que sern excluidas del

control
firstText
String
Texto a mostrar en el link de primera pgina, para el caso

en que est habilitada la paginacin.
previousText
String
Texto a mostrar en el link de previa pgina, para el caso

nextText
String
Texto a mostrar en el link de siguiente pgina, para el

caso en que est habilitada la paginacin.
lastText
String
Texto a mostrar en el link de ltima pgina, para el caso

7.3 Laboratorio
Uso del Control WebGrid con MVC 4.0

Introduccin
Esta gua consta de:
Uso del control WebGrid.
Personalizacin del WebGrid, Columnas, formatos y estilos.
Filtros y bsquedas
Prerrequisitos
Visual Studio 2012
SQL Server 2012
Base de datos Northwind en el servidor SQL
CIBERTEC
104
Uso del control WebGrid

de ASP.NET MVC 4, como nombre de proyecto ponemos LabWebGrid y una ubicacin
donde se guardar el proyecto. Finalmente damos Aceptar.
1
2
4
CIBERTEC
105
4. En esta gua vamos a trabajar con el modelo EF que se crea a partir de una base de
datos existente (Northwind). Para ello, sobre la carpeta Model, hacemos click derechoAgregar Nuevo elemento; y en el cuadro de dialogo, en la seccin Datos, elegimos
ADO.NET Entity Data Model y le damos como nombre Modelo.edmx; finalmente, click
en Agregar, tal como se muestra:
CIBERTEC
106
2
1
3
4
5. La siguiente pantalla nos indica si vamos a crear el modelo a partir de una base de
datos, o si se crea a partir de un modelo vaco. Para este escenario elegimos la opcin
Generar desde la base de datos y hacemos click en siguiente.
CIBERTEC
107
6. La siguiente pantalla nos pide configurar la conexin a la base de datos. Hacemos click
en Nueva conexin y en el siguiente cuadro de dilogo llenamos los datos que se
muestran en la figura, para conectarnos a Northwind.
CIBERTEC
108
7. Despus de configurar la conexin hacia la base de datos, nos aparecer un cuadro de

dialogo para elegir las tablas que deseamos agregar a nuestro modelo. Para este caso
elegir la tabla Products, tal como se muestra y damos click en Finalizar
CIBERTEC
109
8. Los pasos anteriores nos ayudaron a crear nuestro modelo. eEn este escenario se ha
construido el modelo a partir de una base de datos existentes. Ahora procedemos a
crear el controlador.
Sobre la carpeta Controller hacemos click derecho Agregar-Controlador y en el cuadro
de dialogo damos como Nombre del controlador ProductoController, tal como se
muestra:
CIBERTEC
110
9. En el mtodo Index de la clase ProductoController instanciamos nuestro modelo y

devolvemos una vista con la lista de productos, tal como se muestra:
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.Mvc;
LabWebGrid.Models;
namespace LabWebGrid.Controllers
{
public class ProductoController : Controller
{
//
// GET: /Producto/
{
NorthwindEntities MyDB = new NorthwindEntities();
CIBERTEC
111
return View(MyDB.Products.ToList());
}
}
}
10. Ahora creamos la Vista para el mtodo Index. Para ello sobre el mtodo Index
hacemos click derecho Agregar Vista y creamos una vista fuertemente tipada, tal como
se muestra:
CIBERTEC
112
11. Luego, modificamos la vista para que el modelo se una coleccin (IEnumerable) e
instanciamos el objeto WebGrid para poder mostrar un listado de productos, tal como
se muestra:
@model IEnumerable<LabWebGrid.Models.Product>
@{
WebGrid wg = new WebGrid(Model);
}
<h2>Lista de Productos</h2>
@wg.GetHtml()
12. Finalmente ejecutamos y navegamos a la vista Producto (F5).
CIBERTEC
113
Personalizacin del WebGrid, Columnas, formatos y estilos.

1. En la seccin anterior hemos visto cmo usar el control WebGrid, ahora vamos a
personalizar la apariencia.
Empezamos definiendo las columnas que quiero mostrar. En la configuracin por
defecto el WebGrid muestra todas las columnas. En este caso vamos a mostrar solo las
columnas ProductId, ProductName, UnitPrice y Discontinued. Para ello abrimos el
archivo Index.cshtml de la carpeta Views/Producto y utilizando la coleccin Columns
limitamos las columnas a mostrar, luego de ello ejecutamos el proyecto (F5)
@{
}
@wg.GetHtml(
columns: new []{
wg.Column("ProductId"),
wg.Column("ProductName"),
wg.Column("UnitPrice"),
wg.Column("Discontinued")
}
)
CIBERTEC
114
2. Vemos que podemos controlar las columnas que deseamos mostrar, adicionalmente
tambin podemos modificar el encabezado de cada columna. Por defecto el
encabezado muestra el nombre de la propiedad del clase (Product), para ello usamos
el parmetro Header, tal como se muestra:
@{
}
@wg.GetHtml(
columns: new []{
wg.Column("ProductId",header:"ID"),
wg.Column("ProductName",header:"Producto"),
wg.Column("UnitPrice",header:"Precio"),
wg.Column("Discontinued",header:"Devaluado")
}
)
CIBERTEC
115
3. Tambin podemos dar formato a cada campo de la lista con el parmetro format: En
este caso vamos a hacer que el campo Producto sea un hiperlink, formateamos a dos
decimales el campo precio, y mostraremos un checkbox para el campo Descontinuado,
tal como se muestra:
@{
}
@wg.GetHtml(
columns: new []{
wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLink((
string)item.ProductName,"","") ),
wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToStri
ng("0.00")),
wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBox((
string)item.ProductName,(bool)item.Discontinued))
}
)
CIBERTEC
116
4. Otro detalle: podemos agregar columnas personalizadas, es decir columnas que no

pertenecen al modelo. Vamos a agregar dos columnas, Editar y Eliminar.
@{
}
@wg.GetHtml(
columns: new []{
wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLin
k((string)item.ProductName,"","") ),
wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToS
tring("0.00")),
wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBo
x((string)item.ProductName,(bool)item.Discontinued)),
wg.Column("",header:"Acciones",format:@<text>
@Html.ActionLink("Editar","","")
@Html.ActionLink("Eliminar","","")
</text>)
}
)
CIBERTEC
117
5. WebGrid, por defecto, implementa la paginacin y permite la ordenacin por todas las
columnas. Esta configuracin puede ser modificada, en este caso vamos hacer que no
se permita la ordenacin por el campo ProductID y por el campo Discontinued,
utilizando el atributo CantSort.
@{
}
@wg.GetHtml(
columns: new []{
wg.Column("ProductId",header:"ID",canSort:false),
tring("0.00")),
x((string)item.ProductName,(bool)item.Discontinued),canSort:false),
</text>)
}
)
6. Hasta este momento hemos vistos personalizaciones a nivel de columna, ahora vamos
a realizar dos configuraciones a nivel del Grid, por defecto WebGrid pgina a 10
CIBERTEC
118
registros por pgina, vamos a cambiar esta configuracin a 5 registros y finalmente le

damos un formato a las filas del Grid. Esto lo realizaremos con los atributos
rowsPerPage y alternatingRowStyle.
@{
WebGrid wg = new WebGrid(Model,rowsPerPage:5);
}
@wg.GetHtml(
alternatingRowStyle:"FilaAlterna",
columns: new []{
tring("0.00")),
</text>)
}
)
Filtros y bsquedas
CIBERTEC
119
1. Terminamos esta gua implementando una bsqueda por Nombre de producto. Para
ello, en el archivo Index.cshtml de la carpeta Views/Producto agregamos el html (las
seccin FieldSet) para mostrar un cuadro de texto y el botn buscar.
@{
WebGrid wg = new WebGrid(Model,rowsPerPage:5);
}
@using(@Html.BeginForm("Index","Producto",FormMethod.Get))
{
<fieldset>
<legend>Buscar</legend>
@Html.Label("lblProducto","Producto:")
@Html.TextBox("producto")
<input type="submit" value="Buscar" />
</fieldset>
}
@wg.GetHtml(
alternatingRowStyle:"FilaAlterna",
columns: new []{
tring("0.00")),
</text>)
}
)
2. Finalmente, modificamos el mtodo Index de la clase ProductoController, agregando el

parmetro de bsqueda producto.
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.Mvc;
LabWebGrid.Models;
namespace LabWebGrid.Controllers
{
public class ProductoController : Controller
{
//
// GET: /Producto/
CIBERTEC
120
public ActionResult Index(string producto=null)

{
IQueryable<Product> resultado = MyDB.Products;
if (!string.IsNullOrEmpty(producto))
{
resultado=resultado.Where(p=>p.ProductName.Contains(producto));
}
return View(resultado.ToList());
}
}
}
3. Ejecutamos (F5)
7.4 Resumen
Una manera fcil de poder representar informacin tabular en la pgina cliente se puede
dar al utilizar el control WebGrid.
El control WebGrid est disponible desde la versin 3 de MVC y adems permite
personalizar completamente la presentacin de la informacin, formateando la data,
especificando las columnas, cambiando textos de cabecera, integrndose con los CSSs,
etc.
El control WebGrid tambin nos ayuda a generar de manera automtica las opciones de
paginacin y ordenacin de las filas a mostrar.
CIBERTEC
121
8. EL PATRON INVERSION OF CONTROL (IOC)

TEMARIO
El patrn IoC
Implementaciones del IoC: Dependency Injection (DI)
Laboratorio
Resumen
8.1 El patrn IoC

La Inversin de Control es un patrn de diseo que fue pensado para permitir un menor
acoplamiento entre componentes de una aplicacin y fomentar as el reuso de los mismos
Un problema, una solucin
Como todo patrn, comienza planteando un problema y l viene a resolver. Muchas veces,
un componente tiene dependencias de servicios o componentes cuyos tipos concretos son
especificados en tiempo de diseo.
En la imagen previa, clase A depende de ServiceA y de ServiceB.

Los problemas que esto plantea son los siguientes:
Al reemplazar o actualizar las dependencias, se necesita cambiar el cdigo fuente de la
clase A.
Las implementaciones concretas de las dependencias tienen que estar disponibles en
tiempo de compilacin.
Las clases son difciles de testear aisladamente porque tienen directas definiciones a
sus dependencias. Esto significa que las dependencias no pueden ser reemplazadas
por componentes stubs o mocks.
Las clases tienen cdigo repetido para crear, localizar y gestionar sus dependencias.
Aqu la solucin pasa por delegar la funcin de seleccionar una implementacin concreta
de las dependencias a un componente externo.
El control de cmo un objeto A obtiene la referencia de un objeto B es invertido. El objeto A
no es responsable de obtener una referencia al objeto B sino que es el Componente
Externo el responsable de esto. Esta es la base del patrn IoC.
El patrn IOC aplica un principio de diseo denominado principio de Hollywood (No nos
llames, nosotros te llamaremos).
Actualmente, existen dos tcnicas de implementacin para el IoC: Inyeccin de
dependencias y Service Locutor. En este manual nos enfocaremos en la implementacin
de la Inyeccin de Dependencia (DI)
CIBERTEC
122
8.2 Implementaciones del IoC: Dependency Injection (DI)

Una dependencia entre un componente y otro, puede establecerse estticamente o en
tiempo de compilacin, o bien, dinmicamente o en tiempo de ejecucin. Es en ste ltimo
escenario donde cabe el concepto de inyeccin, y para que esto sea posible, debemos
referenciar interfaces y no implementaciones directas.
En general, las dependencias son expresadas en trminos de interfaces en lugar de clases
concretas. Esto permite un rpido reemplazo de las implementaciones dependientes sin
modificar el cdigo fuente de la clase.
Lo que propone entonces la Inyeccin de dependencias es no instanciar las dependencias
explcitamente en su clase, sino que declarativamente expresarlas en la definicin de la
clase. La esencia de la inyeccin de las dependencias es contar con un componente capaz
de obtener instancias validas de las dependencias del objeto y pasrselas durante la
creacin o inicializacin del objeto
Una manera de inyectar las dependencias es utilizando un constructor con parmetros del
objeto dependiente. ste constructor recibe las dependencias como parmetros y las
establece en los atributos del objeto.
Considerando un diseo de dos capas donde tenemos una capa de BusinessFacade y otra
de BusinessLogic. La capa BusinessFacade depende de la BusinessLogic para operar
correctamente. Todas las clases de lgica de negocio implementan la interface
IBusinessLogic.
En la inyeccin 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.
Finalmente, la inyeccin de dependencias no debera usarse siempre que una clase
dependa de otra, ms bien es efectivo en situaciones especficas como las siguientes:
Inyectar datos de configuracin en un componente.
Inyectar la misma dependencia en varios componentes.
Inyectar diferentes implementaciones de la misma dependencia.
Inyectar la misma implementacin en varias configuraciones
Se necesitan alguno de los servicios provistos por un contenedor.
La IoC no es necesaria si uno va a utilizar siempre la misma implementacin de una
dependencia o la misma configuracin, o al menos, no reportar grandes beneficios en
estos casos.
8.3 Laboratorio
CIBERTEC
123
Aplicacin de la inyeccin de dependencia (DI)

con MVC 4
Introduccin
Esta gua consta de:
Construccin de un proyecto MVC fuertemente acoplado.
Aplicacin de la inyeccin de dependencia, para el desacoplamiento.
PreRequisitos
Visual Studio 2012
SQL Server 2012
Base de datos Northwind en el servidor SQL
Construccin de un proyecto MVC fuertemente acoplado.

de ASP.NET MVC 4, como nombre de proyecto ponemos DI y una ubicacin donde se
guardar el proyecto, finalmente damos Aceptar
CIBERTEC
124
1
2
4
CIBERTEC
125
4. Empezaremos creando un modelo que est fuertemente ligado al controlador. Para

ello agregaremos desde la base de datos Northwind nuestra clase Customer. Sobre la
carpeta Models hacemos click derecho Agregar-Nuevo elemento y en el cuadro de
dialogo, en la seccin Datos, elegimos ADO.NET Entity Data Model y le damos como
nombre Modelo.edmx. Finalmente, damos click en Agregar, tal como se muestra:
CIBERTEC
126
2
1
4
3
5. La siguiente pantalla nos indica si vamos a crear el modelo a partir de una base de
datos, o si se crea a partir de un modelo vaco, para este escenario elegimos la opcin
Generar desde la base de datos y hacemos click en siguiente.
6. La siguiente pantalla nos pide configurar la conexin a la base de datos. Hacemos click
en Nueva conexin y en el siguiente cuadro de dilogo llenamos los datos que se
muestra en la figura para conectarnos a Northwind.
CIBERTEC
127
CIBERTEC
128
7. Despus de configurar la conexin hacia la base de datos, nos aparecer un cuadro de

dialogo para elegir las tablas que deseamos agregar a nuestro modelo. Para este caso
elegir la tabla Customers, tal como se muestra y damos click en Finalizar.
CIBERTEC
CIBERTEC
129
130
8. Los pasos anteriores nos ayudaron a crear nuestro modelo. En este escenario se ha
construido el modelo a partir de una base de datos existentes, ahora procedemos a
crear el controlador.
Sobre la carpeta Controller hacemos click derecho Agregar-Controlador y en el cuadro
de dialogo damos como Nombre del controlador ClienteController, tal como se
muestra:
CIBERTEC
131
9. En esta seccin debemos darnos cuentas de la alta dependencia que se forma al

momento de instanciar el modelo dentro del mtodo Index de la clase
ClienteController.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DI.Models;
namespace DI.Controllers
{
public class ClienteController : Controller
{
//
// GET: /Cliente/
{
return View(MyDB.Customers);
}
}
}
10. Ahora creamos la Vista para el mtodo Index. Para ello, sobre el mtodo Index
hacemos click derecho Agregar Vista y creamos una vista fuertemente tipada, tal como
se muestra:
CIBERTEC
132
11. Luego, modificamos la vista para que el modelo se una coleccin (IEnumerable) e
instanciamos el objeto WebGrid para poder mostrar un listado de clientes, tal como se
observa:
@model
IEnumerable<DI.Models.Customer>
@{
}
<h2>Lista de Clientes</h2>
@wg.GetHtml(columns: new []{
wg.Column("CustomerId","ID"),
wg.Column("CompanyName","Direccion"),
wg.Column("Address","Direccion"),
}
)
12. Finalmente ejecutamos y navegamos a la vista Cliente (F5).
CIBERTEC
133
Aplicacin de la inyeccin de dependencia, para el desacoplamiento

1. Un punto de inicio para poder separar el modelo del controlador es crear una capa de
servicios que interacte directamente con el Modelo, de tal manera que el controlador
trabaje con la capa de servicios y no con el modelo.
Para ello, en el explorador de nuestra solucin agregamos una carpeta llamada
Servicios, tal como se muestra:
CIBERTEC
134
2. Luego, creamos una clase dentro de la carpeta Servicios, llamada MiServicioSQL y all
creamos un mtodo llamado ListarTodos que devuelva los Customers en una
coleccin de objetos, tal como se muestra:
CIBERTEC
135
using System;
using System.Linq;
using System.Web;
using DI.Models
namespace DI.Servicios
{
public class MiServicioSQL
{
public List<Customer> ListarTodos()
{
NorthwindEntities MyDB=new NorthwindEntities();
return MyDB.Customers.ToList();
}
}
}
3. Ahora, cambiamos la clase controladora para usar el servicio en vez de instanciar

directamente el modelo. Para ello, abrimos la clase ClienteController de la carpeta
Controller y hacemos el siguiente cambio:
using System;
using System.Linq;
using System.Web;
using DI.Models;
using DI.Servicios;
{
{
//
// GET: /Cliente/
{
CIBERTEC
136
MiServicioSQL objServicio=new MiServicioSQL();

return View(objServicio.ListarTodos());
}
}
}
4. Llegado a este punto hemos logrado romper la alta dependencia que tena el
controlador con el modelo; sin embargo, ahora la dependencia est entre el
controlador y la nueva clase de servicio.
Para poder superar este inconveniente, el patrn DI sugiere crear una interfaz con los
mtodos necesitados, para que las clases implementen la funcionalidad requerida, por
tanto a nuestro proyecto le agregamos una Interfaz llamada IServicio con un mtodo
llamado ListarTodos, tal como se muestra:
using System;
using System.Linq;
CIBERTEC
137
using System.Text;
using System.Threading.Tasks;
using DI.Models;
{
public interface IServicio
{
List<Customer> ListarTodos();
}
}
5. Ahora hacemos que nuestra clase MiServicioSQL implemente la interfaz IServicio

using System;
using System.Linq;
using System.Web;
using DI.Models;
using DI.Controllers;
namespace DI.Servicios
{
public class MiServicioSQL:IServicio
{
public List<Customer> ListarTodos()
{
NorthwindEntities MyDB=new NorthwindEntities();
return MyDB.Customers.ToList();
}
}
}
6. Siguiendo la secuencia, ahora en vez que el controlador instancie directamente la

clase de servicio, utilice la interfaz, la forma de utilizar la interfaz puede ser creando
una variable a nivel de clase, e instancindola en el constructor del controlador, tal
como se muestra:
using System;
using System.Linq;
using System.Web;
using DI.Models;
using DI.Servicios;
{
{
//
// GET: /Cliente/
IServicio servicio;
public ClienteController()
{
servicio = new MiServicioSQL();
}
{
CIBERTEC
138
return View(servicio.ListarTodos());
}
}
}
Ntese que con respecto a la versin anterior del controlador, en el mtodo index se
instanciaba la clase de servicio, ahora estamos usando una Interfaz que se instanciar
en el constructor del controlador, llegado a este punto, si ms adelante nos pidieran
cambios, por ejemplo, cambiar el proveedor de base datos a Oracle y cambiar de EF a
otro ORM, solo tendramos que implementar la interfaz y cambiar Solo en el
constructor del controlador.
7. Hasta el momento hemos llegado al punto de tener una muy mnima dependencia
entre el controlador y la clase de servicio (en el constructor).
Finalicemos el patrn DI anulando incluso esa mnima dependencia.
Para ello, en vez de que en el constructor de la clase se cree el objeto para la interfaz,
invirtamos las responsabilidades, es decir, en vez de ser el controlador el responsable
de crear el objeto, deleguemos esa responsabilidad a otra entidad, de tal manera que
al controlador se le pase el objeto ya creado, una manera de pasar el objeto ya creado
constara en hacer que el controlador pida esa referencia a travs de un parmetro en
su constructor tal como se muestra:
using System;
using System.Linq;
using System.Web;
using DI.Models;
using DI.Servicios;
{
{
//
// GET: /Cliente/
IServicio servicio;
public ClienteController(IServicio _servicio)
{
servicio = _servicio;
}
{
return View(servicio.ListarTodos());
}
}
}
CIBERTEC
139
Ntese que este pequeo cambio es bastante significativo para nuestros intereses, ya
que ahora el controlador no tiene dependencia alguna con la clase de servicio.
8. Nuestra solucin nos trae un ltimo detalle a resolver. Ahora que el controlador ya no
es responsable de instanciar la interfaz de servicio, se requiere que otra entidad se
encargue de dicha labor.
Una alternativa de solucin para crear el objeto de interfaz es hacer que el mismo
framework de MVC tome esta responsabilidad tal como sigue.
Primero creamos una clase MyDependencyResolver que implemente la interfaz
IDependencyResolver:
using
using
using
using
using
using
System;
System.Linq;
System.Web;
System.Web.Mvc;
DI.Servicios;
{
public class MyDependencyResolver : IDependencyResolver
{
public object GetService(Type serviceType)
{
if (serviceType == typeof(ClienteController))
return new ClienteController(new MiServicioSQL());
return null;
}
public IEnumerable<object> GetServices(Type serviceType)
{
return Enumerable.Empty<object>();
}
}
}
Y finalmente, modificamos el global.asax para registrar nuestra clase.

using System;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Optimization;
using System.Web.Routing;
using DI.Controllers;
namespace DI
{
// Nota: para obtener instrucciones sobre cmo habilitar el modo
clsico de IIS6 o IIS7,
// visite http://go.microsoft.com/?LinkId=9394801
public class MvcApplication : System.Web.HttpApplication
{
CIBERTEC
140
protected void Application_Start()

{
AreaRegistration.RegisterAllAreas();
DependencyResolver.SetResolver(new MyDependencyResolver());
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
}
}
}
9. Ejecutamos (F5)
8.4 Resumen
Los patrones de Software tienen como objetivo dar una solucin a un problema comn.
En el desarrollo de software, una de las principales consideraciones en el diseo es la de
mantener una alta cohesin y un bajo acoplamiento.
El patrn IoC se enfoca en darnos una solucin al dilema del bajo acoplamiento, haciendo
una reduccin a cero respecto a la dependencia de funcionalidades entre clases.
Actualmente existen dos formas de implementar el patrn IoC, utilizando la inyeccin de
Dependencia (ID) o con el patrn Service Locutor.
El patrn DI nos da la posibilidad de inyectar la dependencia a travs del constructor de la
clase o utilizando propiedades de las mismas.
CIBERTEC
141
9. AJAX Y JQUERY
TEMARIO
Introduccin a la programacin del lado del cliente

Introduccin a Jquery
Introduccin a Ajax.
Laboratorio
Resumen
9.1 Introduccin a la programacin del lado del cliente

La llamada Web 2.0 se caracteriza por ser ms dinmica, permitiendo una mayor
interaccin con los usuarios. JavaScript ha jugado un papel protagnico para lograr
aplicaciones con estas caractersticas y a la vez seguir cumpliendo con los estndares
web. Muchos programadores tenemos conciencia del grado de complejidad que tiene
desarrollar este tipo de aplicaciones. Las dificultades se deben fundamentalmente a la
arquitectura cliente-servidor y desconectada del protocolo HTTP, la cual obliga a una
divisin en el desarrollo: por un lado, el cdigo que se ejecuta en el servidor, y por otro,
aquel que se ejecuta en el navegador una vez que se carga la pgina web. Ambas partes
tienen que estar en sintona para producir una aplicacin que contenga una interfaz de
usuario funcional y agradable (al estilo de las aplicaciones de escritorio) junto a un
comportamiento (usualmente guiado por el servidor) que esconda esta complejidad del
protocolo HTTP.
Por esta razn han surgido las RIA tales como Adobe Flex y Microsoft Silverlight. El
problema con las RIA radica en que cada una exige instalar componentes adicionales en el
navegador para poder ejecutar la aplicacin (por ejemplo, Flash o Silverlight). Si bien
internamente esto puede ser aceptable para una organizacin, en el vasto mundo de
Internet (en ocasiones intolerante) esto puede resultar molesto o inviable para un
determinado tipo de usuarios, sobre todo si metemos en escena a las luchas comerciales y
otros intereses que no son propiamente tecnolgicos.
Esto ha llevado a que muchos desarrolladores decidan volver a lo bsico: Java-Script.
JavaScript es pequeo y limitado en comparacin con los lenguajes de propsito general,
pero es suficiente para el desarrollo de aplicaciones web interesantes gracias a la
disponibilidad de un conjunto de bibliotecas de funciones (tal es el caso de jQuery) que
incluyen mucho cdigo de fcil utilizacin para desarrollar interfaces de usuario de calidad
y que ejecutan en cualquier navegador web o sistema operativo
Finalmente, la Web ha evolucionado considerablemente y surge la necesidad de crear
pginas ms dinmicas, ms colaborativas y ms dedicadas al usuario. En este captulo se
ver cmo combinar ASP.NET MVC Ajax y jQuery para producir una interfaz de usuario de
mayor calidad.
9.2 Introduccin a Jquery
JQuery es una librera basada en JavaScript con soporte para mltiples Browser cuyo
objetivo es simplificar la construccin de scripting que se ejecutara en el lado del cliente.
Fue liberado en enero de 2006 por John Resig y actualmente es usado por el 65% de los
10,000 sitios Web ms visitados.
JQuery es un software open source, licenciado bajo el MIT License. La sintaxis de jQuery
est diseada para hacer fcil la navegacin de los documentos DOM, crear animaciones,
manejar eventos e integracin con Ajax.
Microsoft y Nokia anunciaron planes para integrar Jquery con Visual Studio.NET MVC
Framework
9.3 Introduccin a Ajax.
CIBERTEC
142
AJAX, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), es

una tcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet
Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los
usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo
plano. De esta forma es posible realizar cambios sobre las pginas sin necesidad de
recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales se solicitan al
servidor y se cargan en segundo plano sin interferir con la visualizacin ni el
comportamiento de la pgina. JavaScript es el lenguaje interpretado (scripting language) en
el que normalmente se efectan las funciones de llamada de Ajax mientras que el acceso a
los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores
actuales. En cualquier caso, no es necesario que el contenido asncrono est formateado
en XML.
Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemas
operativos y navegadores, dado que est basado en estndares abiertos como JavaScript
y Document Object Model (DOM).
9.4 Laboratorio
Uso de Jquery con MVC 4

Introduccin
Esta gua consta de:
Uso de Jquery en vistas.
Uso de Jquery en vistas

de ASP.NET MVC 4, como nombre de proyecto ponemos Jquery y una ubicacin
CIBERTEC
143
1
2
4
CIBERTEC
144
4. Ahora vamos a ir probando varias piezas de cdigo de Jquery que se integran con la
vista de MVC.
En la carpeta View/Home agregamos una nuevas vista llamada vista1 y dentro de la
vista1 agregamos el siguiente cdigo:
@{
ViewBag.Title = "Vista1";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
$(document).ready(function () {
var searchBox = $('#txtTexto');
searchBox.focus(
function () {
if (searchBox.val() == this.title) {
searchBox.removeClass("defaultText");
searchBox.val("");
}
});
searchBox.blur(
function () {
if (searchBox.val() == "") {
searchBox.addClass("defaultText");
searchBox.val(this.title);
}
});
searchBox.blur();
});
</script>
<h2>Texto por Default</h2>
@using (@Html.BeginForm())
{
<fieldset>
<input type="text" id="txtTexto" title="Ingrese su busqueda aqui"
class="defaultText" />
<input type="submit" value="Buscar" />
</fieldset>
}
CIBERTEC
145
Este cdigo va a mostrar un texto por defecto en un TextBox que se mostrar y

ocultar segn el foco en el control.
5. En la carpeta View/Home agregamos una nuevas vista llamada vista2 y dentro de la

vista2 agregamos el siguiente cdigo.
@{
}
$(function() {
$('#txtConfirmar').bind('cut copy paste',
function(e) {
e.preventDefault();
alert("Cut / Copy / Paste esta deshabilitado");
})
});
</script>
CIBERTEC
146
<h2>Deshabilitar el Copiar-Pegar</h2>
@using (@Html.BeginForm())
{
<fieldset>
<table>
<tr>
<td colspan="2">Cambio de clave</td>
</tr>
<tr>
<td>Clave Actual:</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>Nueva clave:</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>Confirmar nueva clave:</td>
<td><input type="password" id="txtConfirmar" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Aceptar" />
</td>
</tr>
</table>
</fieldset>
}
Este cdigo deshabilita la opcin de copiar, cortar, pegar de una caja de texto.
CIBERTEC
147
6. En la carpeta View/Home agregamos una nuevas vista llamada vista3 y dentro de la

vista3 agregamos el siguiente cdigo
@{
}
@{
}
$(function() {
$('#cbxTodo').click(function () {
$("#cbxList input[type='checkbox']").
attr('checked', $('#cbxTodo').is(':checked'));
}
);
});
</script>
<h2>Seleccionar y limpiar todos los items</h2>
<p>@Html.CheckBox("cbxTodo") Todo</p>
<div id="cbxList">
@Html.CheckBox("Pizza") Pizza<br>
@Html.CheckBox("Pollo") Pollo<br>
@Html.CheckBox("Chifa") Chifa<br>
</div>
<h2>Vista3</h2>
Este cdigo tiene un check que selecciona todas las opciones de un grupo de checks
CIBERTEC
148
9.5 Resumen
Las aplicaciones Web actuales, exigen mayor interactividad del lado del cliente Browser.
La industria del software plante como alternativa el desarrollo de aplicaciones de tipo RIA,
teniendo como mayor desventaja la instalacin de software adicional en el cliente (Flash,
Silverlight, etc.).
Javascript, Ajax y Jquery continan siendo las mejores opciones para el desarrollo de
cdigo del lado del cliente, siendo Jquery una alternativa que brinda mayor facilidad de
desarrollo y compatibilidad con los navegadores.
CIBERTEC
149
UNIDAD DE
APRENDIZAJE
4
Logro de la unidad de aprendizaje
Al trmino de la unidad, los alumnos, utilizando las tcnicas explicadas en clase, implementan
soluciones Web con ASP.NET Web Form, utilizando una arquitectura en 3 capas y utilizando
helpers de acceso a datos tales como el Enterprise Library.
10. ASP.NET WEB FORM

TEMARIO
Formularios y Controles Web de ASP.NET

Controles de validacin.
Laboratorio
Resumen
10.1
Formularios y Controles Web de ASP.NET
ASP.NET proporciona un modelo de desarrollo Web unificado que incluye los servicios
necesarios para crear aplicaciones Web para la empresa. ASP.NET forma parte de .NET
Framework y permite aprovechar al mximo las caractersticas de Common Language
Runtime, como la seguridad de tipos, la herencia, la interoperabilidad de lenguajes y el
control de versiones.
Las pginas Web ASP.NET se utilizan como la interfaz de usuario programable para su
aplicacin Web. Este tipo de pginas presenta la informacin al usuario en cualquier
explorador o dispositivo cliente e implementa lgica de aplicacin mediante el cdigo de la
parte servidor. Las pginas Web ASP.NET:
Se basan en la tecnologa Microsoft ASP.NET, en la que el cdigo que se ejecuta en el
servidor genera de forma dinmica salida de pginas Web en un explorador o dispositivo
cliente.
Son compatibles con cualquier explorador o dispositivo mvil. Las pginas Web ASP.NET
representan automticamente el cdigo HTML adecuado al explorador para funciones tales
como estilos, diseo, etc. Como alternativa, se pueden disear las pginas Web ASP.NET
para ejecutarse en un explorador determinado, como Microsoft Internet Explorer y
aprovechar as todas las caractersticas de un explorador especfico.
Admiten cualquier lenguaje compatible con Common Language Runtime de .NET, incluidos
Microsoft Visual Basic, Microsoft Visual C#, Microsoft J# y Microsoft JScript.NET.
Se crean en el entorno Microsoft .NET Framework. Esto proporciona todos los beneficios
del marco de trabajo, incluidos un entorno administrado, seguridad de tipos y herencia.
Son flexibles gracias a la posibilidad de incorporar a ellas controles creados por los
usuarios y de otros fabricantes.
En las pginas Web ASP.NET, la programacin de la interfaz de usuario se divide en dos
partes: el componente visual y el lgico. Si ha trabajado con herramientas como Visual
Basic y Visual C++ anteriormente, reconocer esta divisin entre la parte visible de una
pgina y el cdigo que se oculta detrs y que interacta con ella.
CIBERTEC
150
El elemento visual est compuesto por un archivo que contiene el marcado esttico como
HTML o controles de servidor ASP.NET o ambos. La pgina Web ASP.NET funciona como
un contenedor del texto y los controles estticos que se desea mostrar.
La lgica de las pginas Web ASP.NET se compone del cdigo creado para interactuar con
la pgina. El cdigo puede residir en un bloque de script en la pgina o en una clase
independiente. Si el cdigo est en un archivo de clase independiente, a este archivo se le
conoce como archivo de cdigo subyacente. El cdigo del archivo de cdigo subyacente se
puede escribir en Visual Basic, Visual C#, Visual J# o JScript .NET.
Las pginas Web ASP.NET se compilan en un archivo de biblioteca de vnculos dinmicos
(.dll). La primera vez que un usuario examina la pgina .aspx con el explorador, ASP.NET
genera automticamente un archivo de clase .NET que representa a la pgina y la compila.
El archivo .dll se ejecuta en el servidor y genera dinmicamente la salida HTML para su
pgina.
A continuacin, se muestra el marco global de ASP.NET y la interaccin con los Web Form
y MVC.
10.2
Controles de validacin.
Los controles de validacin comprueban los datos proporcionados por el usuario en los
controles SelectionList y TextBox. La validacin se produce cuando el formulario se enva
al servidor. Los controles de validacin comprueban los datos proporcionados por el
usuario y, si estos no superan alguna de las pruebas de validacin, ASP.NET devuelve la
pgina al dispositivo de cliente. Cuando esto ocurre, los controles de validacin que
detectaron los errores muestran mensajes de error.
A excepcin del control ValidationSummary, todos los controles de validacin deben hacer
referencia a un control SelectionList o TextBox. Almacena la referencia en la propiedad
ControlToValidate del control de validacin. Como el control ValidationSummary no hace
referencia a ningn otro control, no contiene la propiedad ControlToValidate.
Entre los controles de validacin que existen se incluyen cinco controles que realizan
comparaciones y un control que resume todos los errores que puedan producirse. Todos
los controles de validacin deben colocarse en un control Form o Panel, o dentro de la
plantilla de un control de una pgina Web mvil. Tambin puede arrastrar el control de
validacin hasta una pgina de control de usuario mvil.
En la tabla siguiente se muestran los controles de validacin, y la validacin que estos
controles pueden realizar.
Control
CIBERTEC
Tarea de validacin
151
CompareValidator
Permite comparar dos valores dados
CustomValidator
Permite realizar validaciones personalizadas
RangeValidator
Permite validar para que un valor se encuentre en

un rango de valor minimo y mximo
RegularExpressionValidator
Permite validar que un valor est basado en una

expresin regular, tales como validaciones de
correo electrnico, etc.
RequiredFieldValidator
Permite asegurar que se ingrese un valor (el valor

es requerido)
ValidationSummary
Presenta un cuadro resumen de los errores de

validacin que se dieron en la pgina.
10.3
Laboratorio
Validaciones de entrada de datos con Web Form

Introduccin
Esta gua consta de:
Uso de los controles para validacin de ASP.NET Web Form.
Uso de los controles de validacin

2. Vamos a usar una solucin en Visual C#, Web y de tipo Aplicacin Web vaca de
ASP.NET y le damos como nombre Validaciones, tal como se muestra:
CIBERTEC
152
2
1
3. Sobre el proyecto de validaciones, agregar un nuevo elemento de tipo Formulario Web

y le damos como nombre Empleado, tal como se muestra:
CIBERTEC
153
4. Cambiamos a la vista diseo y agregamos una tabla de 7 filas por 3 columnas
CIBERTEC
154
5. Y hacemos un diseo tal como se muestra:
CIBERTEC
155
6. En este escenario, las consideraciones de validacin son las siguientes: todos los
campos son valores obligatorios, el correo debe tener un formato correcto, la edad
debe estar en un rango de 18 a 40 y finalmente los campos de clave y reingreso deben
ser iguales.
Empezamos agregando un control RequiredFieldValidator en la tercera columna para
cada caja de texto, configurando la propiedad ControlToValidate con la caja de texto
respectiva, ErrorMessage en *, Display en Dynamic y ToolTip en El campo es
obligatorio
CIBERTEC
156
Realizar la misma configuracin para las dems cajas de texto
7. Para que el correo tenga un formato correcto utilizamos el control

RegularExpressionValidator y configuramos las propiedades ControlToValidate,
ErrorMessage y ValidationExpression
CIBERTEC
157
Y la propiedad ValidationExpression, tal como se muestra:
8. Para que la edad este entre 18 y 40, usamos el control RangeValidator y configuramos
las propiedades ControlToValidate, ErrorMessage, Type y los valores de Minimun y
Maximun Value
CIBERTEC
CIBERTEC
158
159
9. Finalmente para validar los ingresos de clave usamos el control CompareValidator

configurando las propiedades ControlToValidate y ControlToCompare
10. Finalmente ejecutamos y realizamos todas las validaciones
CIBERTEC
CIBERTEC
160
161
Nota:
Es probable que se tenga que deshabilitar la validacin Unobtrusive
protected void Page_Load(object sender, EventArgs e)
{
Page.UnobtrusiveValidationMode =
System.Web.UI.UnobtrusiveValidationMode.None;
}
10.4
Resumen
ASP.NET es el marco de trabajo sobre el cual se puede crear aplicaciones de tipo Web
Form, MVC, Web Api y SignalR, etc.
Las aplicaciones Web Form tuvieron como objetivo continuar con el paradigma de
desarrollo de aplicaciones Windows, es decir una interfaz visual, controles y programacin
orientada a eventos.
Las aplicaciones Web Forms tiene la particularidad de dividir el diseo en un archivo y el
cdigo en otro (Code Behind).
ASP.NET Web Form viene con una serie de controles de validacin para facilitarnos la
tarea de validacin de ingreso de datos por parte del usuario.
CIBERTEC
162
11. APLICACIONES EN 3 CAPAS CON ASP.NET WEB FORM I

TEMARIO
La programacin en capas
La capa de datos
La capa de entidad
La capa de reglas de negocio
Laboratorio
Resumen
11.1
La programacin en capas
La programacin en capas es una arquitectura cliente-servidor en la que el objetivo
primordial es la separacin de la lgica de negocios de la lgica de diseo; un ejemplo
bsico de esto consiste en separar la capa de datos de la capa de presentacin al usuario.
La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en varios
niveles y, en caso de que sobrevenga algn cambio, slo se ataca al nivel requerido sin
tener que revisar entre cdigo mezclado. Un buen ejemplo de este mtodo de
programacin sera el modelo de interconexin de sistemas abiertos.
Adems, permite distribuir el trabajo de creacin de una aplicacin por niveles; de este
modo, cada grupo de trabajo est totalmente abstrado del resto de niveles, de forma que
basta con conocer la API que existe entre niveles.
En el diseo de sistemas informticos actual se suelen usar las arquitecturas multinivel o
Programacin por capas. En dichas arquitecturas a cada nivel se le confa una misin
simple, lo que permite el diseo de arquitecturas escalables (que pueden ampliarse con
facilidad en caso de que las necesidades aumenten).
11.2
La capa de datos.
En la capa de datos se gestiona el acceso a los datos de la aplicacin. Se emplean
gestores de bases de datos que realizan la recuperacin y el almacenamiento fsico de los
datos a partir de solicitudes de la capa de negocio.
En esta capa se puede hacer uso de una propiedad denominada persistencia de objetos,
que permite vincular objetos de bases de datos relacionales a objetos de lenguajes de
programacin como clases para aumentar el nivel de abstraccin y facilitar el acceso a los
datos desde la capa de negocio. Existen varias implementaciones tecnolgicas sobre
persistencia que debern emplearse atendiendo a las necesidades de cada aplicacin
11.3
La capa de entidad
Las entidades del negocio de una aplicacin representa entidades reales y adems suelen
ser sustantivos, como por ejemplo: Cliente, Nmina, Factura, Depsito, etc.
Tcnicamente en .NET suele ser un proyecto de Bibliotecas de clase con una serie de
clases que representa el dominio del negocio y sus propiedades respectivas.
11.4
La capa de reglas de negocio.
Esta capa almacena toda la lgica de la aplicacin como algoritmos, validaciones y
coordinacin necesaria para resolver la problemtica. Es responsable de representar conceptos
de negocio, informacin sobre la situacin de los procesos e implementacin de las reglas de negocio. Esta
capa sirve de nexo entre las peticiones del usuario (capa de presentacin) y la conexin al
servidor de datos (capa de acceso a datos)
CIBERTEC
11.5
163
Laboratorio
Mantenimiento en 3 capas con Web Form

Introduccin
Esta gua consta de:
Creacin de la tabla y Store Procedures en SQL Server.
Programacin en 3 capas con ASP.NET Web Form
Creacin de la tabla en SQL Server

1. Iniciamos SQL Server y creamos la tabla Cliente con los Store procedures para
seleccionar, insertar, actualizar y eliminar.
CIBERTEC
164
USE master
go
CREATE DATABASE CRM
GO
USE CRM
GO
CREATE TABLE Cliente
(
IdCliente int primary key identity(1,1),
Nombres varchar(100),
Direccion varchar(150),
Telefono varchar(50)
)
GO
CREATE PROC selCliente
as
SELECT
IdCliente ,
Nombres ,
Direccion,
Telefono
FROM Cliente
go
CREATE PROC insCliente
@Nombres varchar(100),
@Direccion varchar(150),
@Telefono varchar(50)
as
INSERT INTO Cliente
(
Nombres ,
Direccion,
CIBERTEC
165
Telefono
)
values
(
@Nombres ,
@Direccion,
@Telefono
)
go
CREATE PROC updCliente
@IdCliente int,
@Nombres varchar(100),
@Direccion varchar(150),
@Telefono varchar(50)
as
UPDATE Cliente
set
Nombres =@Nombres ,
Direccion=@Direccion,
Telefono =@Telefono
Where IdCliente=@IdCliente
GO
CREATE PROC delCliente
@IdCliente int
AS
DELETE FROM Cliente
Where IdCliente=@IdCliente
go
Programacin en 3 capas con ASP.NET Web Form

CIBERTEC
166
2. Vamos a usar una solucin en blanco ubicada en Otros tipos de proyecto .Soluciones
de Visual Studio, y le damos como nombre Mantenimiento, tal como se muestra:
3
4
3. En nuestra solucin en blanco vamos a crear nuestra estructura de capas agregando a

la solucin tres proyectos de tipo Librera de clases y un proyecto ClienteWeb de tipo
ASP.NET Web form, todo los proyectos lo crearemos usando C#.
Sobre la solucin en blanco hacemos click derecho - agregar nuevos proyecto y
elegimos Visual C#-Biblioteca de clases, y le damos como nombre al proyecto
CapaDatos tal como se muestra:
CIBERTEC
167
CIBERTEC
168
4. Hacemos la misma operativa, creando 2 proyectos de Biblioteca de clases, una llamada

CapaEntidad y otro llamado CapaReglas
5. A nuestras tres capas borramos la clase Class1 que se crea por defecto y creamos una
clase llamada Cliente en cada proyecto y finalmente agregamos un proyecto ms
llamado ClienteWeb de tipo Aplicacin Web Vaca de ASP.NET, tal como se muestra:
CIBERTEC
169
2
1
Nuestra solucin debera quedar tal como se muestra:
6. Ahora empezamos creando la capa de entidad, en la clase Cliente de la capa entidad.

Agregamos las propiedades que se mapearan con los campos de la tabla Cliente.
using
using
using
using
CIBERTEC
System;
System.Linq;
System.Text;
170
namespace CapaEntidad
{
public class Cliente
{
public int IdCliente { get; set; }
public string Nombres { get; set; }
public string Direccion { get; set; }
public string Telefono { get; set; }
}
}
7. Ahora, en la clase Cliente de la capa de datos crearemos los mtodos de ListarTodos,

Adicionar, Actualizar y Eliminar. La capa de datos requiere de la capa de entidad, por
tanto previamente se deber referenciar a la capa de entidad desde la capa de datos.
Estando en la clase Cliente de la capa de datos creamos el siguiente cdigo

using System;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;
namespace CapaDatos
{
{
private string cadenaConexion = "Server=.;Initial
Catalog=CRM;trusted_connection=yes";
public DataTable ListarTodos()
{
SqlConnection cnn = new SqlConnection(cadenaConexion);
SqlDataAdapter dap = new SqlDataAdapter("selCliente", cnn);
CIBERTEC
171
DataSet dst = new DataSet();

DataTable dt = null;
try
{
dap.Fill(dst);
dt= dst.Tables[0];
}
catch
{
//codigo de registro de log aqui
}
finally
{
if (cnn.State==ConnectionState.Open)
{
cnn.Close();
}
}
return dt;
}
public bool Adicionar(CapaEntidad.Cliente entidad)
{
SqlCommand cmd = new SqlCommand("insCliente", cnn);
cmd.CommandType=CommandType.StoredProcedure;
bool resultado;
SqlParameter par;
par = cmd.Parameters.Add("@Nombres", SqlDbType.VarChar, 100);
par.Direction = ParameterDirection.Input;
par.Value = entidad.Nombres;
par = cmd.Parameters.Add("@Direccion", SqlDbType.VarChar,
150);
par.Value = entidad.Direccion;
par = cmd.Parameters.Add("@Telefono", SqlDbType.VarChar, 50);
par.Value = entidad.Telefono;
try
{
cnn.Open();
int cantidadFilas = cmd.ExecuteNonQuery();
if (cantidadFilas>0)
{
resultado=true;
}
else
{
resultado=false;
}
}
catch
{
resultado = false;
}
finally
CIBERTEC
172
{
if (cnn.State == ConnectionState.Open)
{
cnn.Close();
}
}
return resultado;
}
public bool Actualizar(CapaEntidad.Cliente entidad)
{
SqlCommand cmd = new SqlCommand("updCliente", cnn);
cmd.CommandType = CommandType.StoredProcedure;
bool resultado;
SqlParameter par;
par = cmd.Parameters.Add("@IdCliente", SqlDbType.Int);
par.Value = entidad.IdCliente;
par = cmd.Parameters.Add("@Nombres", SqlDbType.VarChar, 100);
par.Value = entidad.Nombres;
par = cmd.Parameters.Add("@Direccion", SqlDbType.VarChar,
150);
par.Value = entidad.Direccion;
par = cmd.Parameters.Add("@Telefono", SqlDbType.VarChar, 50);
par.Value = entidad.Telefono;
try
{
cnn.Open();
if (cantidadFilas > 0)
{
resultado = true;
}
else
{
resultado = false;
}
}
catch
{
resultado = false;
}
finally
{
{
cnn.Close();
}
}
return resultado;
}
CIBERTEC
173
public bool Eliminar(CapaEntidad.Cliente entidad)

{
SqlCommand cmd = new SqlCommand("delCliente", cnn);
cmd.CommandType = CommandType.StoredProcedure;
bool resultado;
SqlParameter par;
par = cmd.Parameters.Add("@IdCliente", SqlDbType.Int);
par.Value = entidad.IdCliente;
try
{
cnn.Open();
{
resultado = true;
}
else
{
resultado = false;
}
}
catch
{
resultado = false;
}
finally
{
{
cnn.Close();
}
}
return resultado;
}
}
}
8. Estando en la clase Cliente de la capa de reglas, crearemos la lgica de dicha clase. La

capa de reglas necesita tanto a la capa de entidad y la capa de datos, as que estando
en la capa de reglas referenciamos a los otros proyectos, tal como se muestra:
CIBERTEC
174
En la clase Cliente de la capa de reglas hacemos lo siguiente:

using
using
using
using
using
using
System;
System.Linq;
System.Text;
System.Threading.Tasks;
System.Data;
namespace CapaReglas
{
{
private CapaDatos.Cliente objCliente = new CapaDatos.Cliente();
{
return objCliente.ListarTodos();
}
{
return objCliente.Adicionar(entidad);
}
{
return objCliente.Actualizar(entidad);
}
{
return objCliente.Eliminar(entidad);
}
}
}
9. Finalmente, en la capa de ClienteWeb creamos las pginas Web Form, agregamos un

formulario Web haciendo Click derecho en el proyecto ClienteWeb, AgregarFormulario Web Form y le llamamos Cliente, tal como se muestra:
CIBERTEC
175
10. Estando en la vista de diseo del formulario, agregamos un tabla con dos filas
CIBERTEC
176
11. En la primera fila de la tabla le ponemos como ttulo Lista de Clientes y en la segunda
fila agregamos un control GridView y un control ObjectDataSource , tal como se
muestra:
CIBERTEC
177
12. Ahora configuramos el control ObjectDataSource, en la opcin que dice Configurar

Origen de Datos.
CIBERTEC
CIBERTEC
178
CIBERTEC
179
180
13. Una vez configurado el ObjectDataSource, enlazamos el GridView con el

objectDatasource, tal como se muestra:
CIBERTEC
181
14. Ejecutamos y tendremos la funcionalidad de listar , Editar y Eliminar
15. Por ultimo, para la funcionalidad de Agregar, podemos agregar a nuestra pagina un
botn con propiedad Text Adicionar y que navegue a una pgina llamada nuevo.aspx
CIBERTEC
182
16. Estando en formulario Nuevo.aspx , agregamos una tabla con 4 filas por dos columnas
y hacemos el siguiente diseo
17. En el caso anterior se us el objeto objectDatasource. Una alternativa adicional es

escribir el cdigo directamente, haciendo doble click en el botn Aceptar , agregamos
el siguiente cdigo.
CIBERTEC
using
using
using
using
using
using
183
System;
System.Linq;
System.Web;
System.Web.UI;
System.Web.UI.WebControls;
namespace ClienteWeb
{
public partial class Nuevo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
CapaEntidad.Cliente entidad = new CapaEntidad.Cliente();
entidad.Nombres = txtNombre.Text;
entidad.Direccion = txtDireccion.Text;
entidad.Telefono = txtTelefono.Text;
CapaReglas.Cliente objCliente = new CapaReglas.Cliente();
bool resultado= objCliente.Adicionar(entidad);
if (resultado == true)
{
Response.Redirect("Cliente.aspx");
}
else
{
Response.Write("Error al realizar la accion");
}
}
}
}
18. Ejecutamos
CIBERTEC
184
Nota Final: La refactorizacin de la capa de datos utilizando Helpers se realizar en el

siguiente captulo.
11.6
Resumen
La arquitectura en capas nos permite tener un diseo de divisin de tareas, entre lo que es
la presentacin de los datos en la interfaz de usuario, las reglas del negocio y el acceso a
datos.
La capa de datos nos ayuda a interactuar con el almacn de datos y nos da
funcionalidades para la persistencia.
La capa de entidad representa el dominio del negocio a travs de clases con propiedades.
La capa de reglas de negocio contiene toda la lgica y algoritmos para el cumplir el objetivo
del sistema.
Finalmente, en la capa de Cliente o Usuario estn las interfaces graficas de usuario o
programa que usar las capas adyacentes.
CIBERTEC
185
12. APLICACIONES EN 3 CAPAS CON ASP.NET WEB FORM II

TEMARIO
Helpers para la capa de datos

Laboratorio
Resumen
12.1
Helpers para la capa de datos

En una solucin de capas se puede notar que las capa de datos, tienen bastante
cdigo redundante, entre objetos sqlconnection, etc, adems se puede ver la alta
dependencia que se ha formado con la base de datos SQL.
Esta situacin hace que los cambios posteriores sean difciles de abordar, si en nuestro
aplicativo se decide cambiar de base de datos, se tendra que reescribir la capa de
datos.
Para evitar este problema se han creado los helpers de capa de datos que tienen como
objetivo simplificar la cantidad de cdigo que se escribe y adems nos da una
independencia del motor de base de datos.
Enterprise Library de Patterns and Practices es parte del equipo de Microsoft que
proporciona un conjunto de libreras que nos ayuda a simplificar el desarrollo de
software.
Para
mayor
informacin
puede
ir
a
http://msdn.microsoft.com/enus/library/ff921345.aspx y http://msdn.microsoft.com/en-us/library/ff648951.aspx para
poder descargar las libreras correspondientes
12.2
Laboratorio
Uso del Enterprise Library con Web Form

Introduccin
Esta gua consta de:
Refactorizacin de la capa de datos con Enterprise Library.
Refactorizacin de la capa de datos

1. Empezamos llevando nuestra cadena de conexin al Web .Config y configurando las
libreras de Enterprise Library
<?xml version="1.0" encoding="utf-8"?>
<!-Para obtener ms informacin sobre cmo configurar la aplicacin de
ASP.NET, visite
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<configSections>
<section name="dataConfiguration"
type="Microsoft.Practices.EnterpriseLibrary.Data.Configuration.Database
Settings, Microsoft.Practices.EnterpriseLibrary.Data,
Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
requirePermission="true"/>
</configSections>
<dataConfiguration defaultDatabase="Connection String"/>
<connectionStrings>
CIBERTEC
186
<add name="Connection String"

connectionString="Database=CRM;Server=.;Integrated
Security=SSPI"
providerName="System.Data.SqlClient"/>
<add name="cnn"
connectionString="Server=.;initial
catalog=northwind;trusted_connection=yes"/>
</connectionStrings>
</configuration>
2. Estando en el proyecto de capa de datos referenciamos las dlls

Microsoft.Practices.EnterpriseLibrary.Common.dll,
Microsoft.Practices.EnterpriseLibrary.Data.dll,
Microsoft.Practices.EnterpriseLibrary.Data.dll, Microsoft.Practices.ServiceLocation.dll ,
Microsoft.Practices.Unity.dll y Microsoft.Practices.Unity.Interception.dll,, que vienen
incluidas en la instalacin Enterprise Library
CIBERTEC
187
Y finalmente refactorizamos el cdigo de la clase cliente de la capa de datos
using System;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using Microsoft.Practices.EnterpriseLibrary.Data;
using Microsoft.Practices.EnterpriseLibrary.Data.Sql;
using System.Data.Common;
namespace CapaDatos
{
{
{
Database db= DatabaseFactory.CreateDatabase();
DataTable dt =db.ExecuteDataSet(CommandType.StoredProcedure,
"selCliente").Tables[0];
return dt;
}
{
bool resultado;
Database db= DatabaseFactory.CreateDatabase();
DbCommand cmd = db.GetStoredProcCommand("insCliente",
entidad.Nombres,
CIBERTEC
188
entidad.Direccion,
entidad.Telefono);
try
{
int cantidadFilas = db.ExecuteNonQuery(cmd);
if (cantidadFilas>0)
{
resultado=true;
}
else
{
resultado=false;
}
}
catch
{
resultado = false;
}
return resultado;
}
{
bool resultado;
Database db = DatabaseFactory.CreateDatabase();
DbCommand cmd = db.GetStoredProcCommand("updCliente",
entidad.IdCliente,
entidad.Nombres,
entidad.Direccion,
entidad.Telefono);
try
{
{
resultado = true;
}
else
{
resultado = false;
}
}
catch
{
resultado = false;
}
return resultado;
}
{
bool resultado;
Database db = DatabaseFactory.CreateDatabase();
DbCommand cmd = db.GetStoredProcCommand("delCliente",
entidad.IdCliente);
try
CIBERTEC
189
{
{
resultado = true;
}
else
{
resultado = false;
}
}
catch
{
resultado = false;
}
return resultado;
}
}
}
3. Ejecutamos, los resultados son los mismos, pero la capa de datos esta refactorizada
con un cdigo ms simplificado y claro.
CIBERTEC
190
12.3
Resumen
Los Helpers de la capa de datos ayudan a simplifcar el cdigo de acceso a datos.
Microsoft a travs de los Enterprise Library nos ayuda con un conjunto de libreras para
mejorar nuestro cdigo, simplificando y reduciendo la cantidad de cdigo que se escribe.
CIBERTEC

Lenguaje de Programacion III

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Lenguaje de Programacion III

Enviado por

Direitos autorais:

Formatos disponíveis

Lenguaje de

LENGUAJE DE PROGRAMACIN III

LENGUAJE DE PROGRAMACIN III

: Introduccin a la Web y ASP.NET

: Mantenimientos y seguridad con MVC 4.0

: OAuth Providers con MVC 4.0

: Interaccin con el Modelo

: El lenguaje Razor y los HTML Helpers

: Inversion of Control (IoC)

: ASP.NET Web Form

: Aplicaciones en 3 capas con ASP.NET Web Form I

: Aplicaciones en 3 capas con ASP.NET Web Form II

LENGUAJE DE PROGRAMACIN III

LENGUAJE DE PROGRAMACIN III

LENGUAJE DE PROGRAMACIN III

Lenguaje de Programacin III

LENGUAJE DE PROGRAMACIN III

1. INTRODUCCIN A LA WEB Y ASP.NET

1.1. Arquitectura de la Web

LENGUAJE DE PROGRAMACIN III

El 6 de agosto de 1991, Berners-Lee public un breve resumen del proyecto de la World

Lado del Cliente

Lado del Servidor

Formato de Datos XML,

1 Cliente Web o Browser: es quien da inicio a la interaccin de la web a travs de un

LENGUAJE DE PROGRAMACIN III

7 Scripts del cliente: finalmente, si se quiere dar mayor interaccin en el Browser, se

LENGUAJE DE PROGRAMACIN III

1.3. ASP.NET MVC 4.0

LENGUAJE DE PROGRAMACIN III

1.5. Web Form y MVC

LENGUAJE DE PROGRAMACIN III

Creando una vista Details con MVC 4.0

LENGUAJE DE PROGRAMACIN III

LENGUAJE DE PROGRAMACIN III

4. En la carpeta Models agregamos una clase llamada Cliente.

5. Agregamos las siguientes propiedades a la clase Cliente.

LENGUAJE DE PROGRAMACIN III

6. Ahora, agregamos nuestro controlador, hacemos click derecho a nuestra carpeta

LENGUAJE DE PROGRAMACIN III

LENGUAJE DE PROGRAMACIN III

LENGUAJE DE PROGRAMACIN III

LENGUAJE DE PROGRAMACIN III

LENGUAJE DE PROGRAMACIN III

12. Ejecutamos (presionando F5) y navegamos a la pgina http://localhost:1171/Cliente,

LENGUAJE DE PROGRAMACIN III

Microsoft implementa el patrn MVC en su tecnologa de ASP.NET, para el desarrollo

LENGUAJE DE PROGRAMACIN III

2. MANTENIMIENTOS Y SEGURIDAD CON MVC 4.0

Introduccin a Entity Framework

2.1 Introduccin a Entity Framework

Las aplicaciones pueden funcionar en trminos de un modelo conceptual ms centrado

LENGUAJE DE PROGRAMACIN III

Database First: en este modo de trabajo se puede generar el modelo de datos a

2.2 La clase DbContext

LENGUAJE DE PROGRAMACIN III

2.3 Anotaciones y Validacin

LENGUAJE DE PROGRAMACIN III

SimpleMembership tiene el mismo objetivo, ayudarnos a abordar los requerimientos de

LENGUAJE DE PROGRAMACIN III

Mantenimiento de varias clases con MVC 4.0

Mantenimiento con MVC y Entity Framework

LENGUAJE DE PROGRAMACIN III