Lenguaje de Programacion III

Lenguaje de Programación III

LENGUAJE DE PROGRAMACIÓN I I I 2

CIBERTEC CARRERAS PROFESIONALES



ÍNDICE

Presentación

Red de contenidos

Unidad de aprendizaje 1

1.1 Tema 1 : Introducción 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 : Interacción con el Modelo

2.2 Tema 5 : El lenguaje Razor y los HTML Helpers

2.3 Tema 6 : Vistas


3.1 Tema 7 : El patrón Repository

3.2 Tema 8 : Inversion of Control (IoC)

3.3 Tema 9 : Ajax y Jquery


4.1 Tema 10

4.2 Tema 11

4.3 Tema 12

:

:

:

ASP.NET Web Form

Aplicaciones en 3 capas con ASP.NET Web Form I

Aplicaciones en 3 capas con ASP.NET Web Form II





PRESENTACIÓN

El curso de Lenguaje de Programación III pertenece a la Escuela de Tecnología de Información y se dicta en las carreras de Tecnología de la institución. Este curso brinda un conjunto de herramientas de programación para trabajar en aplicaciones web, en función al diseño de páginas web y con un origen de datos que permita al alumno realizar, en forma eficiente, operaciones de consulta y actualización de datos bajo el entorno web. El manual para este curso ha sido diseñado bajo la modalidad de unidades de aprendizaje, las que 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 prácticos que deberá desarrollar en cada sesión, los que le permitirá reforzar lo aprendido en la clase. El curso es eminentemente práctico. Consiste en diseño y programación de aplicaciones web con base de datos utilizando ADO .NET Entity Framework. La primera parte de este manual enseña a familiarizarse con el entorno de desarrollo de una aplicación web MVC 4.0: diseño del modelo, uso del Entity Framework Code First, generación de mantenimientos con el scafoolding, todo ello mediante ejemplos didácticos. Luego, se desarrollará el tema de las vistas y controladores, de manera más detallada, implementando una solución ecommerce. Finalmente se implementan mejoras a la solución dando una mayor interactividad del lado del cliente con Jquery, Ajax y adopción de patrones de software considerados Best Practices. Este manual reviste importancia para una capacitación en conocimientos generales en el manejo de aplicaciones web, utilizando la tecnología de punta que se implementa actualmente en el mercado.



RED DE CONTENIDOS

Lenguaje de Programación III

Diseño de un sitio web

con MVC

Introducción a ASP.Net

4.0

Diseño con

Master Pages

y manejo

de

estado

Acceso a datos con

EF y

seguridad

Acceso a datos

con ADO.N

et y manejo

de

capas

Manejo de

WebServices

y WCF

Manejo de JQUERY y

AJAX

Manejo de

controles de

AJAX

AJAX MVC

(Modelo – Vista –

Controlad

or)

ASP.Net

MVC

Controles de

usuario

Manejo de

imágenes y

Proyectos de

AJAX



Logros de la unidad de aprendizaje Al término 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 tecnologías que lo implementan, adicionalmente se tendrá una clara diferenciación entre ASP.NET Web Form y MVC, conociendo sus ventajas y desventajas. Finalmente, con las técnicas explicadas en clase, estarán en la capacidad de construir aplicaciones Web orientadas a Datos con MVC, Entity Framework, seguridad con Simple MembershipProvider e integración con proveedores de autenticación externas, tales como Facebook, Google, etc.

1. INTRODUCCIÓN A LA WEB Y ASP.NET

TEMARIO:

Arquitectura de la Web

Patrón 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 información cuyos usuarios pueden leer y escribir en ella a través de computadoras conectadas a Internet. El término es a menudo usado erróneamente como un sinónimo para la Internet misma, pero la Web es un servicio que opera sobre la Internet, como también lo hace el correo electrónico. En 1980, Tim Berners-Lee, un contratista independiente en la Organización Europea para la Investigación Nuclear (CERN por sus siglas en ingles), Suiza, desarrolló ENQUIRE, como una base de datos personal de gente y modelos de software, pero también como una forma de interactuar con el hipertexto; cada nueva página de información en ENQUIRE debía estar enlazada a una página existente En la navidad de 1990, Berners-Lee había 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 también un editor de páginas web), el primer servidor de aplicaciones HTTP, el primer servidor web (http://info.cern.ch) y las primeras páginas web que describían el proyecto mismo.

UNIDAD DE

APRENDIZAJE

1



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 también marca el inicio de la Web como un servicio públicamente disponible en Internet. La Web hoy en día cuenta con una serie de componentes adicionales que interactúan entre sí para poder hacer realidad su existencia y correcto funcionamiento. La siguiente figura muestra los principales componentes de su arquitectura:

Browser

Internet

Servidor Web

Http

Respuesta en HTML

Http-Request

Formato de Datos XML, Json

Lado del ServidorLado del Cliente

IEFireFoxChromeOpera

Safari, etc.

Tecnología Web

ASP.NETPHPJSFJSP

Suite MacromediaEtc.

Scripts del ClienteJava Script

Jquery

Http-Response

1

2

3

4

5

6

7

1 Cliente Web o Browser: es quien da inicio a la interacción de la web a través de un programa especial llamado Navegador o Browser y solicitando una dirección URL, actualmente en el mercado los principales navegadores son Internet Explorer, Firefox, Chrome, Opera, Safari, etc. 2 Protocolo de comunicación Http: este protocolo hace posible la comunicación desde la máquina cliente hasta la máquina servidora donde se encuentran las aplicaciones web, se vale del ruteo a través del router, direcciones IP, servidores DNS, etc. 3 Servidor Web: son máquinas 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 Tecnología Web: son las herramientas que ayudan a crear las aplicaciones Web, las herramientas más conocidas son PHP, ASP.NET, JSP, JSF, DreamWeaver, etc. 5 Respuesta HTML: cuando el servidor web recepciona la solicitud de página y procesa el resultado, siempre hacia el usuario final envía un documento de formato especial llamado HTML, este lenguaje HTML es interpretado por los Browser para formatear y representar la página final. 6 Formato de datos: en algunos escenarios también se envía data hacia el lado del cliente (Web Browser), dos de los formatos más utilizados para el envío de data son XML y Json



7 Scripts del cliente: finalmente, si se quiere dar mayor interacción en el Browser, se ejecutan programas clientes conocidos como códigos script. Dos de las opciones más utilizadas para la ejecución de script son JavaScript y Jquery.

1.2. Patrón MVC (Modelo Vista Controlador)

El Modelo Vista Controlador (MVC) es un patrón de arquitectura de software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y el módulo encargado de gestionar los eventos y las comunicaciones. Para ello, MVC propone la construcción de tres componentes distintos que son el modelo, la vista y el controlador, es decir, por un lado define componentes para la representación de la información, y por otro lado para la interacción del usuario. Este patrón de diseño se basa en las ideas de reutilización de código y la separación de conceptos, características que buscan facilitar la tarea de desarrollo de aplicaciones y su posterior mantenimiento.

Modelo Contiene el núcleo de la funcionalidad (dominio) de la aplicación. Encapsula el estado de la aplicación. No sabe nada / independiente del Controlador y la Vista. Vista Es la presentación 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 petición del Cliente, ejecutando la acción adecuada y creando el modelo pertinente Es importante mencionar que el patrón MVC no es exclusivo para el diseño Web, en sus inicios fue muy utilizado para el desarrollo de interfaces graficas de usuario (GUI), por otro lado tampoco es una implementación propietaria de alguna empresa tecnológica, 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 patrón MVC para el entorno de la Web.



1.3. ASP.NET MVC 4.0 Como se comentó en el apartado anterior, el patrón MVC es implementado por muchas herramientas tecnológicas, Microsoft ha implementado el patrón MVC en su tecnología de ASP.NET, para el desarrollo de aplicaciones web. ASP.NET MVC es un poderoso framework para la construcción de sitios Web basándose en los estándares de internet actuales tales como HTML 5, jquery, CSS 3, etc. En el momento de crear este manual la versión actual es la MVC 4.0 que presenta las siguientes nuevas características:

Soporte para la creación de aplicaciones para Facebook.

Soporte para proveedores de autenticación a través del OAuth Providers.

Plantillas por default renovadas, con un estilo mejorado.

Mejoras en el soporte para el patrón Inversion Of Control e integración 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 Asíncronos

Soporte para el desarrollo de aplicaciones Web Móvil, 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 inglés y en español significa "Andamio", pero en programación el scaffolding es un método para construir aplicaciones basadas en bases de datos. Esta técnica está soportada por algunos frameworks del tipo MVC en el cual el programador escribe una especificación que describe cómo debe ser usada la base de datos. Luego, el compilador utiliza esa especificación para generar el código que la aplicación 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 código a través del Scaffolding.



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 interacción entre el modelo y la vista. El resultado de esta necesidad es Razor. ASP.NET Web Pages-Razor proporciona una sintaxis de programación simple para escribir código en páginas web donde el código basado en servidor se incrusta en el formato HTML de las páginas web. El código de Razor se ejecuta en el servidor antes de que la página se envíe al explorador. Este código de servidor puede crear dinámicamente contenido de cliente, es decir, puede generar formato HTML u otro contenido sobre la marcha y, a continuación, enviarlo al explorador junto con cualquier código HTML estático que contenga la página Finalmente, Razor no es un nuevo lenguaje de programación, 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 tecnología ASP.NET MVC y la tecnología 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

Tecnología madura y estable con soporte por miles de controles y herramientas de terceros

Problemas para dar soporte al paradigma de separación de conceptos (Soc)

Modelo de programación orientado a eventos, haciéndose muy similar al desarrollo de aplicaciones Windows.

Problemas para orientarlo a un proyecto de Testing, TDD (Desarrollo orientado al Test)

Soporte al manejo de estados. Problemas de rendimiento cuando se hace uso excesivo del manejo de estados.

Se necesita un conocimiento básico de HTML y javascript para construir interfaces Web

Menos control del HMTL generado

Excelentes mecanismos de seguridad construidos de manera automática.

Menos soporte para el desarrollo con múltiples equipos (desarrollo paralelo)



ASP.NET MVC

Ventajas Desventajas

Ruteo URL y mejor soporte para los motores de búsqueda

Mayor esfuerzo en el aprendizaje del framework.

Excelente soporte para el desarrollo de tipo TDD (Desarrollo orientado al Test)

Mejora en la separación de conceptos ya que usa el Modelo, la Vista y el controlador

Fácil manejo en desarrollo con múltiples 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 Aplicación web

de ASP.NET MVC 4, como nombre de proyecto ponemos MVC01 y una ubicación

donde se guardará el proyecto, finalmente damos Aceptar



3. En la opción de seleccionar plantilla de MVC, elegimos la opción Básico y como motor

de vista: Razor y damos click en Aceptar.

1

2

3

4



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

5. Agregamos las siguientes propiedades a la clase Cliente.



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



7. Dentro del método 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 método Index del Controlador, hacemos

click derecho y sale la opción Agregar vista, para este caso, dejamos los valores por

defecto





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 través 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>



<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 configuración, adecuamos la clase Cliente tal como

se muestra:



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

tener en cuenta que el puerto puede variar según su máquina.

1.7. Resumen

El funcionamiento de la Web es posible gracias a una serie de componentes que interactúan entre sí, tales como el Web Browser, el protocolo Http, los servidores Web, las aplicaciones Web, el formato HTML, XML, Json, códigos scripts en Jquery, etc.

MVC es un patrón de software que nos permite un desarrollo de aplicaciones con una mayor flexibilidad y eficiencia, haciendo una correcta separación de conceptos, tales como el modelo, la vista y el controlador.

http://localhost:1171/Cliente



Microsoft implementa el patrón MVC en su tecnología de ASP.NET, para el desarrollo de aplicaciones Web.

La adopción 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.



2. MANTENIMIENTOS Y SEGURIDAD CON MVC 4.0

TEMARIO

Introducción a Entity Framework

La clase DbContext

Anotaciones y Validación

Simple MemberShip en MVC 4.0.

Laboratorio

AutoEvaluacion

Resumen 2.1 Introducción 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 lógica de negocio que deben implementar, y por otro lado deben trabajar con los motores de base de datos para almacenar y recuperar la información. La data puede usar múltiples orígenes de datos y cada uno de ellos puede trabajar con sus propios protocolos de comunicación. 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 código y el mantenimiento necesarios para las aplicaciones orientadas a datos. Las aplicaciones de Entity Framework ofrecen las siguientes ventajas:

Las aplicaciones pueden funcionar en términos de un modelo conceptual más centrado en la aplicación, que incluye tipos con herencia, miembros complejos y relaciones.

Las aplicaciones están libres de dependencias de codificación rígida de un motor de datos o de un esquema de almacenamiento.

Las asignaciones entre el modelo conceptual y el esquema específico de almacenamiento pueden cambiar sin tener que cambiar el código de la aplicación.

Los desarrolladores pueden trabajar con un modelo de objeto de aplicación coherente que se puede asignar a diversos esquemas de almacenamiento, posiblemente implementados en sistemas de administración 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 validación de la sintaxis en el momento de la compilación para consultas en un modelo conceptual.

La siguiente figura muestra las opciones disponibles en Entity Framework para poder trabajar:



I. Database First: en este modo de trabajo se puede generar el modelo de datos a partir de una base datos existente

II. 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)

