ASP.net MVC 6 - Una Guia Introductoria

ASP.NET MVC 6 - UNA GUÍA

INTRODUCTORIA

Walter Montes Delgado

ASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA 2

ASP.NET MVC 6 - UNA GUÍA

INTRODUCTORIA

Walter Montes Delgado

©2015 Walter Montes Delgado


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

http://waltermontes.com/


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

https://github.com/walmon/MVC6UNAGUIAINTRODUCTORIA

https://github.com/walmon/MVC6UNAGUIAINTRODUCTORIA


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.


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.


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


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


(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


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

https://msdn.microsoft.com/en-us/library/ms229002(v=vs.110).aspx


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.


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


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.


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


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.

http://lesscss.org/

http://sass-lang.com/

http://coffeescript.org/

http://www.typescriptlang.org/

https://github.com/douglascrockford/JSLint


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.


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.

http://jquery.com/

http://getbootstrap.com/


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 <head>,

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.


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:


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:

<a href="/Account/Login">Click here to Log in</a>.

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:<puerto>/<CONTROLADOR>/<ACCION>

http://localhost:<puerto>/Home/Index

http://localhost:<puerto>/Home/About

(*) nota: La palabra “controller” en la clase es removida del

nombre.

Así las solicitudes web se resuelven de la siguiente forma:


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:<puerto>/ 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/<Nombre

de Controlador>/<Nombre de Acción>. 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

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


4. Probar el código ejecutando el proyecto (F5) y navegando

a la ruta:

http://localhost:<puerto>/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


<form asp-controller="Home" asp-action="SubmitForm"

method="post">

<div class="row">

<div class="form-group">

<input name="nombre" placeholder="Nombre"

class="form-control" />

</div>


<input name="edad" placeholder="Edad" class="form-

control" type="number" />

</div>


<button type="submit" class="btn btn-

default">Submit</button>

</div>

</div>

</form>

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.


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

action, 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.


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…


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<Item> items = new List<Item>(){

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

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á


notar se utiliza el carácter @ para ejecutar lógica en el

archivo Razor.

<ul>

@foreach(var item in Model)

{

<li>id: @item.Id nombre: @item.Nombre</li>

}

</ul>

10. Ahora ejecute la aplicación (F5) y vea el resultado en el

navegador en la dirección

http://localhost:<puerto>/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<Item>

<h1>@ViewBag.Mensaje</h1>

<ul>

@foreach(var item in Model)

{

<li>id: @item.Id nombre: @item.Nombre</li>

}

</ul>

14. Ahora ejecute la aplicación (F5) y vea el resultado en el

navegador en la dirección

http://localhost:<puerto>/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


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 <sunombredeespacio>.Models {

public class Item

{

[Required(ErrorMessage = "El identificador del

ítem es obligatorio")]


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

}



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

<form asp-action="crear" asp-controller="item"

method="post" asp-anti-forgery="true">

<div asp-validation-summary="ValidationSummary.All"

class="text-danger"></div>


<label asp-for="Id"></label>

<input asp-for="Id" class="form-control" />

<span asp-validation-for="Id" class="text-

danger"></span>

</div>


<label asp-for="Nombre"></label>

<input asp-for="Nombre" class="form-control" />

<span asp-validation-for="Nombre" class="text-

danger"></span>

</div>

<button type="submit" class="btn btn-

default">Submit</button>

</form>

@section Scripts {


@{await

Html.RenderPartialAsync("_ValidationScriptsPartial"); }

}


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

summary="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.


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


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)

<div class="bannerNoticias">

<p>Noticias</p>

<div class="noticias">

<h4>Costa Rica en el puesto #13 de FIFA</h4>

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

</div>


<h4>Nuevo ASP.NET 5</h4>






</div>


<h4>¡Hololens está aquí!</h4>





</div>

<div class="clearer"></div>

</div>

<style>

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

}

</style>

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.


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 <sunombredeespacio>.ViewComponents

{

public class BannerInteractivoViewComponent :

ViewComponent

{


Dictionary<string, string> noticias = new

Dictionary<string, string>();

public IViewComponentResult Invoke()

{

noticias = new Dictionary<string, string>() {

{ "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



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<string, string>

<h2>¡Esto podría venir de una base de datos!</h2>



<p>Noticias</p>

@foreach (var item in Model)

{


<h4>@item.Key</h4>

<p>@item.Value</p>

</div>

}


</div>

<style>

.bannerNoticias {

border: solid 1px #aaa;

border-radius: 10px;

padding: 12px;

}


display: inline-block;

float: left;

max-width: 200px;

font-size: 12px;

}

.clearer {

clear: both;

}

</style>

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.


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.Linq;

using System.Threading.Tasks;

namespace <sunombredeespacio>.ui.Models

{

public class Noticia

{


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<Noticia> 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<ApplicationDbContext>(options =>

options.UseSqlServer(Configuration["Data:DefaultConnection

:ConnectionString"]))

.AddDbContext<NoticiasAppContext>(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.


{

"AppSettings": {

"SiteTitle": "wm.website.ui"

},

"Data": {

"DefaultConnection": {

"ConnectionString":

"Server=(localdb)\\mssqllocaldb;Database=aspnet5-

wm.website.ui-a913355d-72f6-4d80-892a-

19699864e285;Trusted_Connection=True;MultipleActiveRes

ultSets=true"

}

},

"EntityFramework": {

"ConnectionString": <conexion a su base de datos>

}

}

6. Reemplace <conexion a su base de datos> 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.Linq;

using wm.website.ui.Models;


namespace <sunombredeespacio>.ui.ViewComponents

{

public class BannerInteractivoViewComponent :

ViewComponent

{

List<Noticia> noticias = new List<Noticia>();

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<Noticia>() {

new Noticia() { Id=1, Titulo="Costa Rica en el

puesto #13 de FIFA", Descripcion="Est porta ac magna



adipiscing! Ultrices scelerisque adipiscing parturient!" },

new Noticia() { Id=1, Titulo="Nuevo ASP.NET 5",

Descripcion="Est porta ac magna lundium? Amet eros. Lorem



adipiscing parturient!" },

new Noticia() { Id=1, Titulo="¡Hololens está aquí!",

Descripcion="Est porta ac magna lundium? Amet eros. Lorem



adipiscing parturient!" }


});

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

<h2>¡Esto podría venir de una base de datos!</h2>


<p>Noticias</p>

@foreach (var item in Model)

{


<h4>@item.Titulo</h4>

<p>@item.Descripcion</p>

</div>

}


</div>

<style>

.bannerNoticias {

border: solid 1px #aaa;

border-radius: 10px;

padding: 12px;

}



display: inline-block;

float: left;

max-width: 200px;

font-size: 12px;

}

.clearer {

clear: both;

}

</style>

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.


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.


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<IErrorLogger, ErrorLogger>();

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

mailto:[email protected]

https://twitter.com/tewar93

http://waltermontes.com/

ASP.net MVC 6 - Una Guia Introductoria

Documents

Transcript of ASP.net MVC 6 - Una Guia Introductoria