Lenguaje de Programacion III

Lenguaje de Programación III

LENGUAJE DE PROGRAMACIÓN III

CIBERTEC

2

CARRERAS PROFESIONALES


3

NDICE Í 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

Unidad de aprendizaje 2 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


: El patrón Repository

3.2 Tema 8

: Inversion of Control (IoC)

3.3 Tema 9

: Ajax y Jquery


: ASP.NET Web Form

4.2 Tema 11

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

4.3 Tema 12

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

CIBERTEC



CIBERTEC

4



5

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.

CIBERTEC



6

REDDECONTENIDOS

Lenguaje de Programación III

Diseño de un sitio web con MVC

Introducción a ASP.Net 4.0

CIBERTEC

Diseño con Master Pages y manejo de estado

Acceso a datos con EF y seguridad

Control es de usuario

Acceso a datos con ADO.N et y manejo de capas

Manejo de JQUERY y AJAX

Manejo de WebSe rvices y WCF

Manejo de control es de AJAX

ASP.Net MVC

Manejo de imágene sy Proyect os de AJAX

AJAX MVC (Modelo – Vista – Controlad or)



7

UNIDAD DE APRENDIZAJE

1 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.

CIBERTEC



8

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:

Lado del Cliente

Lado del Servidor

Http-Request 3 2

Http

Internet

Servidor Web 6

Http-Response 5

1

Browser IE FireFox Chrome Opera Safari, etc.

Formato de Datos XML, Json

Tecnología Web ASP.NET PHP JSF JSP Suite Macromedia Etc.

Respuesta en HTML Scripts del Cliente Java Script Jquery

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

CIBERTEC

4



9

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.

CIBERTEC



10

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.

CIBERTEC



11

Por otro lado el equipo de ASP.NET vio la necesidad de contar con un motor de renderizado que sea simple, útil y que de una mayor 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

Tecnología madura y estable con soporte por miles de controles y herramientas de terceros Modelo de programación orientado a eventos, haciéndose muy similar al desarrollo de aplicaciones Windows. Soporte al manejo de estados. Se necesita un conocimiento básico de HTML y javascript para construir interfaces Web Excelentes mecanismos de seguridad construidos de manera automática.

CIBERTEC

Desventajas

Problemas para dar soporte al paradigma de separación de conceptos (Soc) Problemas para orientarlo a un proyecto de Testing, TDD (Desarrollo orientado al Test) Problemas de rendimiento cuando se hace uso excesivo del manejo de estados. Menos control del HMTL generado Menos soporte para el desarrollo con múltiples equipos (desarrollo paralelo)



12

ASP.NET MVC Ventajas

Ruteo URL y mejor soporte para los motores de búsqueda 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.

Desventajas

Mayor esfuerzo en el aprendizaje del framework.

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

CIBERTEC



13

1 2

3

4 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.

CIBERTEC



14

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

5. Agregamos las siguientes propiedades a la clase Cliente.

CIBERTEC



15

6. Ahora, agregamos nuestro controlador, hacemos click derecho a nuestra carpeta Controllers y agregamos el controlador, tener en cuenta que nuestro controlador se llamará ClienteController

CIBERTEC



16

7. Dentro del 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

CIBERTEC



CIBERTEC

17



18

Nota: Tener en cuenta que el MVC crea en la carpeta Views la estructura de carpeta Cliente, y dentro de la carpeta Cliente un archivo llamado Index.cshtml. 9. En la vista Index que acabamos de crear, en la parte superior, referencia al objeto Cliente a 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"; }
Index

Cliente
@Html.DisplayNameFor(model=>model.ClienteId)

@Html.DisplayFor(model=>model.ClienteId)

CIBERTEC



19

@Html.DisplayNameFor(model=>model.Apellido)

@Html.DisplayFor(model=>model.Apellido)

@Html.DisplayNameFor(modelo=>modelo.Nombre)

@Html.DisplayFor(modelo=>modelo.Nombre)

@Html.DisplayNameFor(modelo=>modelo.Direccion)

@Html.DisplayFor(modelo=>modelo.Direccion)

@Html.DisplayNameFor(modelo=>modelo.DNI)

@Html.DisplayFor(modelo=>modelo.DNI)

@Html.DisplayNameFor(modelo=>modelo.FecNac)

@Html.DisplayFor(modelo=>modelo.FecNac)