III. Code First: en este modo de trabajo se puede generar la base de datos a partir de clases básicas 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 núcleo 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 través de DbContext se puede sobrescribir una serie de métodos para

modificar la convención implementada entre MVC y Entity Framework, por ejemplo la

pluralización de los nombres de clase y tablas, el manejo de las relaciones entre tablas,

tablas con más de una llave primaria, etc.

A continuación se muestra una clase que hereda de DbContext y que sobrescribe el

método OnModelCreating.

I

II

III



2.3 Anotaciones y Validación

Una de las mayores necesidades de programación 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 validación que cubre gran parte de las necesidades de validación. Con ASP.NET MVC la idea es asociar la validación de entidades con anotaciones de datos, o data annotations, realizando así una validación de forma automática. Lo interesante también es que podemos utilizar data annotations desde cualquier tipo de aplicación .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 validación. Resumidamente, la técnica 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 aplicarán a la entidad para determinar su validez. La siguiente porción de código muestra una entidad en la que se están 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 máximo 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.



ASP.NET Membership providers fue mostrado por primera vez con ASP.NET 2.0 en el año 2005. Su objetivo era facilitar los requerimientos de Membresía, autenticación, perfiles, accesos, roles, usuarios, etc. Su diseño 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 integración y automatización a la hora de crear las interfaces de usuario para los mecanismos de autenticación. Como muchas tecnologías de Microsoft, traen muchas ventajas y facilidades para el desarrollo de soluciones de software, pero también acarrean una serie de problemas u opciones poco útiles. Membership no fue la excepción 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 rediseño completo de su sistema de Membresía, dejando las mejores características 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 autenticación, membresía, accesos, roles, etc. La diferencia con su predecesora está en su modelo simplificado, fácil de entender y personalizar, además de su integración con MVC y proveedores externos de autenticación, tales como Facebook, Gmail, Microsoft, etc.



2.5 Laboratorio

Mantenimiento de varias clases con MVC 4.0 Introducción Esta guía consta de tres partes:

Generar el mantenimiento a varias clases y ver las opciones de sincronización que nos

da EF con la base de datos.

Validación del modelo con las DataAnnotations

Seguridad con el MemberShiProvider

Mantenimiento con MVC y Entity Framework 1. Iniciamos Visual Studio 2012 y creamos un nuevo proyecto


de ASP.NET MVC 4, como nombre de proyecto ponemos VentasMVC y una ubicación

donde se guardará el proyecto, finalmente damos Aceptar.



3. En la opción de seleccionar plantilla de MVC, elegimos la opción Aplicación de Internet,

como motor de vista Razor y damos click en Aceptar.

1

2

3

4



4. En la carpeta Models agregamos las clases Proveedor, Categoría 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, Categoría, Producto), tener en cuenta que esta

clase hereda de DbContext



using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using 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 deberían 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, además por convención 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



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, Categoría y Producto

Para el caso de la clase Proveedor, al nombre del controlador le damos

ProveedorController, en la opción plantilla elegimos Controlador MVC con acciones de

lectura, escritura y vistas que usa Entity Framework; en la opción clase modelo

elegimos Proveedor y por último en la opción de clase de contexto MyDataContext.

Finalmente hacemos click a Agregar



Repetir la operación para las clases Categoría y Producto, con sus nombres respectivos

9. Scaffolding es una de las características del framework de MVC que nos genera código

de manera automática, 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.



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 opción reescribimos el

método OnModelCreating de la clase MyDataContext.



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:



