ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
Walter Montes Delgado
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA Walter Montes Delgado ©2015 Walter Montes Delgado
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
2
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
3
Tabla de Contenidos ACERCA DEL AUTOR ............................................................. 4 REGISTRO DE CAMBIOS........................................................ 5 INTRODUCCIÓN PERSONAL - PORQUÉ UNA GUÍA INTRODUCTORIA A MVC ...................................................... 7 CAPÍTULO UNO – UNA INTRODUCCIÓN A .NET 2015 Y ASP.NET 5 ................................................................................. 9 CAPÍTULO DOS – EL PATRÓN QUE TODOS AMAN, MVC .................................................................................................. 12 CAPÍTULO TRES – ASP.NET MVC 6 SIN PERDERSE ....... 14 Una pequeña introducción al desarrollo web ........................ 14 ASP.NET MVC 6 ................................................................. 15 VISTAS ................................................................................ 27 CONTROLADORES............................................................ 31 MODELOS ........................................................................... 35 EJERCICIOS ........................................................................ 35 Agregar una nueva vista .................................................... 35 Comunicación cliente hacia servidor ................................ 37 CAPÍTULO CUATRO – CARACTERÍSTICAS AVANZADAS .................................................................................................. 41 Pase de información entre el controlador y la vista ............... 41 Validaciones ......................................................................... 46 Vistas parciales vs ViewComponents (VCs) ......................... 52 Agregando una base de datos ................................................ 58 Usando Dependency Injection .............................................. 65 CONCLUSIÓN......................................................................... 68
ACERCA DEL AUTOR Walter Montes tiene múltiples años trabajando con tecnología Microsoft desde desarrollo de software, instalación y configuración de productos hasta arquitectura de soluciones. Al momento de escribir este libro, es el único Microsoft Most Valuable Professional (MVP) en ASP.NET/IIS de Centroamérica. Además de ser el administrador de la comunidad oficial de desarrolladores .NET en Costa Rica CR Developers .NET. Cuenta con su propio blog en tecnología Microsoft y Open Source en la siguiente dirección: http://waltermontes.com
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
4
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
5
REGISTRO DE CAMBIOS Esta es la segunda versión de este libro, la cual incluye arreglos, comentarios extra y todo lo liberado de manera oficial en Visual Studio 2015 RTM para MVC 6. Trataré de enumerar la mayoría de cambios “impactantes” en esta sección para que si ya leíste la versión 1, puedas enfocarte solamente en lo nuevo. Si lees este libro por primera vez puedes ignorar esta sección y pasar al siguiente capítulo. Gracias especiales a todas las personas que leyeron la primera versión de este libro, se suscribieron e inclusive enviaron agradecimientos y retroalimentación. Ya que al día de hoy el libro tiene más de 615 descargas y más de 120 suscriptores. Lo interesante es que actualmente el cambio entre una versión Release Candidate (RC) – versión con la cual liberé la primera versión de este libro – y la versión Release to Manufacturing (RTM) – versión con la cual libero esta segunda versión – no varían demasiado entre sí, ya que Microsoft ha sido muy abierto durante el proceso de desarrollo y liberado anticipadamente cada nueva característica. Cambios:
Cambio de formato o Decidí transcribir el libro a un documento PDF regular. Inicialmente así comencé a escribirlo y casi lo terminé, sin embargo me recomendaron transcribirlo a un formato más compatible con múltiples dispositivos de manera “nativa” por eso opté por utilizar el editor en línea de leanpub, sin embargo el formato de markdown que utiliza no es muy flexible y el editor tiene ciertos problemas que me inclinaron a volver a un formato más de PDF normal.
A partir de la sección ASP.NET MVC 6 he actualizado las imágenes para que calcen con lo que se encontrarán en Visual Studio 2015 RTM. Mayor detalle con respecto a GULP, qué es y para qué sirve en la sección ASP.NET MVC 6. Mayor detalle con respecto a Dependency Injection, qué es y para qué sirve en la sección ASP.NET MVC 6. Mayor detalle en los ejemplos. Mayor detalle con respecto a Entity Framework, qué es y para qué sirve en la sección Agregando una base de datos. Un ejemplo de cómo utilizar el contenedor de Dependency Injection que viene por defecto en ASP.NET 5 en la sección Usando Dependency Injection. Carga del ejemplo a mi cuenta de GitHub para que puedan descargarla: https://github.com/walmon/MVC6UNAGUIAINTROD UCTORIA
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
6
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
7
INTRODUCCIÓN PERSONAL PORQUÉ UNA GUÍA INTRODUCTORIA A MVC Para nadie es un secreto que .NET Framework de Microsoft es una plataforma lo suficientemente robusta como para soportar millones de aplicaciones críticas en las organizaciones, que además estará con nosotros por muchísimos años en el futuro. Con el crecimiento de la internet, Microsoft ha escuchado a los desarrolladores, empresas y emprendedores, a raíz de esto ha orientado el desarrollo de su Framework hacia algo que hoy en día con .NET 2015 es una plataforma de desarrollo abierta, inclusiva y multiplataforma. Sumado a todo esto que se ha ido viendo en los últimos años con la plataforma de Microsoft, está la orientación de ASP.NET hacia el software abierto y a cumplir y trabajar agradablemente con estándares mundiales que otras plataformas implementan. Prueba de esto fue el nacimiento de ASP.NET MVC, el cual le permite a los desarrolladores poder separar mejor las responsabilidades de un sistema, conocer completamente el markup de su aplicación y a entender como es la comunicación entre el cliente y el servidor, permitiendo optimizar sus sistemas. Es por esto que he tomado la decisión de aportar a la comunidad hispana con un libro sencillo y al grano de ASP.NET MVC 6, para ayudarles a esas personas que apenas están entrando al mundo de MVC a entender este patrón y que las personas que ya lo conocen que puedan validar fundamentos básicos mientras logran adentrarse un poco más. Previo a iniciar a leer este libro sería ideal que ya conozca las siguientes tecnologías al menos a un nivel básico:
C# HTML
CSS JavaScript
Todo lo presentado en este libro representa mi punto de vista personal y no busca representar a ningún empleador ni a Microsoft como corporación.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
8
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
9
CAPÍTULO UNO – UNA INTRODUCCIÓN A .NET 2015 Y ASP.NET 5 Antes de entrar en materia, es importante entender los cambios que .NET Framework está teniendo para conocer cómo impacta esto a ASP.NET. Probablemente mucha de la información que será presentada a continuación pueda ser confusa si estás empezando en .NET o ASP.NET, así que el consejo sería que más adelante vuelvas a esta sección y le des otra leída posterior a finalizar el libro. .NET 2015 es el nombre que se le da a la nueva versión de .NET Framework y un buen punto de arranque es ver un diagrama como Microsoft presenta esta nueva versión liberada.
Vista de alto nivel de .NET 2015 Durante este libro se tomará un enfoque principalmente en a donde está ubicado ASP.NET dentro de esta “sombrilla” pero igualmente les insto a conocer todo el mapa de .NET Framework y en mi parecer personal, principalmente sobre C# 6, Roslyn, CoreCLR y .NET Native.
Lo más notorio de este diagrama es la separación de .NET Framework en dos bloques: .NET Framework 4.6 y .NET Core 5. .NET Framework 4.6: Continúa el trabajo que trae .NET 4.5.2 con muchísimas mejoras alrededor del framework. Se puede ubicar como el framework que viene incluido en el sistema operativo, en este caso en Windows 10 y el cual recibe actualizaciones a través del conocido Windows Update. Es importante notar que sobre .NET Framework 4.6 están las tecnologías WPF, Windows Forms y ASP.NET versiones 4 y 5. .NET Core 5: Microsoft lo describe como un “framework modular”, el cual llega a nosotros como una versión de software abierto, el cual puede ser desplegado de manera modular y local, además de ser mucho más ligero. Al ser modular busca también ser multiplataforma, corriendo en Windows, Linux y OSX. A diferencia de .NET Framework 4.6, .NET Core 5 permite correr aplicaciones ASP.NET solamente en la versión 5 y Universal Windows Apps con .NET Native. De esta forma ASP.NET se ubica de la siguiente manera dentro del universo .NET.
Donde está ASP.NET 5 en el universo .NET Con ASP.NET 5 corriendo en ambas “ediciones” del framework se logra desplegar y desarrollar aplicaciones web tanto en Windows (sobre .NET Framework 4.6 o corriendo lado a lado sobre .NET Core 5 con otra versión de .NET Framework instalada en el servidor) como en Linux y OSX.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
10
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
11
A este punto .NET Core 5 soporta solamente ASP.NET MVC en C#, es decir, no Web Forms ni VB.NET. Esto no significa que no pueda ser que Microsoft incluya soporte a Web Forms o VB.NET en el futuro. Por otro lado .NET Framework 4.6 si continúa soportando el modelo de desarrollo en Web Forms y el lenguaje de programación VB.NET. Algunas de las características más notables de ASP.NET 5 es la unificación de MVC, Web API y Web Pages en un solo modelo conocido como MVC 6. Otra importante adición es la integración con herramientas populares de desarrollo web como Bower, Grunt y Gulp, los cuales ya se podían utilizar con otros frameworks de desarrollo como PHP, Node.JS y Ruby.
CAPÍTULO DOS – EL PATRÓN QUE TODOS AMAN, MVC Modelo Vista Controlador, es lo que las siglas MVC representan, y su objetivo principal es lograr la separación entre estos tres “personajes”, lo cual permite, a través de este patrón de diseño, crear aplicaciones robustas tomando en consideración buenas prácticas aprendidas de otras plataformas de desarrollo y del propio Microsoft.
Modelo Vista Controlador La separación de conceptos busca precisamente que cada “bloque” de la aplicación realice solo el trabajo que le corresponde, así logra obtener otras ventajas tales como mantenibilidad del sistema, extensibilidad y crecimiento ordenado. Así como otros patrones ya buscan logra esto, tales como programación en N-Capas, MVC puede seguir estos lineamientos como separación de proyectos para distribuir componentes ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
12
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
13
comunes. Todo esto es porque MVC como tal es un patrón, no una tecnología.
Vista: La vista es el conjunto de markup de la aplicación, es decir el HTML. En ASP.NET MVC este markup es pre renderizado a través de una tecnología llamada Razor, la cual permite, entre otras cosas, ejecutar lógica previa a renderizar el HTML que será enviado al cliente. Con Razor esta compilación o renderización ocurre del lado servidor. No debería incluir ningún tipo de lógica de negocio, sino más bien lógica propia de interacción con el usuario, como iterar una lista (List) y presentar una lista ordenada (ul) de ítems al usuario. Modelo: Son los objetos de dominio o negocio de la aplicación, más adelante, veremos que no es necesario que esté en el mismo proyecto que la aplicación web. Controlador: El controlador se encarga de recibir solicitudes y ser el punto de entrada de la aplicación, a través de lo que se conoce como acciones (Actions). Se basa en solicitudes HTTP y puede responder con datos o con contenido, como HTML.
CAPÍTULO TRES – ASP.NET MVC 6 SIN PERDERSE Una pequeña introducción al desarrollo web Esta sección es una introducción básica y esencial de desarrollo web, si ya estás familiarizado con desarrollo web en otras tecnologías, probablemente no sea necesario que pases por esta sección. En el desarrollo web, se trabaja con un servidor que responde archivos e información y un navegador que ejecuta y lee los archivos. Por ejemplo:
El cliente inicia una solicitud por HTTP al servidor, por ejemplo http://www.bing.com, y el servidor, a través de ASP.NET procesa la solicitud, contacta bases de datos y demás, y retorna páginas HTML renderizadas, archivos CSS, JavaScript y medios (imágenes, videos, etc). HTML: markup de la página JavaScript: lógica de lado cliente (pc de usuario) CSS: hojas de estilo La comunicación entre el cliente y el servidor se realiza a través de HTTP por lo que cada solicitud se conforma de una solicitud ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
14
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
15
(request) y una respuesta (response). Las solicitudes web tienen como mínimo un encabezado (header) y un cuerpo (body). El encabezado indica dirección de la solicitud, tipo de solicitud e información del contenido aceptado, entre otros; y el cuerpo incluye información que se envía al servidor. De esta forma el tipo de solicitud se define a través de un verbo HTTP que indica el tipo de solicitud, los principales verbos que se deben conocer son:
GET: usualmente conocido como verbo “obtener”, no incluye cuerpo POST: solicitud de envío de información, debe ir acompañado de un cuerpo de contenido, por ejemplo una imagen o un JSON PUT: similar al POST, sin embargo se utiliza para cuando se realizan actualización de recursos DELETE: similar al en estructura al GET, pero el servidor debe entender que se busca remover el recurso que se consulta en lugar de retornarlo
ASP.NET MVC 6 ¿Qué mejor forma de comenzar a aprender una tecnología que ir directo al código y explorarlo? Pues ese será el siguiente pasó en este libro. Durante todo el recorrido se irán mencionando algunos conceptos importantes y al final un par de ejemplos. Antes de comenzar, es importante entender que una plantilla de Visual Studio, no es más que una serie de DLLs que funcionan para un fin específico incluidas en un proyecto + una base de código configurativa de la tecnología + uno o varios ejemplos de código. Es decir, si uno quisiera hasta podría empezar un proyecto sin necesidad de seleccionar un template de Visual Studio.
La forma de “unificar” archivos en forma de proyecto es a través de archivos con extensión .csproj o .vbproj, los cuales a su vez se pueden agrupar en una solución con archivos extensión .sln. Para entender un poco más de archivos de proyecto y su funcionalidad.
Estructura de solución Archivos no específicos de usuario: archivos propios del software, que pueden ser controlados por un manejador de versiones tal como TFS o Github.
-sln .csproj o .vbproj
Archivos específicos de usuario: archivos propios el software desarrollado para el usuario de sistema actual. No son controlados por controladores de versiones.
-suo .csproj.user o .vbproj.user
Volviendo al tema de ASP.NET MVC el proceso de creación de un proyecto basado en una plantilla es sencillo, en Visual Studio > File/Archivo > New/Nuevo> Project/Proyecto
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
16
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
17
Nuevo Proyecto El siguiente paso es seleccionar la plantilla de MVC 6, debe fijarse que seleccione .NET Framework 4.6 y colocar un nombre de proyecto y de solución acorde a sus necesidades ya que este será el nombre de espacio que seguirá su proyecto (orden interno del proyecto). Usualmente y por estándar de Microsoft se nombra el nombre de espacio de la siguiente forma
Definición de la plantila MVC 6 Para los que vienen desde versiones anteriores previo a Visual Studio 2012, ha visto un par de cosas nuevas, entre ellas, que no tuvieron que seleccionar el tipo de proyecto (Web Forms, MVC o Web Pages), sino que se selecciona un proyecto de tipo ASP.NET, esto es por un cambio que se dio en el 2013, en el cual aparece el término ONE ASP.NET, el cual busca que se puedan crear proyectos con tecnología Web Forms y MVC/Web API en un solo proyecto de Visual Studio, a diferencia de como anteriormente solo se podía seleccionar un tipo. La siguiente pantalla que aparece a continuación da la opción de seleccionar una nueva plantilla de proyecto ASP.NET 5. En este caso se debe seleccionar Web Site, el cual crea una plantilla para un sitio web MVC y Web API.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
18
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
19
Tipo de Proyecto ASP.NET En la imagen anterior se ha resaltado la opción “Change Authentication” para dar un poco de énfasis a esta opción. Si se le da clic a este botón, aparece la siguiente pantalla.
Cambiar autenticación Esta ventana da la opción de seleccionar la estrategia de autenticación, por lo cual se debe tener de antemano una idea de
la estrategia de autenticación y autorización del sistema. Esto porque más adelante se puede cambiar, sin embargo puede ser un poco complicado si no se conoce bien a detalle cómo se implementa cada modelo, ya que al seleccionar una opción se crean las clases y configuraciones de ASP.NET y/o IIS para procesar un modelo de autenticación. ¿Cómo determinar el modelo de autenticación?
No Authentication: en caso de que no se requiera autenticación o se desee implementar un tipo especial de autenticación Individual User Accounts: en caso de que se quiera contar con usuarios propios para el sistema, es decir, con una base de datos SQL Server que almacene usuarios y contraseñas de manera segura y con buenas prácticas, y/o cuando se quiere autenticar usuarios con una tercera parte, tal como Facebook, Twitter, Google o Microsoft. Work And School Accounts: permite autenticar con proveedores de autenticación empresiales, tal como Azure Active Directory o Active Directory Federation Services.
Windows Authentication: en ambientes corporativos cuando las computadoras clientes están en un dominio en Active Directory Domain Services, de esta forma no se
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
20
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
21
solicita al usuario autenticarse, sino que se utilizan los credenciales de Windows. Para la demostración se va a dejar marcada la opción de Individual User Accounts, el cual utiliza el Simple Membership Provider para obtener autenticación de usuarios en una base de datos SQL Server en LocalDB (más adelante se ahondará un poco más en este tema). Al terminarse de aprovisionar el proyecto es probable que el nodo “References” aparezca de esta forma References (Restoring) por unos segundos mientras se terminan de descargar y aprovisionar las DLLs necesarias. Al finalizar se deberá ver una estructura de folders y archivos similar a la de la imagen de la derecha. En esta nueva versión de .NET y Visual Studio, NuGet toma mucho protagonismo, ya que se busca que con .NET Core solo se traiga lo mínimo necesario y lo demás que se ocupe sea descargado a través de NuGet. Esta nueva estructura es muy similar a las de los proyectos en Github o Codeplex.
Estructura Proyecto Los primeros niveles son:
Solutions Items src
El primer archivo global.json dentro del folder Solution Items es el archivo que contiene la información del proyecto para Visual Studio u otras herramientas, en este caso el archivo está casi vacío, solo contiene información de las carpetas y versión del SDK. Para los que vienen de versiones anteriores de .NET ver archivos configurativos con extensión JSON es algo totalmente nuevo, por otro lado para los que vienen de otras plataformas como Node.JS es algo muy común y natural.
Archivo global.json En el siguiente folder src donde se ven los archivos propios del proyecto, como ya se han conocido anteriormente. Dentro del folder src parecen los proyectos de la solución, en este ejemplo solo existe el proyecto de Interfaz de Usuario “wm.website.ui”. En este nuevo proyecto de MVC 6 aparece un folder llamado wwwroot (nuevo en esta versión), el cual contiene archivos que no deben ser compilados, tales como hojas de estilo (CSS), imágenes y archivos de JavaScript.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
22
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
23
Folder wwwroot A nivel de raíz de proyecto hay otros archivos extensión .json, tales como bower.json, config.json, package.json y project.json. ¡Sí! No hay web.config por defecto, sin embargo ASP.NET 5 soporta archivos configurativos en formato XML, INI o JSON. Para tratar de entender todo este cambio configurativo se hará un pequeño overview de cada archivo.
bower.json El archivo bower.json, contiene, como su nombre lo dice, configuraciones propias de bower. ¿Qué es bower? Bower, al igual que NPM son administradores de paquetes, algo así como NuGet pero se comparten entre diferentes tecnologías ya que usualmente no dependen de la tecnología backend. En este caso Bower permite manejar dependencias de lado cliente, tales como jquery, bootstrap, etc. config.json, package.json y project.json Entre estos archivos prácticamente se distribuyen las configuraciones que anteriormente existían en el archivo web.config. Si eres nuevo en desarrollo web sobre .NET, el web.config era un archivo XML que contenía configuraciones propias del proyecto. Durante este libro no se va a ahondar tantísimo en cada detalle nuevo, más bien, se intentará que sea algo más funcional y directo a entender lo mínimo necesario de ASP.NET 5. El archivo Startup.cs es el que invoca los .json e inyecta dependencias necesarias (más adelante se conversará un poco más al respecto). Gulp El desarrollo web moderno utiliza herramientas que permiten crear mejores aplicaciones (más veloces, optimizadas y seguras). Anteriomente se mencionaron Grunt y Gulp por encima, voy a tratar de ahondar un poco más en Gulp que es el task runner incluido por defecto. Un task runner es permite automatizar un flujo de desarrollo web para crear N cantidad de tareas a ejecutarse en diversos puntos de ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
24
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
25
la compilación, tales como procesar archivos de LESS o SAAS (preprocesadores de estilos que permiten estructurar mejor los estilos de un sitio, utilizar variables para tener un código más mantenible, incrustar lógica, entre muchas otras opciones) y convertirlos en el CSS que el navegador entiende, procesar archivos de CoffeeScript o TypeScript y convertirlos en el JavaScript que el navegador entiende, minificar y ofuscar el código, correr librerías como JSLint (verifica buenas prácticas en el código JavaScript), entre muchísimas más cosas. Por ejemplo en este caso el archivo si abrimos el gulpfile.js vemos una serie de tareas como minificación y limpiado de archivos css y JavaScript.
Dependency Injection El patrón Dependency Injection o Inyección de Dependencias existía en MVC, Web API y SignalR desde antes, sin embargo no de manera tan explícita ni tan consistente. Es por esto que ASP.NET 5 se unificó esta sección de manera más consistente. Dependency Injection permite acceder a servicios en diferentes puntos de la ejecución de un sistema, por ejemplo en controladores o apenas inicia la aplicación. Además trae un contenedor de Dependency Injection que permite consolidar el sistema y sus configuraciones. Más adelante mostraré un ejemplo de cómo utilizar Dependency Injection con la abstracción por defecto de ASP.NET 5, sin embargo esta puede ser reemplazada por otro contener como Ninject o Autofact.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
26
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
27
Entrando ya en temática de propia ya de MVC, se pueden observar los folders Controllers, Views y Models. Para correr inicialmente la plantilla se debe presionar F5 y se podrá observar la nueva plantilla corriendo. Este template ya tiene incluidas las librerías jQuery y Bootstrap, además de otras más. Por lo cual ya trae un diseño inicial y unas páginas iniciales que responden solicitudes a través de controladores.
Ejecución básica
VISTAS Lo primero que se verá en esta línea serán las vistas y cómo funcionan entre sí. ¿Dónde están ubicadas? En el folder Views. ¿Qué extensiones tienen? .cshtml o .vbhtml dependiendo del lenguaje de programación, si es C# la extensión es cshtml, si es Visual Basic la extensión es vbhtml. ¿Qué lenguaje se utiliza? HTML a través del pre compilador de HTML llamado Razor.
Todo website tiene ciertos componentes que se repiten entre páginas, tipo “marco”. En Web Forms se le conocía como MasterPage, en MVC se le conoce como _Layout. Usualmente estas secciones incluyen partes como encabezados, pie de página y menús de navegación. Por ejemplo en la imagen de la derecha lo que está en celeste sería el layout.
Layout layout.cshtml Este archivo incluye todo el marco y plantilla HTML, es decir, tags como , Al abrir este archivo se puede apreciar algo nuevo en esta versión de ASP.NET, el tag “environment” el cual permite, según el despliegue que se realice, agregar unos u otros archivos de scripts y hojas de estilos. Por ejemplo para el momento de desarrollo sirven los archivos fuentes iniciales, sin embargo en producción usualmente los archivos que se envían a un usuario son los archivos de hojas de estilo y scripts minificados y obfuscados. Esto para evitar el uso innecesario de ancho de banda y complicar la lectura del código fuente que se descarga del lado cliente y que durante desarrollo se pueda realizar depuración de código JavaScript.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
28
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
29
Etiqueta Environment Al investigar un poco más el archivo se puede encontrar la sentencia @RenderBody() en esta parte del HTML se renderizará el resto de páginas que utilicen este archivo de layout. La manera de asignar este layout a diferentes páginas es a través de una variable llamada Layout. Es decir si en alguna vista se asigna algún valor a esa variable global, esa página utilizará ese archivo de layout. Con el siguiente diagrama se intentará explicar un poco más claro esto.
Renderización vista Como se pudo notar al ejecutar el proyecto, la página que fue retornada ya traía un layout y contenido renderizado, esto es porque por defecto cada vista creada tiene un layout por defecto. Esta configuración se realiza en el archivo _ViewStart.cshtml. Es decir, si no se indica explícitamente en cada vista cual archivo de
layout utilizar, la vista utilizará el que se indique en el archivo _ViewStart.cshtml
Asignación Layout La sentencia anterior definida por @{ }
Permite incrustar código C#, se conocen como bloques de código (code blocks) y permiten ejecutar lógica, por ejemplo:
Bloque de código El símbolo @ también permite utilizar también lo que se conoce como Tag Helpers. Los cuales básicamente renderizán bloques de HTML basándose en cierta lógica, fuera de caja se incluyen los conocidos como HTML Helpers. Existen diferentes Tag helpers que se pueden utilizar por ejemplo optar por el que ha venido desde versiones anteriores:
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
30
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
31
HTML Helper O utilizar uno de los nuevos tag helpers que permite un código más “limpio” al utilizar atributos de HTML. Por ejemplo:
Nuevo Tag Helpers Al fin y al cabo ambos renderizan al final el siguiente bloque de código HTML: Click here to Log in.
Vistas de contenido Las vistas contienen el HTML base + lo renderizado por el Razor. Su contenido dependerá de la información que se desea mostrar, más adelante se mostrará cómo se asocia con un controlador y con un modelo.
CONTROLADORES Un controlador se conforma de una clase con funciones que responden solicitudes HTTP. La clase equivale al nombre del controlador y la función equivale al nombre de la acción. Nombre de Clase = Controlador Nombre de Función = Acción Por ejemplo en el archivo Controllers/HomeController
Clase de controlador De esa manera, se crea un extremo (endpoint web) que puede ser consultado a través de un cliente que pueda realizar solicitudes HTTP (un navegador, un robot, un dispositivo). Por ejemplo según la imagen anterior en HomeController existen las siguientes 2 rutas que responden solicitudes, acorde a la siguiente convención http://localhost:// http://localhost:/Home/Index http://localhost:/Home/About
(*) nota: La palabra “controller” en la clase es removida del nombre. Así las solicitudes web se resuelven de la siguiente forma:
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
32
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
33
Procesamiento solicitudes web Entra la solicitud iniciada desde el cliente (pc o dispositivo), el servidor busca que haya una ruta que responda a esa url y responde el acción que corresponde. Como pudieron notar al ejecutar este proyecto la url http://localhost:/ respondió una página a pesar de que no se indicó explícitamente el Controlador ni la acción, esto es porque al definir la convención de ruta se especifican unos valores por defecto. De la siguiente forma:
Si no se indica la acción que se busca alcanzar, se utiliza por defecto la que se llame Index Si no se indica el controlador que se busca alcanzar, se utiliza por defecto la que se llama Home
Esto se define a través del archivo Startup.cs en el siguiente bloque de código:
Plantilla de ruteo En esa sección de código se define la convención a seguir, es decir {controlador}/{acción}/{id opcional}
El controlador en el tipo de función define qué tipo de dato se retornará al cliente. Por ejemplo en el homecontroller, todas las acciones responden un tipo de dato IActionResult, en este caso todas las funciones retornan un objeto de tipo View.
Plantilla de ruteo La función View se puede colocar sin pasar parámetros por lo cual la función buscará una vista que esté en el folder Views//. En este caso retornará la vista que esté ubicada en Views/Home/About. Sin embargo también se puede indicar explícitamente el nombre de la vista que ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
34
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
35
se desea retornar. La función buscará un archivo con el nombre indicado en el parámetro en varios folders del proyecto, por ejemplo View("About") y al encontrar la vista, la retornará al cliente. A pesar de todo esto, en lugar de un View se pueden retornar cualquier tipo de datos que herede de IActionResult. Comentarios de código Existen 3 tipos de comentarios en Razor:
Comentarios HTML, son retornados al cliente en el HTML o Comentarios internos, no son retornados al cliente o * @* este es un comentario *@ * Comentarios dentro de bloques de código, no son retornados al cliente HTML o @{ // este es un comentario }
Es importante saber qué tipo de comentario utilizar, para evitar estar retornando al cliente comentarios internos.
MODELOS Los modelos son clases que representan objetos de dominio y pueden ser utilizados por la lógica de negocio y acceso a datos para manipular información. Están ubicado en la plantilla en el folder Models.
EJERCICIOS Agregar una nueva vista Para este ejercicio se necesitará una nueva vista que sea retornada al hacer una consulta HTTP a un url.
1. En el archivo Controllers/HomeController.cs crear una función que permita retornar una nueva vista public IActionResult VistaPersonalizada() { return View(); }
2. Posterior a crear el extremo que ya recibe las solicitudes web, se debe crear una vista que sea retornada por la función View.
3. Escribir algún contenido en la vista recién creada
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
36
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
37
4. Probar el código ejecutando el proyecto (F5) y navegando a la ruta: http://localhost:/home/vistapersonalizada
5. Disfrutar el resultado
Comunicación cliente hacia servidor Para este ejercicio se necesitará un formulario apuntando a través de un método de tipo post a una acción en Home y este retornará una vista. 1. En el archivo Views/Home/Index.cshtml agregar un formulario apuntando a una acción del controlador Home, al comienzo del archivo
Submit 2. Crear la acción que responda a esta solicitud, en el archivo Controllers/HomeController.cs agregar una función como la siguiente [HttpPost] public IActionResult SubmitForm(string nombre, int edad) { var nombreRecibido = nombre; var edadRecibida = edad; return View("Index"); }
3. Crear un breakpoint en la línea de código de la función.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
38
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
39
4. Ejecutar el código, ingresar datos y dar clic a submit.
5. Visual Studio detectará el Breakpoint y este permitirá ver si se pasaron correctamente los valores.
¿Qué se puede notar del ejercicio anterior?
Los atributos personalizados asp-controller y aspaction, los cuales renderizan en el atributo action=”Home/SubmitForm” El uso del atributo name en los inputs para ser relacionado con los parámetros de la función, el cual permite realizar la “liga” entre los valores enviados por el formulario con los recibidos en la función. De esta forma si hay un input con el atributo name y la acción a la que
se apunta recibe un parámetro con el mismo nombre al valor del atributo name, ASP.NET los relaciona y asigna el valor a la variable. El uso del atributo [HttpPost] en la función SubmitForm, el cual diferencia que esta acción responderá solo a solicitudes de tipo POST. o Si no se indica este atributo en la función, por defecto se creará la función respondiendo a solicitudes tipo GET.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
40
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
41
CAPÍTULO CUATRO – CARACTERÍSTICAS AVANZADAS En el capítulo anterior se hizo un recorrido inicial por ciertas funcionalidades principales de ASP.NET MVC 6. En el cual se pudo conocer lo básico de cada componente y cómo lograr comunicación y empezar a extender el proyecto básico.
Pase de información entre el controlador y la vista
Para compartir información entre una acción y una vista existen diversas estrategias que se pueden utilizar, tales como: ViewData permite pasar datos entre un controlador y una vista, solo sobrevive durante el solicitud actual ViewBag es una propiedad dinámica que permite utilizar “dynamics” de C# 4.0, solo sobrevive durante la solicitud actual. Usualmente sirve para pasar datos sencillos. TempData permite pasar información entre solicitudes subsecuentes (por ejemplo redirección) Modelo este modo permite asignar a una vista un modelo específico y pasarla por parámetros al retornar la vista
Esta sección busca explicar un poco más como utilizar Razor y hacer algunas cosas un poco más complejas tales como renderizar listas y pasar información por ViewBag. Adentrándonos a Razor, renderizar una lista. 1. Crear un controlador llamado ItemsController.
2. Crear un folder en la ruta Views/Items y una vista llamada Index dentro de ese folder. 3. Crear un modelo llamado Items con el siguiente contenido. Clic derecho en el folder Models > Add > New Item…
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
42
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
43
4. Y se debe agregar este contenido. public class Item { public int Id { get; set; } public string Nombre { get; set; } }
5. En el controlador Items en la acción Index se deben crear algunos ítems de prueba para luego renderizarlos en la vista, de la siguiente forma. Además debe agregar la referencia a la clase Item.
List items = new List(){ new Item() { Id=1, Nombre="Item1" }, new Item() { Id=2, Nombre="Item2" }, new Item() { Id=3, Nombre="Item3" }};
Con el cursor sobre el texto “Item” que muestra el error presiona Ctrl+. para mostrar el menú de sugerencias.
6. Para renderizarlos en la vista Index, se debe pasar a través de parámetros de la sentencia View(), en el mismo archivo ItemsController, posterior a inicializar la lista.
return View(items);
7. Cree una vista nueva en un folder en Views/Items llamada Index.cshtml. 8. A la vista (opcionalmente- y para este ejemplo) se le debe indicar que utilizará este tipo de modelo, para esto se usa la sentencia @model al comienzo del archivo de vista. En el archivo Views/Items/Index borre todo el contenido y agregue la siguiente línea de código. @model List
9. Lo siguiente sería iterar en la lista que está siendo retornada y renderizar uno a uno los ítems. Use el siguiente bloque de código para este fin. Como podrá
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
44
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
45
notar se utiliza el carácter @ para ejecutar lógica en el archivo Razor. @foreach(var item in Model) { id: @item.Id nombre: @item.Nombre }
10. Ahora ejecute la aplicación (F5) y vea el resultado en el navegador en la dirección http://localhost:/Items/
11. Pasar información por ViewBag 12. En el mismo controlador, agregue la siguiente línea de código dentro de la acción Index en cualquier parte antes de la sentencia View. ViewBag.Mensaje = "¡Este valor es pasado por ViewBag!";
13. En la vista agregue un poco de markup para mostrar el valor en la vista de la siguiente forma.
@model List @ViewBag.Mensaje @foreach(var item in Model) { id: @item.Id nombre: @item.Nombre }
14. Ahora ejecute la aplicación (F5) y vea el resultado en el navegador en la dirección http://localhost:/Items/
Validaciones En un sistema robusto, debe existir validaciones de datos de lado cliente y de lado servidor, si bien estas se pueden crear manualmente, “uno a uno”, esta tarea puede ser un poco engorrosa y compleja de mantener. Para esto ASP.NET MVC cuenta con una librería llamada DataAnnotations la cual permite definir qué validaciones se necesitan en el formulario de lado servidor y a través de jQuery Validate validar lado cliente. Las dataannotations ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
46
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
47
están en el nombre de espacio System.ComponentModel.DataAnnotations y permiten no solo especificar cierta información de validación, sino también ciertos metadatos que Razor entenderá, como cual texto mostrar en el label. DataAnnotations 1. Vaya al archivo Models/Item.cs y reemplace el contenido de la clase por el siguiente. using System.ComponentModel.DataAnnotations; namespace .Models { public class Item { [Required(ErrorMessage = "El identificador del ítem es obligatorio")] public int Id { get; set; } [Required(ErrorMessage ="El nombre del ítem es obligatorio")] [Display(Name ="Nombre de ítem")] [MaxLength(10, ErrorMessage ="El nombre del ítem no debe superar los 10 caracteres")] public string Nombre { get; set; } } }
2. Nuevamente posicione el cursor sobre una línea que tenga un error y presione Ctrl+.
De lo anterior se puede resaltar lo siguiente:
La inclusión del nombre de espacio DataAnnotations. El atributo sobre las propiedades de clase Required el cual permite definir que sea un campo requerido, así jQuery validate podrá colocarlo como requerido. Incluye la propiedad ErrorMessage, el cual permite agregar un mensaje personalizado en caso de que no se cumpla la condición indicada. El atributo Display que permite cambiar la forma en que en un label se mostrará el nombre del campo. El atributo MaxLength es uno de muchos otros atributos que se pueden agregar a propiedades de clase para definir características.
3. Para poder probar una validación debe primero existir un formulario de ingreso de datos. Para esto cree dos acciones en el controlador ItemsController. Uno para retornar el HTML y otro para recibir el submit del formulario. De la siguiente manera. public IActionResult Crear() { return View(); } [HttpPost] [ValidateAntiForgeryToken] public IActionResult Crear(Item nuevoItem) { return View(nuevoItem); }
De lo anterior se puede resaltar lo siguiente:
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
48
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
49
Dos acciones, una para retornar el formulario vacío y otro para recibir los datos del submit. El atributo [ValidateAntiForgeryToken] el cual permite evitar ataques de CSRF. Debería ser utilizado siempre en las solicitudes de tipo POST o PUT. Un retorno en el POST de la sentencia View() con el modelo que ingresó por la solicitud, es decir, se retorna el formulario con la información previamente ingresada.
4. Cree una vista en el folder /Views/Items llamada “Crear” 5. Agregar la información del formulario HTML @model Item Submit @section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial"); } }
De lo anterior se puede resaltar lo siguiente:
El formulario con el asp-action y asp-controller como ya se mencionó anteriormente para indicar cual extremo contactar. El atributo asp-anti-forgery para que el formulario sea compatible con el atributo anteriormente agregado [ValidateAntiForgeryToken] y así evitar ataques de CSRF. Con respecto a la versión RTM ahora se utiliza un valor de asignación “true” o “false”. El @model asignado es de tipo Item, esto le da el contexto al formulario para saber que será un formulario para ese tipo de dato. El atributo asp-validationsummary="ValidationSummary.All" el cual si existen errores en el formulario generará un tipo resumen de todos los problemas. El atributo asp-for en labels e inputs, el cual extrae los metadatos agregados a través de las propiedades de clases y DataAnnotations y los renderiza, por ejemplo, asigna el tipo de dato del input, el label, y mensajes de error. La sección Scripts, que permite renderizar los scripts de jQuery Validate que interceptan un submit y validan de lado cliente un formulario.
6. Agregue un breakpoint en el action que recibe la solicitud, es decir, el que tiene le atributo HttpPost y corra el proyecto (F5). En el formulario, sin llenar ningún campo de clic en submit.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
50
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
51
7. Ingrese valores que cumplan con las especificaciones de validación y realice el submit. Debería llegar al breakpoint con los datos ingresados. 8. Lo que se acaba de realizar es validación de lado cliente, la cual puede extenderse del lado servidor con la siguiente sentencia en la acción post del crear. Esto en caso de que alguien intente burlar nuestra seguridad modificando el JavaScript y HTML en el navegador del usuario. [HttpPost] [ValidateAntiForgeryToken] public IActionResult Crear(Item nuevoItem) { if (ModelState.IsValid) { // guardar en la base de datos return RedirectToAction("Index"); } return View(nuevoItem); }
9. La variable ModelState permite validar el estado de lo que se haya utilizado como contexto del formulario. Si los datos se ingresan correctamente, el ModelState.IsValid será true, de caso contrario será un false.
Vistas parciales vs ViewComponents (VCs) Los VCs son muy similares a lo que en versiones anteriores se conocían como Vistas parciales, las cuales buscan renderizar pequeños bloques de HTML, sirve en casos en los que se requiera manipular pequeñas porciones de una página, por ejemplo con manejo asincrónico de una página. La principal diferencia es que un ViewComponent es mucho más poderoso que una Vista Parcial debido a las formas de manipular la comunicación. Ejemplo de Vista Parcial 1. Crear una vista en el folder Views/Shared que será invocada desde el _Layout.cshtml
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
52
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
53
2. Reemplace todo el contenido por el contenido a continuación (el css se agrega en el mismo archivo solamente por simplicidad, no es una buena práctica bajo ninguna razón) Noticias Costa Rica en el puesto #13 de FIFA Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient! Nuevo ASP.NET 5 Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient!
¡Hololens está aquí! Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient! .bannerNoticias { border:solid 1px #aaa; border-radius:10px; padding:12px; } .bannerNoticias .noticias { display:inline-block; float:left; max-width:200px; font-size:12px; } .clearer{ clear:both; }
3. En el archivo de Layout, inserte la siguiente línea de código debajo de la sentencia @RenderBody @RenderBody() @await Html.PartialAsync("_bannerNoticias")
4. Ejecute el proyecto (F5) y podrá apreciar una Vista parcial incrustada en cada página del sitio. ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
54
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
55
Ejemplo de ViewComponent En este caso crearemos un viewcomponent que logre lo mismo que la vista parcial anterior, sin embargo esta vez obtendremos las noticias desde el código, lo que más adelante podría ser reemplazado por datos desde una base de datos. 1. Crear un folder llamado ViewComponents en la raíz del proyecto. 2. Cree una clase llamada BannerInteractivoViewComponent.cs 3. Reemplace el contenido de la clase por el siguiente. using Microsoft.AspNet.Mvc; using System.Collections.Generic; using System.Linq; namespace .ViewComponents { public class BannerInteractivoViewComponent : ViewComponent {
Dictionary noticias = new Dictionary(); public IViewComponentResult Invoke() { noticias = new Dictionary() { { "Costa Rica en el puesto #13 de FIFA","Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient!"}, { "Nuevo ASP.NET 5","Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient!"}, { "¡Hololens está aquí!","Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient!"} }; return View(noticias); } } }
4. Ahora, cree un folder en la dirección Views/Shared/Components y dentro de ese folder, cree otro llamado BannerInteractivo (Views/Shared/Components/BannerInteractivo) y luego cree una vista que se llame Default.cshtml, agrege el siguiente contenido a la vista (el css se agrega en el mismo archivo solamente por simplicidad, no es una buena práctica bajo ninguna razón). @model Dictionary ¡Esto podría venir de una base de datos! ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
56
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
57
Noticias @foreach (var item in Model) { @item.Key @item.Value } .bannerNoticias { border: solid 1px #aaa; border-radius: 10px; padding: 12px; } .bannerNoticias .noticias { display: inline-block; float: left; max-width: 200px; font-size: 12px; } .clearer { clear: both; }
5. En el _layout.cshtml agregue la siguiente línea debajo del @await Html.PartialAsync(“_bannerNoticias”) agregado previamente, esto para invocar nuestro ViewComponent. @Component.Invoke("BannerInteractivo")
6. Si ejecuta el proyecto (F5) verá el mismo resultado 2 veces, sin embargo con el ViewComponent podrá sacar los datos desde una base de datos más adelante, e inclusive ejecutarlo de manera asincrónica.
Agregando una base de datos Para esto utilizaremos Entity Framework. Entity Framework es el principal ORM (object relational mapping) de Microsoft. El cual permite facilitar la comunicación y traducción de información entre una base de datos y un modelo de objetos. Por ejemplo, evitar tener que escribir las sentencias Insert, Delete, Update, List en T-SQL y orientarse más en la lógica que en cómo acceder los datos de la base de datos. Las principales modalidades de Entity Framework son Code First y Database First.
La modalidad Code First permite escribir las clases (entidades) en C# o VB.NET y Entity Framework solo se encarga de crear las tablas en la base de datos y los accesos a datos. La modalidad Database First permite escribir primero las tablas en SQL Server y que Entity Framework extraiga la información y genere las clases en C# o VB.NET.
Entity Framework (EF) extrae del archivo configurativo (config.json) los datos de conexión a la base de datos. Para este ejemplo utilizaremos Entity Framework Code First, el cual también crea la base de datos automáticamente. Ahora, vamos a utilizar el mismo ViewComponent, pero trataremos de obtener la información de las noticias desde la base de datos. Debido a esto, usaremos la instancia de LocalDB existente o cualquier instancia de base de datos instalada. ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
58
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
59
1. Crearemos una entidad de noticia para este ejemplo. En Models cree una clase que se llame Noticia.cs, reemplace el contenido con el siguiente. using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace .ui.Models { public class Noticia { public int Id { get; set; } public string Titulo { get; set; } public string Descripcion { get; set; } } }
2. Entity Framework ya está agregado al proyecto ya que decidimos habilitar autenticación de usuarios individual la cual utiliza una base de datos e implementa Entity Framework Code First. 3. Vamos a proceder a agregar el contexto de Code First. En el mismo folder de Models, cree un archivo que se llame NoticiasAppContext.cs y reemplace el contenido con el siguiente. using Microsoft.Data.Entity; namespace wm.website.ui.Models { public class NoticiasAppContext : DbContext {
public DbSet Noticias { get; set; } } }
4. Con esto listo, se debe configurar Entity Framework (registrar la dependencia) y agregar la conexión a la base de datos. Esto se realiza a través del archivo Startup.cs. En el método ConfigureServices se agregan las configuraciones, encontrará que ya se está agregando Entity Framework y configurado un contexto, este contexto es el que ya se usa para autenticación de usuarios. Pero debemos agregar el nuevo contexto para las Noticias. // Add EF services to the services container. services.AddEntityFramework() .AddSqlServer() .AddDbContext(options => options.UseSqlServer(Configuration["Data:DefaultConnection :ConnectionString"])) .AddDbContext(options => options.UseSqlServer(Configuration["EntityFramework:Conn ectionString"]));
5. Como ve en la sección de Configuration de este nuevo DbContext hay un string, este es el que indica a cual base de datos conectarse. Esta información se extrae del archivo config.json. Este archivo ya cuenta con un connection string, utilizado para la administración de usuarios fuera de caja.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
60
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
61
{ "AppSettings": { "SiteTitle": "wm.website.ui" }, "Data": { "DefaultConnection": { "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=aspnet5wm.website.ui-a913355d-72f6-4d80-892a19699864e285;Trusted_Connection=True;MultipleActiveRes ultSets=true" } }, "EntityFramework": { "ConnectionString": } }
6. Reemplace por el connectionstring de su base de datos, ya sea SQL Server o LocalDB. 7. Con esto listo, proceda a compilar el proyecto. 8. Volveremos al ViewComponent de Noticias y reemplazaremos las noticias locales por unas salidas de base de datos. En el archivo ViewComponentes/BannerInteractivoViewCompone nt.cs. La lógica a continuación limpia la base de datos, agrega las noticias a la base de datos y luego las extrae para mostrarlas al usuario, estos datos son de prueba, también conocidos como Seed. using Microsoft.AspNet.Mvc; using System.Collections.Generic; using System.Linq; using wm.website.ui.Models;
namespace .ui.ViewComponents { public class BannerInteractivoViewComponent : ViewComponent { List noticias = new List(); NoticiasAppContext db; public BannerInteractivoViewComponent(NoticiasAppContext _context) { db = _context; } public IViewComponentResult Invoke() { // Limpiemos la base de datos if (db.Noticias.Count() > 0) db.Noticias.RemoveRange(db.Noticias); db.SaveChanges(); // Recreemos los 3 archivos db.Noticias.AddRange(new List() { new Noticia() { Id=1, Titulo="Costa Rica en el puesto #13 de FIFA", Descripcion="Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient!" }, new Noticia() { Id=1, Titulo="Nuevo ASP.NET 5", Descripcion="Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient!" }, new Noticia() { Id=1, Titulo="¡Hololens está aquí!", Descripcion="Est porta ac magna lundium? Amet eros. Lorem cum ut auctor vel integer mus tortor, adipiscing platea penatibus, in placerat, lectus adipiscing! Ultrices scelerisque adipiscing parturient!" } ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
62
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
63
}); db.SaveChanges(); return View(db.Noticias.ToList()); } } }
9. Ahora, reemplace el contenido del archivo Views/Shared/Components/BannerInteractivo\Defaul t.cshtml, para que en lugar de sacar los datos de una lista de strings, utilice un objeto que vendrá de la base de datos (el css se agrega en el mismo archivo solamente por simplicidad, no es una buena práctica bajo ninguna razón). Énfasis en lo que está en negrita. @model List ¡Esto podría venir de una base de datos! Noticias @foreach (var item in Model) { @item.Titulo @item.Descripcion } .bannerNoticias { border: solid 1px #aaa; border-radius: 10px; padding: 12px; }
.bannerNoticias .noticias { display: inline-block; float: left; max-width: 200px; font-size: 12px; } .clearer { clear: both; } 10. Ahora, el siguiente procedimiento es porque ASP.NET 5 sigue en proceso, pero más adelante será más simple. a. Abra el command prompt (busca cmd en las aplicaciones instaladas en Windows). b. Utilice la herramienta cd para ir al folder del proyecto, por ejemplo “Documents\Visual Studio 2015\Projects\wm.website.ui\src\wm.website.ui c. Corra los siguientes comandos para habilitarle el Migration al Code First (para que pueda crear la base de datos por primera vez y demás) i. dnvm install 1.0.0-beta5 ii. dnvm use 1.0.0-beta5 iii. dnx . ef migration add MyFirstMigration –c NoticiasAppContext iv. dnx . ef migration apply –c NoticiasAppContext 11. Al concretar este punto, ejecute la aplicación (F5) se podrán ver las noticias pero saliendo de una base de datos SQL Server.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
64
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
65
Usando Dependency Injection Como mencioné en capítulos anteriores ASP.NET 5 unifica y ordena el uso de Dependency Injection en MVC, Web API y SignalR. En este ejemplo veremos cómo podemos aprovechar fácilmente este contenedor para inyectar nuestros propios servicios en todas las secciones de nuestra app sin tener que andar agregando y heredando dependencias entre clases. En el ejemplo anterior parte del código que se implementó era: public BannerInteractivoViewComponent(NoticiasAppContext _context)
Sin embargo a la hora de invocarlo no se está pasando el parámetro _context a la hora de inicializarlo, esto es porque el contenedor de Dependency Injection se encarga arreglar esa dependencia e “inyectarla” al componente. Vamos a hacer un ejercicio creando nuestro propio servicio e inyectándolo a nuestra aplicación. 1. En el folder Services, cree un archivo llamado ErrorLogger.cs. 2. Agregue el siguiente contenido en la clase: public class ErrorLogger : IErrorLogger { public bool init { get; set; } = false; public ErrorLogger() { // aqui puede inicializar cualquier componente interno init = true; }
public void LogError(Exception ex) { // aqui se registrarían errores a la base de datos } } public interface IErrorLogger { void LogError(Exception ex); }
3. Simplemente al inicializar una instancia de la clase se va a colocar la variable init, para así confirmar cuando lo inyectemos que fue inicializado. 4. Como puede ver es una clase sin lógica interna, así nos concentramos en como inyectarlo y no tanto en que hace, lo cual es irrelevante. 5. Vaya a la clase HomeController y agregue el siguiente constructor: IErrorLogger logger { get; set; } public HomeController(IErrorLogger log) { logger = log; }
6. Cómo puede ver, el constructor está recibiendo un parámetro que nadie le está pasando a la hora de invocarlo. Por ende si lo ejecutamos (F5) va a lanzar un error.
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
66
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
67
7. Aquí es donde Dependency Injection entra en juego y resuelve esa dependencia sin que nosotros se lo indiquemos explícitamente a la hora de inicializarlo. 8. Vaya al archivo Startup.cs 9. Y en el método ConfigureServices agregue la siguiente línea en cualquier parte: services.AddTransient();
10. Al agregarlo a través de la función “AddTransient” el contenedor lo inyectará cuando un método lo pida y quien lo invoque no lo pase por parámetros lo inyectará.
CONCLUSIÓN Cómo hemos podido ver, ASP.NET 5 trae muchísimas mejoras y es un framework sumamente robusto para aplicaciones web complejas. Espero sinceramente que este libro les sea de utilidad para adentrarse a tópicos más complejos, que sea una referencia ligera para sus proyectos, sin embargo no espero que lo utilicen como una referencia definitiva al lenguaje, el patrón o el framework. Dependiendo del éxito de este libro, estaré tratando de sacar otros más avanzados y de los cuales tengo algunos temas en mente, tales como características avanzadas en MVC, aplicaciones MVC 6 con AngularJS, Web API avanzado, Microsoft Azure, entre otros. Así que agradezco si pudieran brindarme feedback de este, mi primer libro técnico. Gracias a su feedback estaré enviándoles a su correo electrónico cuando saque actualizaciones de esta serie u otros libros de interés que genere en español. Contacto Email:
[email protected] Twitter: @tewar93 http://waltermontes.com
ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA
68