11. Finalmente para darle metadata de configuración, adecuamos la clase Cliente tal como se muestra:

CIBERTEC



20

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.

CIBERTEC









21

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.

CIBERTEC



22

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:

CIBERTEC



23

I

I

I. II. III.

Database First: en este modo de trabajo se puede generar el modelo de datos a partir de una base datos existente Model First: en este modo de trabajo se puede generar la base de datos a partir del modelo visual generado en Visual Studio (modelo .edmx) Code First: en este modo de trabajo se puede generar la base de datos a partir de clases 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.

CIBERTEC



24

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.

CIBERTEC



25

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.

CIBERTEC



26

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

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 VentasMVC y una ubicación donde se guardará el proyecto, finalmente damos Aceptar.

CIBERTEC



27

1 2

3

4 3. En la opción de seleccionar plantilla de MVC, elegimos la opción A plicación de Internet, como motor de vista Razor y damos click en Aceptar.

CIBERTEC



28

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 productos { get; set; } }

public class Categoria { public int CategoriaId { get; set; } public string Descripcion { get; set; } public List 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

CIBERTEC



using using using using using

29

System; System.Collections.Generic; System.Data.Entity; System.Linq; System.Web;

namespace VentasMVC.Models { public class MyDataContext:DbContext { public DbSet listaProducto { get; set; } public DbSet listaCategoria { get; set; } public DbSet 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

CIBERTEC



30

7. Llegado a este punto compilamos el proyecto para que se generen los assemblies del modelo. 8. Ahora agregamos los controladores para la clase Proveedor, 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

CIBERTEC



31

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.

CIBERTEC



32

10. Ahora simplemente ejecutamos (F5).

11. Por defecto, EF genera las tablas con los nombres de las clases pluralizadas, es decir, mi clase se llama Producto y la tabla se llama Productoes, mi clase se llama Proveedor y la tabla se llama Proveedors, etc. Si queremos cambiar esa opción reescribimos el método OnModelCreating de la clase MyDataContext.

CIBERTEC



33

12. Para que los cambios tenga efecto, borramos la BD y volvemos a ejecutar el proyecto de Visual Studio.

13. Adicionalmente, cuando modificamos el modelo agregando o quitando propiedades a una clase, o agregando nuevas clases, se debe actualizar la BD ya que queda de sincronizado respecto al modelo original. Vamos a agregar una clase llamada Empleado (en la carpeta Models) con las siguientes propiedades:

CIBERTEC



34

[Table("Empleados")] public class Empleado { [Column("EmpleadoId"),Key] public int Codigo { get; set; } public string Nombres { get; set; } public string DNI { get; set; } [Column("FecNac")] public DateTime Nacimiento { get; set; } }

Agregamos la clase Empleado a la clase de contexto MyDataContext

14. Si ejecutamos en este momento nos saldrá un error que nos indica que el modelo ha tenido cambios “The model backing the 'MyDataContext' context has changed since the database was created”.

15. Para corregir el error activamos la opción de migración de Entity Framework a través de la consola del Package Manager 16. Abrimos el Package Manager.

CIBERTEC



35

17. En el promt del Package Manager (PM>) escribimos Enable-Migrations ContextTypeName VentasMVC.Models.MyDataContext , luego de la ejecución verificar que se haya creado la carpeta Migrations en el proyecto.

CIBERTEC



36

18. Con el comando anterior la clase MyDataContext está habilitada para poder actualizar la base de datos. Hay dos modos de 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.

CIBERTEC



37

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()); 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)

CIBERTEC



38

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

2. En el caso que se presente un problema con la 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)

CIBERTEC



39

Seguridad con MemberShipProvider 1. Antes de configurar el MemberShipProvider ampliemos los menus del t emplate, 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

CIBERTEC



40

4. Agregamos el atributo Authorize a las clases controladoras que deseamos darle seguridad, por ejm a la clase CategoriaController, luego ejecutamos y cuando queremos entrar a Categoria se nos dirigirá a una pantalla de autenticación en donde podemos registrarnos.

Hacemos click a la opción Categoría.

CIBERTEC



41

Nos registramos haciendo click en Regístrese

CIBERTEC



42

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.

CIBERTEC



43

2.6 Resumen  