[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 opción de migración de Entity Framework a través

de la consola del Package Manager

16. Abrimos el Package Manager.



17. En el promt del Package Manager (PM>) escribimos Enable-Migrations -

ContextTypeName VentasMVC.Models.MyDataContext , luego de la ejecución verificar

que se haya creado la carpeta Migrations en el proyecto.



18. Con el comando anterior la clase MyDataContext está habilitada para poder actualizar

la base de datos. Hay dos modos de actualización: Manual y Automática, empecemos

viendo la opción 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.



20. Si no quisiéramos escribir los comandos de actualización por cada cambio que se hace

al modelo, entonces activamos la actualización automática, 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 sección 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 Dirección y al ejecutar automáticamente se debe actualizar la BD.

22. Llegado a este punto generar el scaffolding para la clase Empleado

Validación del modelo con DataAnnotations 1. En nuestras 4 clases (Proveedor, Categoría, Productos y Empleados) no hay un

mecanismo de validación en la interfaz de usuario. A través de las DataAnnotations

vamos a validar varias opciones(Required, Range, RegularExpression, StringLength etc)



Regex: ^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$

2. En el caso que se presente un problema con la actualización de la BD por posible

pérdida de datos, agregar al constructor de la clase Configuration la entrada.

AutomaticMigrationDataLossAllowed = true;

3. Finalmente ejecutamos (F5)



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 quisiéramos restringir el acceso a estas opciones

permitiéndole solo a un grupo determinado de usuarios una alternativa de solución,

sería 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" />



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 autenticación en donde

podemos registrarnos.

Hacemos click a la opción Categoría.



Nos registramos haciendo click en Regístrese



Una vez registrados volvemos a ingresar a la opción 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.



2.6 Resumen

Entity Framework es la tecnología que proporciona Microsoft para el acceso a datos.

EF nos ofrece múltiples formas de trabajo: podemos partir de la base de datos, del modelo de dominio o incluso de clases simples conocidas como POCO.

El corazón 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 validación 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, autenticación, acceso, roles, perfiles, etc. SimplemMembership presenta un modelo simplificado y con integración a proveedores externos de autenticación



3. OAUTH PROVIDERS CON MVC 4.0

TEMARIO

El protocolo OAuth

Proveedores externos para autenticación en MVC 4

Revisión de la API de Facebook

Laboratorio

Resumen

3.1 El protocolo OAuth OAuth es un protocolo de autorización estándar, abierto que permite que un tercero acceda a los datos de un usuario sin necesidad de conocer su contraseña. Los usuarios no tienen que compartir sus contraseñas directamente en una aplicación, 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 información en el sitio A (proveedor de servicio) con el sitio B (llamado consumidor) sin compartir toda su identidad. Muchas empresas tecnologicas hoy en día han adoptado este estándar, sobre todo los sitios de redes sociales tales como Twitter, Facebook, Google+, Linkedin, etc.

3.2 Proveedores externos para autenticación en MVC 4 Una de las nuevas características de ASP.NET MVC 4 es la capacidad de poder interactuar con diversos proveedores de autenticación y autorización que usan el estándar de OAuth, de tal manera que podamos construir nuestras aplicaciones Web haciendo uso de estos proveedores. En la versión 4 de MVC viene una implementación 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 sesión con sus cuentas de otros sitios como, por ejemplo, Microsoft, Facebook y Twitter, // es necesario actualizar este sitio. Para obtener más información, visite http://go.microsoft.com/fwlink/?LinkID=252166 //OAuthWebSecurity.RegisterMicrosoftClient( // clientId: "", // clientSecret: ""); //OAuthWebSecurity.RegisterTwitterClient( // consumerKey: "", // consumerSecret: ""); OAuthWebSecurity.RegisterFacebookClient( appId: "103897616468989", appSecret: "c1425832817f4707d4d84634b1a69e25");



//OAuthWebSecurity.RegisterGoogleClient(); } }

3.3 Revisión de la API de Facebook Con el objetivo de facilitar la integración de las aplicaciones MVC de Microsoft con los servicios de Facebook, la comunidad de desarrolladores ha puesto a disposición 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 métodos y eventos, tal como se muestra:

DateTimeConvertor

FacebookApiEventArgs

FacebookApiException

FacebookApiLimitException

FacebookBatchParameter

FacebookClient

FacebookMediaObject

FacebookMediaStream

FacebookOAuthException

FacebookOAuthResult

FacebookUploadProgressChangedEventArgs

HttpMethod

HttpWebRequestWrapper

HttpWebResponseWrapper

JsonArray

JsonObject

WebExceptionWrapper




Una explicación detallada de cada elemento del SDK y ejemplos de código se pueden encontrar en http://facebooksdk.net/docs/reference/SDK/

3.4 Laboratorio

Integración de MVC 4.0 con Facebook Introducción Esta guía consta de:

Proceso de autenticación con Facebook

Extensión del MembershipProvider para guardar datos adicionales

Uso del SDK

Autenticación con Facebook 1. Iniciamos Visual Studio 2012 y creamos un nuevo proyecto


de ASP.NET MVC 4, como nombre de proyecto ponemos MVCFB y una ubicación


http://facebooksdk.net/docs/reference/SDK/





1

2

3

4



4. Para poder permitir la autenticación con Facebook, debemos registrar nuestra

aplicación 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 Aplicación

http://developers.facebook.com/



6. Se deberá agregar un nombre para la aplicación 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

aplicación.



Nota: Copiar los ID y cerrar sesión

9. Regresamos a Visual Studio 2012 y abrimos el archivo AuthConfig.cs ubicado en la

carpeta App_Start.

10. Quitamos los comentarios a la sección OAuthWebSecurity.RegisterFacebookClient y

añadimos los IDs generados por Facebook para nuestra aplicación.



11. Debido a que hemos elegido la plantilla Aplicación de Internet, hay varias páginas que

se han creado por defecto, para probar la autenticación por Facebook podemos

restringir el acceso a la opción de menú Contacto.

12. Para restringir el acceso abrimos el archivo HomeController.cs ubicado en la carpeta

Controllers y ubicamos el método Contact y lo decoramos con el atributo [Authorize]



13. Antes de ejecutar, Facebook, después de la validación de autenticación nos va a

brindar información adicional (con el consentimiento del usuario) tal como ID,

Nombres, token, etc. Esta información la vamos a guardar en la base de datos

MembershipProvider que viene con Visual Studio 2012. Podemos cambiar la ubicación

del servidor y nombre de la base de datos de membresía, para ello en el Web.config,

en la sección 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 opción Contacto.





15. Adicionalmente podemos ver que en el servidor SQL se creó la base de datos

SeguridadMVC y se registró el usuario autenticado.



Extensión del MembershipProvider para guardar datos adicionales

1. Facebook, después del proceso de autenticación, 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

información 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 información enviada por

Facebook, vemos el link



Según la imagen, el controlador solicitado Account y el método es

ExternalLoginCallBack

4. Revisando el método ExternalLoginCallBack (para el caso de nuevos usuarios) vemos

que trabaja con la vista ExternalLoginConfirmation y le envía 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:



6. Una vez agregada estas dos propiedades, regresamos a método ExternalLoginCallBack

de la clase AccoutController para recuperar la información que envía Facebook, tal

como se muestra:

7. Ahora modificamos la vista para mostrar la información adicional, abrimos el archivo

ExternalLoginConfirmation.cshtml de la carpeta Views/Account y agregamos el Html-

Razor para que se muestre los datos.



8. Ahora ejecutamos y al autenticarnos vemos que está la información 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

desincronización 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 migración en el proyecto (Enable-Migrations)

9. Finalmente, para guardar esa información en la base de datos, ubicamos el método

ExternalLoginConfirmation y modificamos el código, tal como se muestra:

10. Ejecutamos y cuando damos grabar debería registrase la información en la base de

datos.





Uso del SDK para Facebook 1. Facebook puso a disposición de los desarrolladores un SDK en C# para poder tener una

serie de métodos que encapsulan los detalles internos de la API de Facebook, para

instalar el SDK lo podemos hacer a través de Nuget, para ello hacemos click en el menú

Herramientas-Administrador de paquetes de biblioteca-Administrar paquetes Nuget

para la solución

Buscamos Facebook y le damos Instalar



Para más información se recomienda la página http://facebooksdk.net/

2. Ahora con el accestoken recuperamos el campo de si el usuario ha sido verificado o no,

para ello vamos al método y agregamos el código que verifica si se tiene disponible el

accesstoken y si está disponible lo guardamos en una variable de sesión.




3. Ahora, a través 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.



3.5 Resumen

El protocolo OAuth (Open Authorization) es un estándar de internet que permite compartir información de una entidad sin necesidad de brindar información de credenciales por parte de la entidad. Este protocolo, hoy en día, es utilizado para la mayoría de redes sociales tales como Facebook, Twitter, etc.

ASP.NET MVC 4 trae un modelo de programación bastante rápido y sencillo de usar para la utilización de los proveedores de autenticación basados en OAuth. Los proyectos de MVC tienen incorporada una clase llamada AuthConfig donde están los parámetros de configuración para rápidamente 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 integración de nuestras aplicaciones con esta red social.



Logros de la unidad de aprendizaje

Al término de la unidad, los alumnos, utilizando las técnicas explicadas en clase, podrán desarrollar aplicaciones empresariales orientadas al e-commerce, considerando la exploración de catálogos en línea, manejo de un carrito de compras y el proceso final de Checkout.

4. INTERACCIÓN CON EL MODELO

TEMARIO

Expresiones Lambda con Entity Framework

Laboratorio

Resumen 4.1 Expresiones Lambda con Entity Framework

Una expresión lambda es una función anónima que puede contener expresiones e instrucciones y se puede utilizar para crear delegados o tipos de árboles de expresión. Los pasos para crear una expresión Lambda son los siguientes:

Para definir una expresión lambda se usa el llamado operador lambda (=>)

A la izquierda de este operador se indicarán las variables o parámetros de la función anónima.

A la derecha del operador indicaremos el código de la función (la expresión o bloque de instrucciones).

Las expresiones lambda son bastante usadas en consultas de LINQ basadas en métodos como argumentos de los métodos de operador de consulta estándar, tales como Where. Al escribir expresiones lambda, no tiene por qué especificar un tipo para los parámetros de entrada, ya que el compilador puede deducir el tipo según el cuerpo de la lambda, el tipo de delegado subyacente y otros factores que se describen en la especificación del lenguaje C#. Para la mayoría de los operadores de consulta estándar, 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 métodos y propiedades Ejem: IEnumerable<Customer> customers; customers.Where(c => c.City == "London"); //La variable de entrada c es de tipo customer También puede proporcionar una expresión lambda cuando el tipo de argumento es Expression<Func>, por ejemplo, en los operadores de consulta estándar que se definen en

UNIDAD DE

APRENDIZAJE

2



System.Linq.Queryable. Al especificar un argumento Expression<Func>, la expresión lambda se compilará en un árbol de expresión. A continuación, se muestra un operador de consulta estándar, el método 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 parámetro de entrada, o también se puede especificar explícitamente. Esta expresión lambda particular cuenta aquellos enteros (n) que divididos por dos dan como resto 1. A continuación, se muestra una pequeña lista de operadores de consulta estándar que se definen en System.Linq.Queryable

Operador Descripción Ejemplo

SingleOrDefault Devuelve solo un elemento que satisfice la condición o un valor por default, este método emitirá una exception si existe más de un element que satisface la condición

MyDataContext MyDB=new MyDataContext(); var item = MyDB.listaCart.SingleOrDefault(c => c.Identificador == ShoppingCartId && c.AlbumId == album.AlbumId);

Single Devuelve solo un elemento que satisface la condición , este método emitirá una exception si existe más de un element que satisfice la condición o si ningún elemento satisface la condición

MyDataContext MyDB = new MyDataContext(); var item = MyDB.listaAlbum.Single(a => a.AlbumId == id);

Skip Omite un numero especifico de elementos y devuelve los elementos restantes

int[] grades = { 59, 82, 70, 56, 92, 98, 85 };

IEnumerable<int> lowerGrades =

grades.AsQueryable().OrderByDescending(g =>

g).Skip(3);

/* Resultado

82 70 59 56*/

Take Devuelve un especifico número de elementos contiguos desde un punto de inicio, en una colección o secuencia, es análogo al operador TOP de SQL

int[] grades = { 59, 82, 70, 56, 92, 98, 85 };

IEnumerable<int> topThreeGrades =

grades.AsQueryable().OrderByDescending(grade

=> grade).Take(3);

/*Resultado

98 92 85

*/

Any Devuelve un valor bool indicando si algún elemento de una determinada

Pet[] pets =

{ new Pet { Name="Barley", Age=8,

Vaccinated=true },

new Pet { Name="Boots", Age=4,



colección, satisface la condición

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 capítulo de Expresiones Lambda, para el desarrollo de este laboratorio por favor refiérase al laboratorio del capítulo VI “VISTAS”

4.3 Resumen

Una expresión lambda es una función anónima que se puede utilizar para crear delegados o tipos de árbol de expresión.

Las expresiones Lambda nos facilita enormemente la manipulación de colecciones, haciendo operaciones en una sola expresión y que antes de ello se hubiera tenido que recurrir a la creación de procedimiento especializados.

Las expresiones Lambda son muy utilizadas también con los operadores estándares definidos en LINQ, tales como Count, Skip, Take, Single, etc. esto nos ayuda más aun con el tratamiento de colecciones de objetos.

http://msdn.microsoft.com/en-us/library/system.linq.queryable_methods.aspx



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 programación simple para escribir código en páginas web donde el código basado en el servidor se incrusta en el formato HTML de las páginas web. El código de Razor se ejecuta en el servidor antes de que la página se envíe al explorador. Este código de servidor puede crear dinámicamente el contenido de cliente, es decir, puede generar formato HTML u otro contenido sobre la marcha y, a continuación, enviarlo al explorador junto con cualquier código HTML estático que contenga la página. Algunos objetivos de diseño al momento de implementar Razor fueron:

Fácil de aprender, Razor no es un nuevo lenguaje, es una combinación de código .NET con HTML.

Posibilidad de trabajar con un editor de texto. No es necesario tener Visual Studio para poder implementar código Razor, aunque su utilización con VS acelera la escritura de código 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 también con paginas csthml (MVC)



Como se mencionó anteriormente, Razor no es un nuevo lenguaje de programación, el equipo de Microsoft buscó fusionar el conocimiento de la programación en VB.NET o C#, con el estándar HTML,

Combinar Razor con los Html Helpers nos ayuda a crear de manera rápida y sencilla el código 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"},

new SelectListItem {Value = "2", Text = "Red"},

new SelectListItem {Value = "3", Text = "Green", Selected = true},

new SelectListItem {Value = "4", Text = "Yellow", Selected = true},

new SelectListItem {Value = "5", Text = "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.



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 también 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 rápida 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 <input type="checkbox" />

Html.ActionLink <a href=”” />

Html.DropDownList <select></select>

Html.Hidden <input type="hidden" />

Html.Label <label for="" />

Html.ListBox <select></select> or <select multiple></select>

Html.Password <input type="password" />

Html.Radio <input type="radio" />

Html.TextArea <textarea></textarea>

Html.TextBox <input type="text" />

A continuación, mostramos una comparativa de código 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=""



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>

/><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 capítulo del Lenguaje Razor, para el desarrollo de este laboratorio por favor refiérase al laboratorio del capítulo VI “VISTAS”

5.4 Resumen

Razor es el nuevo motor de renderizado incluido en ASP.NET que trabaja tanto con WebForm así como también MVC.

Tener en cuenta que los motores de renderizado son los responsables de generar el código HTML en el servidor Web, para luego enviarlo al cliente web solicitante.

Razor no es nuevo lenguaje de programación, uno de los principales objetivos de diseño fue la de combinar el conocimiento de programación (C#, VB) con el conocimiento de HTML.

La combinación de Razor con los HTML Helpers nos ayudan a construir páginas web dinámicas, de una manera más sencilla y rápida.



6. VISTAS

TEMARIO

Las vistas en MVC

Vistas Parciales

El patrón ViewModel

Laboratorio

Resumen

6.1 Las vistas en MVC Llegado a este punto, tenemos claro que el patrón MVC se divide en tres componentes principales que son el modelo, la vista y el controlador, y en esta sección vamos a dar una revisión a las vistas, la intención 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 convención de MVC sugiere que la vista se llame igual que una acción en el controlador, es decir, si tenemos un controlador llamado HomeController, el cual tiene un método 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 página 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 están pensadas exclusivamente para encapsular la lógica de presentación. No deben contener lógica de aplicación ni código de recuperación de base de datos (aun sabiendo que técnicamente es posible). El controlador debe administrar toda la lógica de aplicación. Una vista representa la interfaz de usuario adecuada usando los datos que recibe del controlador. Estos datos se pasan a una vista desde un método de acción de controlador usando el método View.

Igual que las páginas ASP.NET en aplicaciones basadas en formularios Web Forms, las vistas de página de ASP.NET (archivos .aspx) pueden usar páginas maestras para definir un diseño y una estructura coherentes. En un sitio típico, la página maestra se enlaza a una página de contenido en la directiva @ Page de la página de contenido. También en MVC se definen páginas 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 continuación se muestra una pantalla donde se ve la manera de crear una vista parcial



6.3 El patrón 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 colección de dicha clase). En algunos escenarios las clases que existen en el modelo son exactamente lo que nuestra vista necesitaba, pero también 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 colección de los Items y adicionalmente un valor donde se muestre un valor sumarizado de dichos Items, en este escenario la clase Items, por diseño, no tiene una propiedad que muestre un valor sumarizado de una colección de dichos Items; en este caso es donde se recurre al patrón ViewModel. El patrón View Model nos ayuda a poder construir una clase que de soporte a las necesidades de información de la vista. Por sugerencia, en visual studio, la nominación de las clases de tipo ViewModel, terminan con la palabra ViewModel,tal como se muestra:



6.4 Laboratorio

Carrito de compras con MVC 4.0 Introducción Esta guía consta de:

Creación del carrito de compras

Creación del carrito de compras

1. Iniciamos Visual Studio 2012 y creamos un nuevo proyecto


de ASP.NET MVC 4, como nombre de proyecto ponemos CarritoMVC y una ubicación

donde se guardará el proyecto, finalmente damos Aceptar.





1

2

3

4



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 conexión.



6. Actualizamos el diseño de la web, con los recursos que vienen incluidos en la guía, a la

sección Content del proyecto, tal como se muestra:



Actualizamos el _Layout.cshtml de la carpeta Views/Shared

Y el Index.cshtml de la carpeta Views/Home.



Finalmente ejecutamos y deberíamos 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 géneros, ver los Álbumes y su

detalle.



8. En el método Index de la clase TiendaController obtenemos los géneros a partir del

modelo y se lo enviamos a la vista.

public class TiendaController : Controller { // // GET: /Tienda/ //listar los generos public ActionResult Index() { MyDataContext MyDB = new MyDataContext(); return View(MyDB.listaGenero.ToList()); }

}

9. Al método Index, agregamos su vista, hacemos click derecho sobre el método Index y

elegimos la opción Agregar Vista, tal como se muestra:



10. En la vista creada agregamos el siguiente código Razor.



11. Ejecutamos y cuando se cree nuestra BD, agregamos ciertos datos a la tabla Género.

12. Actualizamos la vista Index para que la lista de Géneros sean un hiperlink hacia los

álbumes asociados al género.



13. Agregamos el método ListaAlbum, en la clase TiendaController

14. Ahora agregamos la vista para el método ListaAlbum

15. Agregamos el código Razor para mostrar los álbumes del género elegido y creamos el

método Detalle de la clase TiendaController.



|

16. Generamos la vista para el controlador Detalle.

Nota: El ActionLink invoca a un método. Agregar de un controlador ShoppingCart que

será creado más adelante

17. Previamente agregamos unos álbumes y artista a nuestra base de datos y ejecutamos.



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 código

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)



{ MyDataContext MyDB=new MyDataContext(); 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) { MyDataContext MyDB=new MyDataContext(); 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() { MyDataContext MyDB = new MyDataContext(); var items = MyDB.listaCart.Where(c => c.Identificador == ShoppingCartId); foreach (var c in items) { MyDB.listaCart.Remove(c); } MyDB.SaveChanges(); } public List<Cart> ObtenerItems() { MyDataContext MyDB=new MyDataContext(); var items= MyDB.listaCart.Where(c=>c.Identificador==ShoppingCartId); return items.ToList(); } public decimal ObtenerTotal() { MyDataContext MyDB = new MyDataContext();



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() { MyDataContext MyDB = new MyDataContext(); int ? cantidadTotal = (from c in MyDB.listaCart where c.Identificador == ShoppingCartId select (int ?)c.Cantidad).Sum(); return cantidadTotal ?? 0; } public int CrearOrden(Orden orden) { MyDataContext MyDB = new MyDataContext(); 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) { MyDataContext MyDB = new MyDataContext(); 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



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; } }



}

21. Ahora agregamos nuestro controlador para el Shoppingcart.

22. Agregamos la lógica de programación para el ShoppingCartController.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using CarritoMVC.Models; using CarritoMVC.ViewModels; namespace CarritoMVC.Controllers { public class ShoppingCartController : Controller {



// // GET: /ShoppingCart/ public ActionResult Index() { ShoppingCart carrito = ShoppingCart.ObtenerCart(this.HttpContext); var viewModel = new ShoppingCartViewModel { Items = carrito.ObtenerItems(), Total = carrito.ObtenerTotal() }; return View(viewModel); } public ActionResult Agregar(int id) { MyDataContext MyDB = new MyDataContext(); 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) { MyDataContext MyDB = new MyDataContext(); string nombreAlbum = MyDB.listaCart.Single(c => c.CartId == id).album.Nombre; var carrito = ShoppingCart.ObtenerCart(HttpContext); 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() { var carrito = ShoppingCart.ObtenerCart(HttpContext); ViewData["Resumen"] = carrito.ObtenerCantidad(); return PartialView("Resumen"); } } }

23. Agregamos la vista para el método Index de la clase ShoppingCartController



24. Agregamos el código para la vista, para quitar ítems del carrito usaremos Jquery con

Ajax.

@model CarritoMVC.ViewModels.ShoppingCartViewModel @{ ViewBag.Title = "Index"; } <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},



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="[email protected]"> <td> @Html.ActionLink(item.album.Nombre,"Detalle","Tienda",new {id=item.AlbumId}) </td> <td> @item.album.Precio </td> <td id="[email protected]"> @item.Cantidad </td> <td> <a href="#" data-id="@item.ID" class="RemoveLink">Borrar</a> </td> </tr> } <tr> <td>Total</td> <td></td> <td></td>



<td id=”cart-total”>@Model.Total</td> </tr> </table>

25. Ejecutamos y hacemos la prueba de una compra.

26. Antes de hacer la lógica para el Checkout, verificamos que el usuario esté autenticado.

Debemos actualizar el identificador del carrito, para ello, en la clase AccountController

creamos el método ActualizarIdentificador y luego lo llamamos de los métodos Login y

Register, tal como se muestra:



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 vacío (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.



28. En el CheckOutController agregamos la lógica para registrar, pagar (con el código de la

promoción) y mostrar el proceso completado.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using CarritoMVC.Models; namespace CarritoMVC.Controllers { [Authorize] public class CheckOutController : Controller { // // GET: /CheckOut/ const string codigoPromocion = "FREE"; public ActionResult RegistroyPago() { return View();



} [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 { MyDataContext MyDB = new MyDataContext(); 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) { MyDataContext MyDB = new MyDataContext(); 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 método RegistroyPago con la opción de Scaffold

editar, tal como se muestra:



30. Cambie el código 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.



32. Agregamos la vista para el método Completado de la clase CheckOutController, tener

en cuenta que la vista tipada será el tipo de datos int.

33. Cambiamos el código 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 diseño agregaremos vistas parciales.

Para ello en el método Resumen de la clase ShoppingCartController agregamos una

vista parcial tal como se muestra:



@Html.ActionLink("Compra ("+ ViewData["Resumen"] +")","Index","ShoppingCart",new

{id="cart-status"})

35. Ahora creamos un menú de géneros con vistas parciales, para ello en la clase

TiendaController creamos el método MenuGeneros tal como se muestra:

36. A este método le agregamos su vista tal como se muestra:



@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 aplicación ASP.NET MVC</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <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"); }



<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 página 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 página Index.cshtml de la carpeta Views/Home, tal como

se muestra:

@{ ViewBag.Title = "Home Page"; } <div id="promotion"></div>

40. Ejecutamos



6.5 Resumen

Las vistas son las responsables de procesar la interfaz de usuario, con ayuda de Razor

generarán 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 diseño del site.

Las vistas parciales son objetos de vista que pueden incluirse dentro de otras vistas. En

comparación con Web Form, las vistas parciales serian homólogas de los controles ascx.

El patrón ViewModel tiene como objetivo dar soporte a las necesidades de información de

las vistas cuando las clases del modelo no satisfacen el requerimiento de información para

la página.



Logros de la unidad de aprendizaje

Al término de la unidad, los alumnos, utilizando las técnicas explicadas en clase implementarán desarrollos de aplicaciones Web, considerando las mejores practicas de arquitectura de Software, uso de patrones, etc. Adicionalmente mejorarán la experiencia de usuario, agregando un mayor dinamismo e interacción de la página a través de lenguajes de script (Jquery) y tecnologías de solicitud asíncronas (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 año pasado Microsoft lanzó ASP.NET MVC versión 3, adicionalmente un nuevo producto llamado WebMatrix. WebMatrix incluye un número de Helpers que nos ayudan a simplificar tareas como representación de gráficos 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, paginación, clasificación y actualizaciones asíncronas a través de AJAX. WebGrid que nació con WebMatrix está disponible para los proyectos de MVC

7.2 Miembros del WebGrid. A continuación se muestra un cuadro explicativo de las principales propiedades y métodos del control WebGrid. Principales parámetros del constructor

Nombre Tipo Comentario

Source IEnumerable<dynamic> Es el origen de datos que se enlazará al control

columnNames IEnumerable<string> Filtra las columnas que se mostrarán en el control.

defaultSort String Especifica la columna por defecto por la que se ordenará la data

mostrada en el control.

rowsPerPage Int Específica a cantidad de registros que se mostrará para la

paginación (por defecto el valor es 10).

UNIDAD DE

APRENDIZAJE

3



canPage Bool Activa o desactiva la opción de paginación de la data.

canSort Bool Activa o desactiva la opción de ordenar por columna

ajaxUpdateContainerId String Configurando el ID del elemento contenido en el WebGrid,

permitirá el soporte para AJAX.

Principales parámetros del método 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

página 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 título a la tabla

displayHeader Bool Indica si se mostrará un título 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 serán excluidas del

control

firstText String Texto a mostrar en el link de primera página, para el caso

en que esté habilitada la paginación.

previousText String Texto a mostrar en el link de previa página, para el caso


nextText String Texto a mostrar en el link de siguiente página, para el

caso en que esté habilitada la paginación.

lastText String Texto a mostrar en el link de última página, para el caso


7.3 Laboratorio

Uso del Control WebGrid con MVC 4.0 Introducción Esta guía consta de:

Uso del control WebGrid.

Personalización del WebGrid, Columnas, formatos y estilos.

Filtros y búsquedas

Prerrequisitos Visual Studio 2012

SQL Server 2012

Base de datos Northwind en el servidor SQL



Uso del control WebGrid 1. Iniciamos Visual Studio 2012 y creamos un nuevo proyecto


de ASP.NET MVC 4, como nombre de proyecto ponemos LabWebGrid y una ubicación

donde se guardará el proyecto. Finalmente damos Aceptar.



1

2

3

4



4. En esta guía 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 derecho-

Agregar Nuevo elemento; y en el cuadro de dialogo, en la sección Datos, elegimos

ADO.NET Entity Data Model y le damos como nombre Modelo.edmx; finalmente, click

en Agregar, tal como se muestra:



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 vacío. Para este escenario elegimos la opción

Generar desde la base de datos y hacemos click en siguiente.

1 2

3

4



6. La siguiente pantalla nos pide configurar la conexión a la base de datos. Hacemos click

en Nueva conexión y en el siguiente cuadro de diálogo llenamos los datos que se

muestran en la figura, para conectarnos a Northwind.



7. Después de configurar la conexión 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

1

2

3



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:



9. En el método Index de la clase ProductoController instanciamos nuestro modelo y

devolvemos una vista con la lista de productos, tal como se muestra:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using LabWebGrid.Models; namespace LabWebGrid.Controllers { public class ProductoController : Controller { // // GET: /Producto/ public ActionResult Index() { NorthwindEntities MyDB = new NorthwindEntities();



return View(MyDB.Products.ToList()); } } }

10. Ahora creamos la Vista para el método Index. Para ello sobre el método Index

hacemos click derecho Agregar Vista y creamos una vista fuertemente tipada, tal como

se muestra:



11. Luego, modificamos la vista para que el modelo se una colección (IEnumerable) e

instanciamos el objeto WebGrid para poder mostrar un listado de productos, tal como

se muestra:

@model IEnumerable<LabWebGrid.Models.Product> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); } <h2>Lista de Productos</h2> @wg.GetHtml()

12. Finalmente ejecutamos y navegamos a la vista Producto (F5).

1

2

3



Personalización del WebGrid, Columnas, formatos y estilos.

1. En la sección anterior hemos visto cómo usar el control WebGrid, ahora vamos a

personalizar la apariencia.

Empezamos definiendo las columnas que quiero mostrar. En la configuración 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 colección Columns

limitamos las columnas a mostrar, luego de ello ejecutamos el proyecto (F5)

@model IEnumerable<LabWebGrid.Models.Product> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); } <h2>Lista de Productos</h2> @wg.GetHtml( columns: new []{ wg.Column("ProductId"), wg.Column("ProductName"), wg.Column("UnitPrice"), wg.Column("Discontinued") } )



2. Vemos que podemos controlar las columnas que deseamos mostrar, adicionalmente

también podemos modificar el encabezado de cada columna. Por defecto el

encabezado muestra el nombre de la propiedad del clase (Product), para ello usamos

el parámetro Header, tal como se muestra:

@model IEnumerable<LabWebGrid.Models.Product> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); } <h2>Lista de Productos</h2> @wg.GetHtml( columns: new []{ wg.Column("ProductId",header:"ID"), wg.Column("ProductName",header:"Producto"), wg.Column("UnitPrice",header:"Precio"), wg.Column("Discontinued",header:"Devaluado") } )



3. También podemos dar formato a cada campo de la lista con el parámetro 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:

@model IEnumerable<LabWebGrid.Models.Product> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); } <h2>Lista de Productos</h2> @wg.GetHtml( columns: new []{ wg.Column("ProductId",header:"ID"), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLink((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToString("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBox((string)item.ProductName,(bool)item.Discontinued)) } )



4. Otro detalle: podemos agregar columnas personalizadas, es decir columnas que no

pertenecen al modelo. Vamos a agregar dos columnas, Editar y Eliminar.

@model IEnumerable<LabWebGrid.Models.Product> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); } <h2>Lista de Productos</h2> @wg.GetHtml( columns: new []{ wg.Column("ProductId",header:"ID"), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLink((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToString("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBox((string)item.ProductName,(bool)item.Discontinued)), wg.Column("",header:"Acciones",format:@<text> @Html.ActionLink("Editar","","") @Html.ActionLink("Eliminar","","") </text>) }

)



5. WebGrid, por defecto, implementa la paginación y permite la ordenación por todas las

columnas. Esta configuración puede ser modificada, en este caso vamos hacer que no

se permita la ordenación por el campo ProductID y por el campo Discontinued,

utilizando el atributo CantSort.

@model IEnumerable<LabWebGrid.Models.Product> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); } <h2>Lista de Productos</h2> @wg.GetHtml( columns: new []{ wg.Column("ProductId",header:"ID",canSort:false), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLink((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToString("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBox((string)item.ProductName,(bool)item.Discontinued),canSort:false), wg.Column("",header:"Acciones",format:@<text> @Html.ActionLink("Editar","","") @Html.ActionLink("Eliminar","","") </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 página a 10



registros por página, vamos a cambiar esta configuración a 5 registros y finalmente le

damos un formato a las filas del Grid. Esto lo realizaremos con los atributos

rowsPerPage y alternatingRowStyle.

@model IEnumerable<LabWebGrid.Models.Product> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model,rowsPerPage:5); } <h2>Lista de Productos</h2> @wg.GetHtml( alternatingRowStyle:"FilaAlterna", columns: new []{ wg.Column("ProductId",header:"ID",canSort:false), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLink((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToString("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBox((string)item.ProductName,(bool)item.Discontinued),canSort:false), wg.Column("",header:"Acciones",format:@<text> @Html.ActionLink("Editar","","") @Html.ActionLink("Eliminar","","") </text>) } )

Filtros y búsquedas



1. Terminamos esta guía implementando una búsqueda por Nombre de producto. Para

ello, en el archivo Index.cshtml de la carpeta Views/Producto agregamos el html (las

sección FieldSet) para mostrar un cuadro de texto y el botón buscar.

@model IEnumerable<LabWebGrid.Models.Product> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model,rowsPerPage:5); } <h2>Lista de Productos</h2> @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 []{ wg.Column("ProductId",header:"ID",canSort:false), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLink((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToString("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBox((string)item.ProductName,(bool)item.Discontinued),canSort:false), wg.Column("",header:"Acciones",format:@<text> @Html.ActionLink("Editar","","") @Html.ActionLink("Eliminar","","") </text>) } )

2. Finalmente, modificamos el método Index de la clase ProductoController, agregando el

parámetro de búsqueda producto.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using LabWebGrid.Models; namespace LabWebGrid.Controllers { public class ProductoController : Controller { // // GET: /Producto/



public ActionResult Index(string producto=null) { NorthwindEntities MyDB = new NorthwindEntities(); 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 fácil de poder representar información tabular en la página cliente se puede dar al utilizar el control WebGrid.

El control WebGrid está disponible desde la versión 3 de MVC y además permite personalizar completamente la presentación de la información, formateando la data, especificando las columnas, cambiando textos de cabecera, integrándose con los CSSs, etc.

El control WebGrid también nos ayuda a generar de manera automática las opciones de paginación y ordenación de las filas a mostrar.



8. EL PATRON INVERSION OF CONTROL (IOC)

TEMARIO

El patrón IoC

Implementaciones del IoC: Dependency Injection (DI)

Laboratorio

Resumen

8.1 El patrón IoC La Inversión de Control es un patrón de diseño que fue pensado para permitir un menor acoplamiento entre componentes de una aplicación y fomentar así el reuso de los mismos Un problema, una solución Como todo patrón, 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 diseño.

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 código fuente de la clase A.

Las implementaciones concretas de las dependencias tienen que estar disponibles en tiempo de compilación.

Las clases son difíciles 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 código repetido para crear, localizar y gestionar sus dependencias. Aquí la solución pasa por delegar la función de seleccionar una implementación concreta de las dependencias a un componente externo. El control de cómo 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 patrón IoC. El patrón IOC aplica un principio de diseño denominado principio de Hollywood (No nos llames, nosotros te llamaremos). Actualmente, existen dos técnicas de implementación para el IoC: Inyección de dependencias y Service Locutor. En este manual nos enfocaremos en la implementación de la Inyección de Dependencia (DI)



8.2 Implementaciones del IoC: Dependency Injection (DI) Una dependencia entre un componente y otro, puede establecerse estáticamente o en tiempo de compilación, o bien, dinámicamente o en tiempo de ejecución. Es en éste último escenario donde cabe el concepto de inyección, y para que esto sea posible, debemos referenciar interfaces y no implementaciones directas. En general, las dependencias son expresadas en términos de interfaces en lugar de clases concretas. Esto permite un rápido reemplazo de las implementaciones dependientes sin modificar el código fuente de la clase. Lo que propone entonces la Inyección de dependencias es no instanciar las dependencias explícitamente en su clase, sino que declarativamente expresarlas en la definición de la clase. La esencia de la inyección de las dependencias es contar con un componente capaz de obtener instancias validas de las dependencias del objeto y pasárselas durante la creación o inicialización del objeto

Una manera de inyectar las dependencias es utilizando un constructor con parámetros del objeto dependiente. Éste constructor recibe las dependencias como parámetros y las establece en los atributos del objeto. Considerando un diseño 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 lógica de negocio implementan la interface IBusinessLogic. En la inyección basada en un constructor, se creará una instancia de BusinessFacade usando un constructor parametrizado al cual se le pasará una referencia de un IBusinessLogic para poder inyectar la dependencia. Finalmente, la inyección de dependencias no debería usarse siempre que una clase dependa de otra, más bien es efectivo en situaciones específicas como las siguientes:

Inyectar datos de configuración en un componente.

Inyectar la misma dependencia en varios componentes.

Inyectar diferentes implementaciones de la misma dependencia.

Inyectar la misma implementación 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 implementación de una dependencia o la misma configuración, o al menos, no reportará grandes beneficios en estos casos.

8.3 Laboratorio



Aplicación de la inyección de dependencia (DI) con MVC 4

Introducción Esta guía consta de:

Construcción de un proyecto MVC fuertemente acoplado.

Aplicación de la inyección de dependencia, para el desacoplamiento.

PreRequisitos Visual Studio 2012

SQL Server 2012

Base de datos Northwind en el servidor SQL

Construcción de un proyecto MVC fuertemente acoplado.



de ASP.NET MVC 4, como nombre de proyecto ponemos DI y una ubicación donde se

guardará el proyecto, finalmente damos Aceptar





1

2

3

4



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 sección Datos, elegimos ADO.NET Entity Data Model y le damos como

nombre Modelo.edmx. Finalmente, damos click en Agregar, tal como se muestra:



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 vacío, para este escenario elegimos la opción

Generar desde la base de datos y hacemos click en siguiente.

6. La siguiente pantalla nos pide configurar la conexión a la base de datos. Hacemos click

en Nueva conexión y en el siguiente cuadro de diálogo llenamos los datos que se

muestra en la figura para conectarnos a Northwind.

1 2

3 4



1

2

3



7. Después de configurar la conexión 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.





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:



9. En esta sección debemos darnos cuentas de la alta dependencia que se forma al

momento de instanciar el modelo dentro del método 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/ public ActionResult Index() { NorthwindEntities MyDB = new NorthwindEntities(); return View(MyDB.Customers); } } }

10. Ahora creamos la Vista para el método Index. Para ello, sobre el método Index

hacemos click derecho Agregar Vista y creamos una vista fuertemente tipada, tal como

se muestra:



11. Luego, modificamos la vista para que el modelo se una colección (IEnumerable) e

instanciamos el objeto WebGrid para poder mostrar un listado de clientes, tal como se

observa:

@model IEnumerable<DI.Models.Customer> @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); } <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).

1

2

3



Aplicación de la inyección de dependencia, para el desacoplamiento

1. Un punto de inicio para poder separar el modelo del controlador es crear una capa de

servicios que interactúe 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 solución agregamos una carpeta llamada

Servicios, tal como se muestra:



2. Luego, creamos una clase dentro de la carpeta Servicios, llamada MiServicioSQL y allí

creamos un método llamado ListarTodos que devuelva los Customers en una

colección de objetos, tal como se muestra:



using System; using System.Collections.Generic; 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.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DI.Models; using DI.Servicios; namespace DI.Controllers { public class ClienteController : Controller { // // GET: /Cliente/ public ActionResult Index() {



MiServicioSQL objServicio=new MiServicioSQL(); return View(objServicio.ListarTodos()); } } }

4. Llegado a este punto hemos logrado romper la alta dependencia que tenía 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 patrón DI sugiere crear una interfaz con los

métodos necesitados, para que las clases implementen la funcionalidad requerida, por

tanto a nuestro proyecto le agregamos una Interfaz llamada IServicio con un método

llamado ListarTodos, tal como se muestra:

using System; using System.Collections.Generic; using System.Linq;



using System.Text; using System.Threading.Tasks; using DI.Models; namespace DI.Controllers { public interface IServicio { List<Customer> ListarTodos(); } }

5. Ahora hacemos que nuestra clase MiServicioSQL implemente la interfaz IServicio

using System; using System.Collections.Generic; 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 instanciándola en el constructor del controlador, tal

como se muestra:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DI.Models; using DI.Servicios; namespace DI.Controllers { public class ClienteController : Controller { // // GET: /Cliente/ IServicio servicio; public ClienteController() { servicio = new MiServicioSQL(); } public ActionResult Index() {



return View(servicio.ListarTodos()); } } }

Nótese que con respecto a la versión anterior del controlador, en el método 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 más adelante nos pidieran

cambios, por ejemplo, cambiar el proveedor de base datos a Oracle y cambiar de EF a

otro ORM, solo tendríamos que implementar la interfaz y cambiar ¨Solo¨ en el

constructor del controlador.

7. Hasta el momento hemos llegado al punto de tener una muy mínima dependencia

entre el controlador y la clase de servicio (en el constructor).

Finalicemos el patrón DI anulando incluso esa mínima 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

constaría en hacer que el controlador pida esa referencia a través de un parámetro en

su constructor tal como se muestra:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DI.Models; using DI.Servicios; namespace DI.Controllers { public class ClienteController : Controller { // // GET: /Cliente/ IServicio servicio; public ClienteController(IServicio _servicio) { servicio = _servicio; } public ActionResult Index() { return View(servicio.ListarTodos()); } } }



Nótese que este pequeño cambio es bastante significativo para nuestros intereses, ya

que ahora el controlador no tiene dependencia alguna con la clase de servicio.

8. Nuestra solución 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 solución 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 System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DI.Servicios; namespace DI.Controllers { 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.Collections.Generic; using System.Linq; using System.Web; using System.Web.Http; using System.Web.Mvc; using System.Web.Optimization; using System.Web.Routing; using DI.Controllers; namespace DI { // Nota: para obtener instrucciones sobre cómo habilitar el modo clásico de IIS6 o IIS7, // visite http://go.microsoft.com/?LinkId=9394801 public class MvcApplication : System.Web.HttpApplication {



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 solución a un problema común.

En el desarrollo de software, una de las principales consideraciones en el diseño es la de mantener una alta cohesión y un bajo acoplamiento.

El patrón IoC se enfoca en darnos una solución al dilema del bajo acoplamiento, haciendo una reducción a cero respecto a la dependencia de funcionalidades entre clases.

Actualmente existen dos formas de implementar el patrón IoC, utilizando la inyección de Dependencia (ID) o con el patrón Service Locutor.

El patrón DI nos da la posibilidad de inyectar la dependencia a través del constructor de la clase o utilizando propiedades de las mismas.



9. AJAX Y JQUERY

TEMARIO

Introducción a la programación del lado del cliente

Introducción a Jquery

Introducción a Ajax.

Laboratorio

Resumen

9.1 Introducción a la programación del lado del cliente

La llamada Web 2.0 se caracteriza por ser más dinámica, permitiendo una mayor interacción con los usuarios. JavaScript ha jugado un papel protagónico para lograr aplicaciones con estas características y a la vez seguir cumpliendo con los estándares 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 división en el desarrollo: por un lado, el código que se ejecuta en el servidor, y por otro, aquel que se ejecuta en el navegador una vez que se carga la página web. Ambas partes tienen que estar en sintonía para producir una aplicación 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 razón 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 aplicación (por ejemplo, Flash o Silverlight). Si bien internamente esto puede ser aceptable para una organización, 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 tecnológicos. Esto ha llevado a que muchos desarrolladores decidan volver a lo básico: JavaScript. JavaScript es pequeño y limitado en comparación con los lenguajes de propósito 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 código de fácil utilización 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 páginas más dinámicas, más colaborativas y más dedicadas al usuario. En este capítulo se verá cómo combinar ASP.NET MVC Ajax y jQuery para producir una interfaz de usuario de mayor calidad.

9.2 Introducción a Jquery JQuery es una librería basada en JavaScript con soporte para múltiples Browser cuyo objetivo es simplificar la construcción 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 más visitados. JQuery es un software open source, licenciado bajo el MIT License. La sintaxis de jQuery está diseñada para hacer fácil la navegación de los documentos DOM, crear animaciones, manejar eventos e integración con Ajax. Microsoft y Nokia anunciaron planes para integrar Jquery con Visual Studio.NET MVC Framework

9.3 Introducción a Ajax.



AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica 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 comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan 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 asíncrono esté formateado en XML. Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores, dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

9.4 Laboratorio

Uso de Jquery con MVC 4 Introducción Esta guía 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 ubicación






1

2

3

4



4. Ahora vamos a ir probando varias piezas de código 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 código:

@{ ViewBag.Title = "Vista1"; } <script src="~/Scripts/jquery-1.8.2.js"></script> <script type="text/javascript"> $(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> }



Este código va a mostrar un texto por defecto en un TextBox que se mostrará y

ocultará según 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 código.

@{ ViewBag.Title = "Vista2"; } <script src="~/Scripts/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function() { $('#txtConfirmar').bind('cut copy paste', function(e) { e.preventDefault(); alert("Cut / Copy / Paste esta deshabilitado"); }) }); </script>



<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 código deshabilita la opción de copiar, cortar, pegar de una caja de texto.



6. En la carpeta View/Home agregamos una nuevas vista llamada vista3 y dentro de la

vista3 agregamos el siguiente código

@{ ViewBag.Title = "Vista3"; } @{ ViewBag.Title = "Vista3"; } <script src="~/Scripts/jquery-1.8.2.js"></script> <script type="text/javascript"> $(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 código tiene un check que selecciona todas las opciones de un grupo de checks



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 instalación de software adicional en el cliente (Flash,

Silverlight, etc.).

Javascript, Ajax y Jquery continúan siendo las mejores opciones para el desarrollo de

código del lado del cliente, siendo Jquery una alternativa que brinda mayor facilidad de

desarrollo y compatibilidad con los navegadores.



Logro de la unidad de aprendizaje

Al término de la unidad, los alumnos, utilizando las técnicas 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 validación.

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 máximo las características de Common Language Runtime, como la seguridad de tipos, la herencia, la interoperabilidad de lenguajes y el control de versiones. Las páginas Web ASP.NET se utilizan como la interfaz de usuario programable para su aplicación Web. Este tipo de páginas presenta la información al usuario en cualquier explorador o dispositivo cliente e implementa lógica de aplicación mediante el código de la parte servidor. Las páginas Web ASP.NET:

Se basan en la tecnología Microsoft ASP.NET, en la que el código que se ejecuta en el

servidor genera de forma dinámica salida de páginas Web en un explorador o dispositivo

cliente.

Son compatibles con cualquier explorador o dispositivo móvil. Las páginas Web ASP.NET

representan automáticamente el código HTML adecuado al explorador para funciones tales

como estilos, diseño, etc. Como alternativa, se pueden diseñar las páginas Web ASP.NET

para ejecutarse en un explorador determinado, como Microsoft Internet Explorer y

aprovechar así todas las características de un explorador específico.

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 páginas Web ASP.NET, la programación de la interfaz de usuario se divide en dos partes: el componente visual y el lógico. Si ha trabajado con herramientas como Visual Basic y Visual C++ anteriormente, reconocerá esta división entre la parte visible de una página y el código que se oculta detrás y que interactúa con ella.

UNIDAD DE

APRENDIZAJE

4



El elemento visual está compuesto por un archivo que contiene el marcado estático como HTML o controles de servidor ASP.NET o ambos. La página Web ASP.NET funciona como un contenedor del texto y los controles estáticos que se desea mostrar. La lógica de las páginas Web ASP.NET se compone del código creado para interactuar con la página. El código puede residir en un bloque de script en la página o en una clase independiente. Si el código está en un archivo de clase independiente, a este archivo se le conoce como archivo de código subyacente. El código del archivo de código subyacente se puede escribir en Visual Basic, Visual C#, Visual J# o JScript .NET. Las páginas Web ASP.NET se compilan en un archivo de biblioteca de vínculos dinámicos (.dll). La primera vez que un usuario examina la página .aspx con el explorador, ASP.NET genera automáticamente un archivo de clase .NET que representa a la página y la compila. El archivo .dll se ejecuta en el servidor y genera dinámicamente la salida HTML para su página. A continuación, se muestra el marco global de ASP.NET y la interacción con los Web Form y MVC.

10.2 Controles de validación. Los controles de validación comprueban los datos proporcionados por el usuario en los controles SelectionList y TextBox. La validación se produce cuando el formulario se envía al servidor. Los controles de validación comprueban los datos proporcionados por el usuario y, si estos no superan alguna de las pruebas de validación, ASP.NET devuelve la página al dispositivo de cliente. Cuando esto ocurre, los controles de validación que detectaron los errores muestran mensajes de error. A excepción del control ValidationSummary, todos los controles de validación deben hacer referencia a un control SelectionList o TextBox. Almacena la referencia en la propiedad ControlToValidate del control de validación. Como el control ValidationSummary no hace referencia a ningún otro control, no contiene la propiedad ControlToValidate. Entre los controles de validación que existen se incluyen cinco controles que realizan comparaciones y un control que resume todos los errores que puedan producirse. Todos los controles de validación deben colocarse en un control Form o Panel, o dentro de la plantilla de un control de una página Web móvil. También puede arrastrar el control de validación hasta una página de control de usuario móvil. En la tabla siguiente se muestran los controles de validación, y la validación que estos controles pueden realizar.

Control Tarea de validación



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 máximo

RegularExpressionValidator Permite validar que un valor esté basado en una

expresión regular, tales como validaciones de

correo electrónico, etc.

RequiredFieldValidator Permite asegurar que se ingrese un valor (el valor

es requerido)

ValidationSummary Presenta un cuadro resumen de los errores de

validación que se dieron en la página.

10.3 Laboratorio

Validaciones de entrada de datos con Web Form Introducción Esta guía consta de:

Uso de los controles para validación de ASP.NET Web Form.

Uso de los controles de validación 1. Iniciamos Visual Studio 2012 y creamos un nuevo proyecto

2. Vamos a usar una solución en Visual C#, Web y de tipo Aplicación Web vacía de

ASP.NET y le damos como nombre Validaciones, tal como se muestra:

http://msdn.microsoft.com/es-es/library/t2t083x9(v=vs.80).aspx

http://msdn.microsoft.com/es-es/library/system.web.ui.mobilecontrols.customvalidator(v=vs.80).aspx

http://msdn.microsoft.com/es-es/library/system.web.ui.mobilecontrols.rangevalidator(v=vs.80).aspx

http://msdn.microsoft.com/es-es/library/sd2hd57f(v=vs.80).aspx

http://msdn.microsoft.com/es-es/library/system.web.ui.mobilecontrols.regularexpressionvalidator(v=vs.80).aspx

http://msdn.microsoft.com/es-es/library/system.web.ui.mobilecontrols.requiredfieldvalidator(v=vs.80).aspx



3. Sobre el proyecto de validaciones, agregar un nuevo elemento de tipo Formulario Web

y le damos como nombre Empleado, tal como se muestra:

1

2

3

4



|

4. Cambiamos a la vista diseño y agregamos una tabla de 7 filas por 3 columnas



5. Y hacemos un diseño tal como se muestra:



6. En este escenario, las consideraciones de validación 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”



Realizar la misma configuración para las demás cajas de texto

7. Para que el correo tenga un formato correcto utilizamos el control

RegularExpressionValidator y configuramos las propiedades ControlToValidate,

ErrorMessage y ValidationExpression



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





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





Nota: Es probable que se tenga que deshabilitar la validación 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 programación

orientada a eventos.

Las aplicaciones Web Forms tiene la particularidad de dividir el diseño en un archivo y el

código en otro (Code Behind).

ASP.NET Web Form viene con una serie de controles de validación para facilitarnos la

tarea de validación de ingreso de datos por parte del usuario.



11. APLICACIONES EN 3 CAPAS CON ASP.NET WEB FORM I

TEMARIO

La programación en capas

La capa de datos

La capa de entidad

La capa de reglas de negocio

Laboratorio

Resumen

11.1 La programación en capas La programación en capas es una arquitectura cliente-servidor en la que el objetivo primordial es la separación de la lógica de negocios de la lógica de diseño; un ejemplo básico de esto consiste en separar la capa de datos de la capa de presentación al usuario. La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en varios niveles y, en caso de que sobrevenga algún cambio, sólo se ataca al nivel requerido sin tener que revisar entre código mezclado. Un buen ejemplo de este método de programación sería el modelo de interconexión de sistemas abiertos. Además, permite distribuir el trabajo de creación de una aplicación por niveles; de este modo, cada grupo de trabajo está totalmente abstraído del resto de niveles, de forma que basta con conocer la API que existe entre niveles. En el diseño de sistemas informáticos actual se suelen usar las arquitecturas multinivel o Programación por capas. En dichas arquitecturas a cada nivel se le confía una misión simple, lo que permite el diseño de arquitecturas escalables (que pueden ampliarse con facilidad en caso de que las necesidades aumenten).

11.2 La capa de datos. En la capa de datos se gestiona el acceso a los datos de la aplicación. Se emplean gestores de bases de datos que realizan la recuperación y el almacenamiento físico 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 programación como clases para aumentar el nivel de abstracción y facilitar el acceso a los datos desde la capa de negocio. Existen varias implementaciones tecnológicas sobre persistencia que deberán emplearse atendiendo a las necesidades de cada aplicación

11.3 La capa de entidad Las entidades del negocio de una aplicación representa entidades reales y además suelen ser sustantivos, como por ejemplo: Cliente, Nómina, Factura, Depósito, etc. Técnicamente 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 lógica de la aplicación como algoritmos, validaciones y

coordinación necesaria para resolver la problemática. Es responsable de representar conceptos

de negocio, información sobre la situación de los procesos e implementación de las reglas de negocio. Esta

capa sirve de nexo entre las peticiones del usuario (capa de presentación) y la conexión al

servidor de datos (capa de acceso a datos)



11.5 Laboratorio

Mantenimiento en 3 capas con Web Form Introducción Esta guía consta de:

Creación de la tabla y Store Procedures en SQL Server.

Programación en 3 capas con ASP.NET Web Form

Creación 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.



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,



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

Programación en 3 capas con ASP.NET Web Form 1. Iniciamos Visual Studio 2012 y creamos un nuevo proyecto



2. Vamos a usar una solución en blanco ubicada en Otros tipos de proyecto .Soluciones

de Visual Studio, y le damos como nombre Mantenimiento, tal como se muestra:

3. En nuestra solución en blanco vamos a crear nuestra estructura de capas agregando a

la solución tres proyectos de tipo Librería de clases y un proyecto ClienteWeb de tipo

ASP.NET Web form, todo los proyectos lo crearemos usando C#.

Sobre la solución 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:

1

2

3

4



1

2

3

4



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 más

llamado ClienteWeb de tipo Aplicación Web Vacía de ASP.NET, tal como se muestra:



Nuestra solución debería 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 System; using System.Collections.Generic; using System.Linq; using System.Text;

1

2

3

4



using System.Threading.Tasks; 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 métodos 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 código

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Data; using System.Data.SqlClient; namespace CapaDatos { public class Cliente { private string cadenaConexion = "Server=.;Initial Catalog=CRM;trusted_connection=yes"; public DataTable ListarTodos() { SqlConnection cnn = new SqlConnection(cadenaConexion); SqlDataAdapter dap = new SqlDataAdapter("selCliente", cnn);



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) { SqlConnection cnn = new SqlConnection(cadenaConexion); 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.Direction = ParameterDirection.Input; par.Value = entidad.Direccion; par = cmd.Parameters.Add("@Telefono", SqlDbType.VarChar, 50); par.Direction = ParameterDirection.Input; par.Value = entidad.Telefono; try { cnn.Open(); int cantidadFilas = cmd.ExecuteNonQuery(); if (cantidadFilas>0) { resultado=true; } else { resultado=false; } } catch { //codigo de registro de log aqui resultado = false; } finally



{ if (cnn.State == ConnectionState.Open) { cnn.Close(); } } return resultado; } public bool Actualizar(CapaEntidad.Cliente entidad) { SqlConnection cnn = new SqlConnection(cadenaConexion); SqlCommand cmd = new SqlCommand("updCliente", cnn); cmd.CommandType = CommandType.StoredProcedure; bool resultado; SqlParameter par; par = cmd.Parameters.Add("@IdCliente", SqlDbType.Int); par.Direction = ParameterDirection.Input; par.Value = entidad.IdCliente; 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.Direction = ParameterDirection.Input; par.Value = entidad.Direccion; par = cmd.Parameters.Add("@Telefono", SqlDbType.VarChar, 50); par.Direction = ParameterDirection.Input; par.Value = entidad.Telefono; try { cnn.Open(); int cantidadFilas = cmd.ExecuteNonQuery(); if (cantidadFilas > 0) { resultado = true; } else { resultado = false; } } catch { //codigo de registro de log aqui resultado = false; } finally { if (cnn.State == ConnectionState.Open) { cnn.Close(); } } return resultado; }



public bool Eliminar(CapaEntidad.Cliente entidad) { SqlConnection cnn = new SqlConnection(cadenaConexion); SqlCommand cmd = new SqlCommand("delCliente", cnn); cmd.CommandType = CommandType.StoredProcedure; bool resultado; SqlParameter par; par = cmd.Parameters.Add("@IdCliente", SqlDbType.Int); par.Direction = ParameterDirection.Input; par.Value = entidad.IdCliente; try { cnn.Open(); int cantidadFilas = cmd.ExecuteNonQuery(); if (cantidadFilas > 0) { resultado = true; } else { resultado = false; } } catch { //codigo de registro de log aqui resultado = false; } finally { if (cnn.State == ConnectionState.Open) { cnn.Close(); } } return resultado; } } }

8. Estando en la clase Cliente de la capa de reglas, crearemos la lógica 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:



En la clase Cliente de la capa de reglas hacemos lo siguiente:

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Data; namespace CapaReglas { public class Cliente { private CapaDatos.Cliente objCliente = new CapaDatos.Cliente(); public DataTable ListarTodos() { return objCliente.ListarTodos(); } public bool Adicionar(CapaEntidad.Cliente entidad) { return objCliente.Adicionar(entidad); } public bool Actualizar(CapaEntidad.Cliente entidad) { return objCliente.Actualizar(entidad); } public bool Eliminar(CapaEntidad.Cliente entidad) { return objCliente.Eliminar(entidad); } } }

9. Finalmente, en la capa de ClienteWeb creamos las páginas Web Form, agregamos un

formulario Web haciendo Click derecho en el proyecto ClienteWeb, Agregar-

Formulario Web Form y le llamamos Cliente, tal como se muestra:



10. Estando en la vista de diseño del formulario, agregamos un tabla con dos filas



11. En la primera fila de la tabla le ponemos como título “Lista de Clientes” y en la segunda

fila agregamos un control GridView y un control ObjectDataSource , tal como se

muestra:



12. Ahora configuramos el control ObjectDataSource, en la opción que dice Configurar

Origen de Datos.







13. Una vez configurado el ObjectDataSource, enlazamos el GridView con el

objectDatasource, tal como se muestra:



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

botón con propiedad Text “Adicionar” y que navegue a una página llamada nuevo.aspx



16. Estando en formulario Nuevo.aspx , agregamos una tabla con 4 filas por dos columnas

y hacemos el siguiente diseño

17. En el caso anterior se usó el objeto objectDatasource. Una alternativa adicional es

escribir el código directamente, haciendo doble click en el botón Aceptar , agregamos

el siguiente código.



using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using 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



Nota Final: La refactorización de la capa de datos utilizando Helpers se realizará en el

siguiente capítulo.

11.6 Resumen

La arquitectura en capas nos permite tener un diseño de división de tareas, entre lo que es

la presentación 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 almacén de datos y nos da

funcionalidades para la persistencia.

La capa de entidad representa el dominio del negocio a través de clases con propiedades.

La capa de reglas de negocio contiene toda la lógica y algoritmos para el cumplir el objetivo

del sistema.

Finalmente, en la capa de Cliente o Usuario están las interfaces graficas de usuario o

programa que usará las capas adyacentes.



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 solución de capas se puede notar que las capa de datos, tienen bastante código redundante, entre objetos sqlconnection, etc, además se puede ver la alta dependencia que se ha formado con la base de datos SQL. Esta situación hace que los cambios posteriores sean difíciles de abordar, si en nuestro aplicativo se decide cambiar de base de datos, se tendría 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 código que se escribe y además 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 librerías que nos ayuda a simplificar el desarrollo de software. Para mayor información puede ir a http://msdn.microsoft.com/en-us/library/ff921345.aspx y http://msdn.microsoft.com/en-us/library/ff648951.aspx para poder descargar las librerías correspondientes

12.2 Laboratorio

Uso del Enterprise Library con Web Form Introducción Esta guía consta de:

Refactorización de la capa de datos con Enterprise Library.

Refactorización de la capa de datos 1. Empezamos llevando nuestra cadena de conexión al Web .Config y configurando las

librerías de Enterprise Library

<?xml version="1.0" encoding="utf-8"?>  <configuration> <configSections> <section name="dataConfiguration" type="Microsoft.Practices.EnterpriseLibrary.Data.Configuration.DatabaseSettings, Microsoft.Practices.EnterpriseLibrary.Data, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="true"/> </configSections> <dataConfiguration defaultDatabase="Connection String"/> <connectionStrings>

http://msdn.microsoft.com/en-us/library/ff921345.aspx





<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 instalación Enterprise Library



Y finalmente refactorizamos el código de la clase cliente de la capa de datos

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Data; using System.Data.SqlClient; using Microsoft.Practices.EnterpriseLibrary.Data; using Microsoft.Practices.EnterpriseLibrary.Data.Sql; using System.Data.Common; namespace CapaDatos { public class Cliente { public DataTable ListarTodos() { Database db= DatabaseFactory.CreateDatabase(); DataTable dt =db.ExecuteDataSet(CommandType.StoredProcedure, "selCliente").Tables[0]; return dt; } public bool Adicionar(CapaEntidad.Cliente entidad) { bool resultado; Database db= DatabaseFactory.CreateDatabase(); DbCommand cmd = db.GetStoredProcCommand("insCliente", entidad.Nombres,



entidad.Direccion, entidad.Telefono); try { int cantidadFilas = db.ExecuteNonQuery(cmd); if (cantidadFilas>0) { resultado=true; } else { resultado=false; } } catch { //codigo de registro de log aqui resultado = false; } return resultado; } public bool Actualizar(CapaEntidad.Cliente entidad) { bool resultado; Database db = DatabaseFactory.CreateDatabase(); DbCommand cmd = db.GetStoredProcCommand("updCliente", entidad.IdCliente, entidad.Nombres, entidad.Direccion, entidad.Telefono); try { int cantidadFilas = db.ExecuteNonQuery(cmd); if (cantidadFilas > 0) { resultado = true; } else { resultado = false; } } catch { //codigo de registro de log aqui resultado = false; } return resultado; } public bool Eliminar(CapaEntidad.Cliente entidad) { bool resultado; Database db = DatabaseFactory.CreateDatabase(); DbCommand cmd = db.GetStoredProcCommand("delCliente", entidad.IdCliente); try



{ int cantidadFilas = db.ExecuteNonQuery(cmd); if (cantidadFilas > 0) { resultado = true; } else { resultado = false; } } catch { //codigo de registro de log aqui resultado = false; } return resultado; } } }

3. Ejecutamos, los resultados son los mismos, pero la capa de datos esta refactorizada

con un código más simplificado y claro.



12.3 Resumen

Los Helpers de la capa de datos ayudan a simplifcar el código de acceso a datos.

Microsoft a través de los Enterprise Library nos ayuda con un conjunto de librerías para

mejorar nuestro código, simplificando y reduciendo la cantidad de código que se escribe.

Documents

Lenguaje de Programacion III