Entity Framework es la tecnología que proporciona Microsoft para el acceso a datos. EF nos 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 clase DbContext. Esta clase clase principalmente nos ayuda ayuda con las operaciones CRUD. Las anotaciones de datos son una forma nueva en ASP.NET ASP.NET para realizar la la validación de la entrada de datos por parte del usuario, consta de una serie 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

CIBERTEC



44

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");

CIBERTEC



45

//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: 

































CIBERTEC

DateTimeConvertor FacebookApiEventArgs FacebookApiException FacebookApiLimitException FacebookBatchParameter FacebookClient FacebookMediaObject FacebookMediaStream FacebookOAuthException FacebookOAuthResult FacebookUploadProgressChangedEventArgs HttpMethod HttpWebRequestWrapper HttpWebResponseWrapper JsonArray JsonObject WebExceptionWrapper



46

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

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 MVCFB y una ubicación donde se guardará el proyecto, finalmente damos Aceptar

CIBERTEC



47

1 2

3


CIBERTEC



48

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

CIBERTEC



49

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.

CIBERTEC



50

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.

CIBERTEC



51

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]

CIBERTEC



52

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.

CIBERTEC



CIBERTEC

53



54

15. Adicionalmente podemos ver que en el servidor SQL se creó la base de datos SeguridadMVC y se registró el usuario autenticado.

CIBERTEC



55

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

CIBERTEC



Según la imagen, el ExternalLoginCallBack

56

controlador

solicitado

Account

y

el

método

es

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:

CIBERTEC



57

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 HtmlRazor para que se muestre los datos.

CIBERTEC



58

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.

CIBERTEC



CIBERTEC

59



60

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

CIBERTEC



61

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.

CIBERTEC



62

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.

CIBERTEC



63

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.

CIBERTEC



64



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, 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 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, por ejemplo, en los operadores de consulta estándar que se definen en

CIBERTEC



65

System.Linq.Queryable. Al especificar un argumento Expression, 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 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 Omite un numero especifico de elementos y devuelve los elementos restantes

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

Single

Skip

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

int[] grades = { 59, 82, 70, 56, 92, 98, 85 }; IEnumerable lowerGrades = grades.AsQueryable().OrderByDescending(g => g).Skip(3); /* Resultado 82 70 59 56*/

Take

Devuelve un int[] grades = { 59, 82, 70, 56, 92, 98, 85 }; especifico número de elementos contiguos IEnumerable topThreeGrades = desde un punto de inicio, en una colección o grades.AsQueryable().OrderByDescending(grade secuencia, es análogo => grade).Take(3); /*Resultado al operador TOP de 98 92 85 SQL */

Any

Devuelve un valor Pet[] pets = bool indicando si { new Pet { Name="Barley", Age=8, algún elemento de Vaccinated=true }, una determinada new Pet { Name="Boots", Age=4,

CIBERTEC



colección, satisface la condición

66

Vaccinated=false }, new Pet { Name="Whiskers", Age=1, Vaccinated=false } }; bool unvaccinated = pets.AsQueryable().Any(p => p.Age > 1 && p.Vaccinated == false);

Para mayor detalle de todos los operadores QueryAble y ejemplos, remitirse a

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

El laboratorio del Carrito de compras con MVC 4.0 abarca los conceptos que se han tratado en las unidades anteriores, tales como Entity Framework, DbContext, Scaffold y este 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.

CIBERTEC



67

5. EL LENGUAJE RAZOR TEMARIO    

Razor y los HTML Helpers Renderizado de los Helpers Laboratorio Resumen

5.1 Razor y los HTML Helpers

ASP.NET Web Pages con Razor proporciona una sintaxis de 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)

CIBERTEC



68

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{ new SelectListItem {Value = "1", Text new SelectListItem {Value = "2", Text new SelectListItem {Value = "3", Text new SelectListItem {Value = "4", Text new SelectListItem {Value = "5", Text };

= = = = =

"Blue"}, "Red"}, "Green", Selected = true}, "Yellow", Selected = true}, "Black"}

} @Html.ListBox("myListbox", items, null, 6, true)

@{ var db = Database.Open("Northwind"); var data = db.Query("SELECT CategoryId, CategoryName FROM Categories"); var items = data.Select(i => new SelectListItem { Value = i.CategoryId.ToString(), Text = i.CategoryName, Selected = i.CategoryId == 4 ? true : false }); } @Html.DropDownList("CategoryId", items)

@{ var db = Database.Open("Northwind"); var data = db.Query("SELECT CategoryId, CategoryName FROM Categories"); var items = data.Select(i => new SelectListItem { Value = i.CategoryId.ToString(), Text = i.CategoryName }); } @Html.DropDownList("CategoryId", "Please Select One", items, 4, new {@class = "special"})

Finalmente, hay un amplio soporte de Intellisence en Visual studio.

CIBERTEC



69

5.2 Renderizado de los Helpers

Hay HTML Helpers para toda clase de controles de formulario Web: check boxes, hidden fields, password boxes, radio buttons, text boxes, text areas, dropdown lists y list boxes. Hay 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

Html.ActionLink

Html.DropDownList

Html.Hidden

Html.Label

Html.ListBox

or

Html.Password

Html.Radio

Html.TextArea

Html.TextBox

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

First Name: @Html.TextBox("firstname")
Last Name: @Html.TextBox("lastname", Request["lastname"])

First Name:
Last Name:
CIBERTEC



Town: @Html.TextBox("town", Request["town"], new Dictionary(){{ "class", "special" }})
Country: @Html.TextBox("country", Request["country"], new { size = 50 })

70

/>
Town:
Country:

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.

CIBERTEC



71

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

CIBERTEC



72

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:

CIBERTEC



73

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

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 CarritoMVC y una ubicación donde se guardará el proyecto, finalmente damos Aceptar.

CIBERTEC



74

1 2

3 4 3. En la opción de seleccionar plantilla de MVC, elegimos la opción A plicación de Internet, como motor de vista Razor y damos click en Aceptar.

CIBERTEC



75

4. Creamos nuestro modelo de clase de dominio inicial, en la carpeta Models.

5. Adicionalmente creamos nuestra clase de contexto de base de datos MyDataContext y modificamos el Web.config para indicar la cadena de conexión.

CIBERTEC



76

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:

CIBERTEC



77

Actualizamos el _Layout.cshtml de la carpeta Views/Shared

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

CIBERTEC



78

Finalmente ejecutamos y 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.

CIBERTEC



79

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:

CIBERTEC



80

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

CIBERTEC



81

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.

CIBERTEC



82

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.

CIBERTEC



83

| 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 álbumes y artista a nuestra base de datos y ejecutamos.

CIBERTEC



84

18. Ahora agregamos nuestra clase de negocio ShoppingCart donde se implementará las opciones de agregar ítems, quitar ítems, í tems, obtener total, limpiar ítems, etc. En nuestro folder Models agregamos la clase ShoppingCart.cs con el siguiente código namespace CarritoMVC.Models CarritoMVC.Models { public class ShoppingCart { string ShoppingCartId ShoppingCartId { get; set; } public static ShoppingCart ObtenerCart(HttpContextBas ObtenerCart(HttpContextBase e context) { ShoppingCart obj = new ShoppingCart(); if (context.Session["IdCar (context.Session["IdCart"]==null) t"]==null) { if (!String.IsNullOrEmpty(c (!String.IsNullOrEmpty(context.User. ontext.User.Identity.Name Identity.Name)) )) { context.Session["IdCart"] context.Session["IdCart"] = context.User.Identity.Name; } else { context.Session["IdCart"] context.Session["IdCart"] = Guid.NewGuid().ToString Guid.NewGuid().ToString(); (); } } obj.ShoppingCartId obj.ShoppingCartId = context.Session["IdCart" context.Session["IdCart"].ToString(); ].ToString(); return obj; } public void AgregarItem(Album album)

CIBERTEC



85

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

CIBERTEC



86

decimal? total = (from c in MyDB.listaCart where c.Identificador == ShoppingCartId select (int?)c.Cantidad * c.album.Precio).Sum(); return total ?? decimal.Zero; } public int ObtenerCantidad() { 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 l as clases tipadas para las vistas del ShoppingCart

CIBERTEC



87

20. Dentro de la carpeta ViewModels agregamos la clase ShoppincartViewModel y ShoppingCarRemoveViewModel. public class ShoppingCartViewModel { public List Items { get; set; } public decimal Total { get; set; } }

namespace CarritoMVC.ViewModels { public class ShoppingCartRemoveViewModel { public string Mensaje { get; set; } public decimal Total { get; set; } public int CantidadTotal { get; set; } public int CantidadItem { get; set; } public int IdItem { get; set; } }

CIBERTEC



88

}

21. Ahora agregamos nuestro controlador para el Shoppingcart.

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

System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; CarritoMVC.Models; CarritoMVC.ViewModels;

namespace CarritoMVC.Controllers { public class ShoppingCartController : Controller {

CIBERTEC



89

// // 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

CIBERTEC



90

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 type="text/javascript"> $(function () { $(".RemoveLink").click( function () { var recordToDelete = $(this).attr("data-id"); if (recordToDelete != '') { $.post("/ShoppingCart/Quitar",{"id":recordToDelete},

CIBERTEC



91

function (data) { if (data.CantidadItem == 0) { $('#row-' + data.IdItem).fadeOut('slow'); } else { $('#item-count-' + data.IdItem).text(data. CantidadItem); } $('#cart-total').text(data.Total); $('#update-message').text(data.Mensaje); } ); } } ); } );
Revisa tu compra:

@Html.ActionLink("Checkout>>","RegistroyPago","Checkout")

@foreach (var item in Model.Items) { }

CIBERTEC



92

Album Precio Cantidad
@Html.ActionLink(item.album.Nombre,"Detalle","Tienda",new {id=item.AlbumId}) @item.album.Precio @item.Cantidad Borrar
Total @Model.Total

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:

CIBERTEC



93

27. El proceso de checkout requiere que el usuario esté autenticado, en este proyecto vamos a utilizar el MemberShipProvider y vamos a crear una base de datos para la Seguridad llamada CarritoSeguridad, para ello cambiamos el Web.Config, luego creamos el checkout Controller usando un template 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.

CIBERTEC



94

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 using using using using using

System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; CarritoMVC.Models;

namespace CarritoMVC.Controllers { [Authorize] public class CheckOutController : Controller { // // GET: /CheckOut/ const string codigoPromocion = "FREE"; public ActionResult RegistroyPago() { return View();

CIBERTEC



95

} [HttpPost] public ActionResult RegistroyPago(FormCollection values) { var orden = new Orden(); TryUpdateModel(orden); try { if (string.Equals(codigoPromocion, values["codigoPromocion"], StringComparison.OrdinalIgnoreCase) == false) { return View(orden); } else { 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:

CIBERTEC



96

30. Cambie el código de la vista por lo siguiente: @model CarritoMVC.Models.Orden @{ ViewBag.Title = "Registro y Pago"; }
Registro y pago
@using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true)
Informacion de envio @Html.EditorForModel()

Formas de pago
Registre su codigo de promocion

@Html.Label("Codigo")

@Html.TextBox("codigoPromocion")

} @section Scripts { @Scripts.Render("~/bundles/jqueryval") }

31. En la clase Orden de la carpeta Models, excluimos del scaffold los campos OrdenId, Usuario, Total y Fecha, ya que estos valores son configurados internamente.

CIBERTEC



97

32. Agregamos la vista para el 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"; }
Checkout Completado

Gracias por el registro de tu pedido, el identificador de tu orden es @Model

Continua realizando tus compras en nuestra @Html.ActionLink("Tienda","Index","Tienda")

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:

CIBERTEC



98

@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:

CIBERTEC



99

@model IEnumerable
@foreach (var g in Model) {
@Html.ActionLink(g.Descripcion,"ListaAlbum","Tienda",new {genero=g.Descripcion},null)
}

37. Actualizamos nuestro _Layout.cstml <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> @ViewBag.Title - Mi aplicación ASP.NET MVC <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")

Tienda de musica

Home

Tienda

@{Html.RenderAction("Resumen", "ShoppingCart");}

@{ Html.RenderAction("MenuGeneros", "Tienda"); }

CIBERTEC



100

@RenderBody()

Construido con MVC 4.0

@Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)

38. Actualizamos la página ListarAlbum.cshtml de la carpeta Views/Tienda, tal como se muestra: @model CarritoMVC.Models.Genero @{ ViewBag.Title = "ListaAlbum"; }

Albumnes de @Model.Descripcion

@foreach(var a in Model.albumes) {
@a.Nombre
}

39. Y finalmente actualizamos la página Index.cshtml de la carpeta Views/Home, tal como se muestra: @{ ViewBag.Title = "Home Page"; }

40. Ejecutamos

CIBERTEC



101

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.

CIBERTEC



102



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

Source

IEnumerable Es el origen de datos que se enlazará al control

columnNames

IEnumerable

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

CIBERTEC

Comentario



103

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 Indica el conjunto de columnas que mostrará el control

exclusions

IEnumerable

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 en que esté habilitada la paginación.

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 en que esté habilitada la paginación.

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

CIBERTEC



104

Uso del control WebGrid 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 LabWebGrid y una ubicación donde se guardará el proyecto. Finalmente damos Aceptar.

2

3


CIBERTEC



105

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 derechoAgregar 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:

CIBERTEC



106

2

3

5. La siguiente pantalla nos indica si vamos a crear el modelo a partir de una base de datos, o si se crea a partir de un modelo vacío. Para este escenario elegimos la opción Generar desde la base de datos y hacemos click en siguiente.

CIBERTEC



107

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.

CIBERTEC



108

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

CIBERTEC



109

8. Los pasos anteriores nos ayudaron a crear nuestro modelo. eEn este escenario se ha construido el modelo a partir de una base de datos existentes. Ahora procedemos a crear el controlador. Sobre la carpeta Controller hacemos click derecho Agregar-Controlador y en el cuadro de dialogo damos como Nombre del controlador “ProductoController”, tal como se muestra:

CIBERTEC



110

9. En el método Index de la clase ProductoController instanciamos nuestro modelo y devolvemos una vista con la lista de productos, tal como se muestra: using using using using using using

System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; LabWebGrid.Models;

namespace LabWebGrid.Controllers { public class ProductoController : Controller { // // GET: /Producto/ public ActionResult Index() { NorthwindEntities MyDB = new NorthwindEntities();

CIBERTEC



111

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:

CIBERTEC



112

1 2

3

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 @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); }
Lista de Productos
@wg.GetHtml()

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

CIBERTEC



113

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 @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); }
Lista de Productos
@wg.GetHtml( columns: new []{ wg.Column("ProductId"), wg.Column("ProductName"), wg.Column("UnitPrice"), wg.Column("Discontinued") } )

CIBERTEC



114

2. Vemos que podemos controlar las columnas que deseamos mostrar, adicionalmente 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 @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); }
Lista de Productos
@wg.GetHtml( columns: new []{ wg.Column("ProductId",header:"ID"), wg.Column("ProductName",header:"Producto"), wg.Column("UnitPrice",header:"Precio"), wg.Column("Discontinued",header:"Devaluado") } )

CIBERTEC



115

3. 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 @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); }
Lista de Productos
@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.ToStri ng("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBox(( string)item.ProductName,(bool)item.Discontinued)) } )

CIBERTEC



116

4. Otro detalle: podemos agregar columnas personalizadas, es decir columnas que no pertenecen al modelo. Vamos a agregar dos columnas, Editar y Eliminar. @model IEnumerable @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); }
Lista de Productos
@wg.GetHtml( columns: new []{ wg.Column("ProductId",header:"ID"), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLin k((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToS tring("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBo x((string)item.ProductName,(bool)item.Discontinued)), wg.Column("",header:"Acciones",format:@ @Html.ActionLink("Editar","","") @Html.ActionLink("Eliminar","","") ) } )

CIBERTEC



117

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 @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); }
Lista de Productos
@wg.GetHtml( columns: new []{ wg.Column("ProductId",header:"ID",canSort:false), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLin k((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToS tring("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBo x((string)item.ProductName,(bool)item.Discontinued),canSort:false), wg.Column("",header:"Acciones",format:@ @Html.ActionLink("Editar","","") @Html.ActionLink("Eliminar","","") ) } )

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

CIBERTEC



118

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 @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model, rowsPerPage:5); }
Lista de Productos
@wg.GetHtml( alternatingRowStyle:"FilaAlterna", columns: new []{ wg.Column("ProductId",header:"ID",canSort:false), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLin k((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToS tring("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBo x((string)item.ProductName,(bool)item.Discontinued),canSort:false), wg.Column("",header:"Acciones",format:@ @Html.ActionLink("Editar","","") @Html.ActionLink("Eliminar","","") ) } )

Filtros y búsquedas

CIBERTEC



119

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 @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model,rowsPerPage:5); }
Lista de Productos
@using(@Html.BeginForm("Index","Producto",FormMethod.Get)) {
Buscar @Html.Label("lblProducto","Producto:") @Html.TextBox("producto")
} @wg.GetHtml( alternatingRowStyle:"FilaAlterna", columns: new []{ wg.Column("ProductId",header:"ID",canSort:false), wg.Column("ProductName",header:"Producto",format:(item)=>Html.ActionLin k((string)item.ProductName,"","") ), wg.Column("UnitPrice",header:"Precio",format:(item)=>item.UnitPrice.ToS tring("0.00")), wg.Column("Discontinued",header:"Devaluado",format:(item)=>Html.CheckBo x((string)item.ProductName,(bool)item.Discontinued),canSort:false), wg.Column("",header:"Acciones",format:@ @Html.ActionLink("Editar","","") @Html.ActionLink("Eliminar","","") ) } )

2. Finalmente, modificamos el método Index de la clase ProductoController, agregando el parámetro de búsqueda producto. using using using using using using

System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; LabWebGrid.Models;

namespace LabWebGrid.Controllers { public class ProductoController : Controller { // // GET: /Producto/

CIBERTEC



120

public ActionResult Index(string producto=null) { NorthwindEntities MyDB = new NorthwindEntities(); IQueryable 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.

CIBERTEC



121

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)

CIBERTEC



122

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

CIBERTEC



123

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. 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 DI y una ubicación donde se guardará el proyecto, finalmente damos Aceptar

CIBERTEC



124

2

3


CIBERTEC



125

4. Empezaremos creando un modelo que esté fuertemente ligado al controlador. Para ello agregaremos desde la base de datos Northwind nuestra clase Customer. Sobre la carpeta Models hacemos click derecho Agregar-Nuevo elemento y en el cuadro de dialogo, en la 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:

CIBERTEC



126

2

3

4

5. La siguiente pantalla nos indica si vamos a crear el modelo a partir de una base de datos, o si se crea a partir de un modelo 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.

CIBERTEC



127

1

2

3

CIBERTEC



128

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.

CIBERTEC



CIBERTEC

129



130

8. Los pasos anteriores nos ayudaron a crear nuestro modelo. En este escenario se ha construido el modelo a partir de una base de datos existentes, ahora procedemos a crear el controlador. Sobre la carpeta Controller hacemos click derecho Agregar-Controlador y en el cuadro de dialogo damos como Nombre del controlador “ClienteController”, tal como se muestra:

CIBERTEC



131

9. En esta 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:

CIBERTEC



132

1 2

3

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 @{ ViewBag.Title = "Index"; WebGrid wg = new WebGrid(Model); }
Lista de Clientes
@wg.GetHtml(columns: new []{ wg.Column("CustomerId","ID"), wg.Column("CompanyName","Direccion"), wg.Column("Address","Direccion"), } )

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

CIBERTEC



133

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:

CIBERTEC



134

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:

CIBERTEC



135

using System; using System.Collections.Generic; using System.Linq; using System.Web; using DI.Models namespace DI.Servicios { public class MiServicioSQL { public List 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() {

CIBERTEC



136

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;

CIBERTEC



137

using System.Text; using System.Threading.Tasks; using DI.Models; namespace DI.Controllers { public interface IServicio { List 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 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() {

CIBERTEC



138

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

CIBERTEC



139

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 using using using using using

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

Cambio de clave
Clave Actual:
Nueva clave:
Confirmar	Confirmar nueva clave:

Lenguaje de Programacion III

Revisa tu compra:

Registro y pago

Checkout Completado

Tienda de musica

Albumnes de @Model.Descripcion

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Clientes

Texto por Default

Deshabilitar

Deshabilitar el Copiar-Pegar

Seleccionar y limpiar todos los items

Vista3

Album	Precio	Cantidad
@Html.ActionLink(item.album.Nombre,"Detalle","Tienda",new {id=item.AlbumId})	@item.album.Precio	@item.Cantidad	Borrar
Total			@Model.Total

Lenguaje de Programacion III

Recommend Documents

Index

Revisa tu compra:

Registro y pago

Checkout Completado

Tienda de musica

Albumnes de @Model.Descripcion

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Productos

Lista de Clientes

Texto por Default

Deshabilitar

Deshabilitar el Copiar-Pegar

Seleccionar y limpiar todos los items

Vista3