Está en la página 1de 68

ASP.

NET MVC 6 - UNA GUA


INTRODUCTORIA

Walter Montes Delgado

ASP.NET MVC 6 - UNA GUA


INTRODUCTORIA
Walter Montes Delgado
2015 Walter Montes Delgado

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

Tabla de Contenidos
ACERCA DEL AUTOR ............................................................. 4
REGISTRO DE CAMBIOS........................................................ 5
INTRODUCCIN PERSONAL - PORQU UNA GUA
INTRODUCTORIA A MVC ...................................................... 7
CAPTULO UNO UNA INTRODUCCIN A .NET 2015 Y
ASP.NET 5 ................................................................................. 9
CAPTULO DOS EL PATRN QUE TODOS AMAN, MVC
.................................................................................................. 12
CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE ....... 14
Una pequea introduccin al desarrollo web ........................ 14
ASP.NET MVC 6 ................................................................. 15
VISTAS ................................................................................ 27
CONTROLADORES............................................................ 31
MODELOS ........................................................................... 35
EJERCICIOS ........................................................................ 35
Agregar una nueva vista .................................................... 35
Comunicacin cliente hacia servidor ................................ 37
CAPTULO CUATRO CARACTERSTICAS AVANZADAS
.................................................................................................. 41
Pase de informacin 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
CONCLUSIN......................................................................... 68

ACERCA DEL AUTOR


Walter Montes tiene mltiples aos trabajando con tecnologa
Microsoft desde desarrollo de software, instalacin y
configuracin 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 Centroamrica.
Adems de ser el administrador de la comunidad oficial de
desarrolladores .NET en Costa Rica CR Developers .NET.
Cuenta con su propio blog en tecnologa Microsoft y Open Source
en la siguiente direccin: http://waltermontes.com

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

REGISTRO DE CAMBIOS
Esta es la segunda versin 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 mayora
de cambios impactantes en esta seccin para que si ya leste la
versin 1, puedas enfocarte solamente en lo nuevo. Si lees este
libro por primera vez puedes ignorar esta seccin y pasar al
siguiente captulo. Gracias especiales a todas las personas que
leyeron la primera versin de este libro, se suscribieron e inclusive
enviaron agradecimientos y retroalimentacin. Ya que al da de
hoy el libro tiene ms de 615 descargas y ms de 120 suscriptores.
Lo interesante es que actualmente el cambio entre una versin
Release Candidate (RC) versin con la cual liber la primera
versin de este libro y la versin Release to Manufacturing
(RTM) versin con la cual libero esta segunda versin no
varan demasiado entre s, ya que Microsoft ha sido muy abierto
durante el proceso de desarrollo y liberado anticipadamente cada
nueva caracterstica.
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 ms compatible con
mltiples dispositivos de manera nativa por eso
opt por utilizar el editor en lnea 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 ms de
PDF normal.

A partir de la seccin ASP.NET MVC 6 he actualizado


las imgenes para que calcen con lo que se encontrarn en
Visual Studio 2015 RTM.
Mayor detalle con respecto a GULP, qu es y para qu
sirve en la seccin ASP.NET MVC 6.
Mayor detalle con respecto a Dependency Injection, qu
es y para qu sirve en la seccin ASP.NET MVC 6.
Mayor detalle en los ejemplos.
Mayor detalle con respecto a Entity Framework, qu es y
para qu sirve en la seccin Agregando una base de datos.
Un ejemplo de cmo utilizar el contenedor de
Dependency Injection que viene por defecto en ASP.NET
5 en la seccin 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 GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

INTRODUCCIN PERSONAL PORQU UNA GUA


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 crticas en las organizaciones, que
adems estar con nosotros por muchsimos aos en el futuro. Con
el crecimiento de la internet, Microsoft ha escuchado a los
desarrolladores, empresas y emprendedores, a raz de esto ha
orientado el desarrollo de su Framework hacia algo que hoy en da
con .NET 2015 es una plataforma de desarrollo abierta, inclusiva
y multiplataforma.
Sumado a todo esto que se ha ido viendo en los ltimos aos con
la plataforma de Microsoft, est la orientacin de ASP.NET hacia
el software abierto y a cumplir y trabajar agradablemente con
estndares 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 aplicacin y
a entender como es la comunicacin entre el cliente y el servidor,
permitiendo optimizar sus sistemas. Es por esto que he tomado la
decisin 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 estn entrando al mundo de MVC a entender este
patrn y que las personas que ya lo conocen que puedan validar
fundamentos bsicos mientras logran adentrarse un poco ms.
Previo a iniciar a leer este libro sera ideal que ya conozca las
siguientes tecnologas al menos a un nivel bsico:

C#
HTML

CSS
JavaScript

Todo lo presentado en este libro representa mi punto de vista


personal y no busca representar a ningn empleador ni a Microsoft
como corporacin.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

CAPTULO UNO UNA


INTRODUCCIN A .NET 2015 Y
ASP.NET 5
Antes de entrar en materia, es importante entender los cambios
que .NET Framework est teniendo para conocer cmo impacta
esto a ASP.NET. Probablemente mucha de la informacin que
ser presentada a continuacin pueda ser confusa si ests
empezando en .NET o ASP.NET, as que el consejo sera que ms
adelante vuelvas a esta seccin y le des otra leda posterior a
finalizar el libro. .NET 2015 es el nombre que se le da a la nueva
versin de .NET Framework y un buen punto de arranque es ver
un diagrama como Microsoft presenta esta nueva versin 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 ms notorio de este diagrama es la separacin de .NET


Framework en dos bloques: .NET Framework 4.6 y .NET Core 5.
.NET Framework 4.6: Contina el trabajo que trae .NET 4.5.2 con
muchsimas 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 travs
del conocido Windows Update. Es importante notar que sobre
.NET Framework 4.6 estn las tecnologas 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 versin de software
abierto, el cual puede ser desplegado de manera modular y local,
adems de ser mucho ms ligero. Al ser modular busca tambin
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 versin 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 versin de .NET Framework instalada
en el servidor) como en Linux y OSX.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

10

ASP.NET MVC 6 - UNA GUA 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 contina
soportando el modelo de desarrollo en Web Forms y el lenguaje
de programacin VB.NET.
Algunas de las caractersticas ms notables de ASP.NET 5 es la
unificacin de MVC, Web API y Web Pages en un solo modelo
conocido como MVC 6. Otra importante adicin es la integracin
con herramientas populares de desarrollo web como Bower, Grunt
y Gulp, los cuales ya se podan utilizar con otros frameworks de
desarrollo como PHP, Node.JS y Ruby.

CAPTULO DOS EL PATRN QUE


TODOS AMAN, MVC
Modelo Vista Controlador, es lo que las siglas MVC representan,
y su objetivo principal es lograr la separacin entre estos tres
personajes, lo cual permite, a travs de este patrn de diseo,
crear aplicaciones robustas tomando en consideracin buenas
prcticas aprendidas de otras plataformas de desarrollo y del
propio Microsoft.

Modelo Vista Controlador


La separacin de conceptos busca precisamente que cada
bloque de la aplicacin 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
programacin en N-Capas, MVC puede seguir estos lineamientos
como separacin de proyectos para distribuir componentes
ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

12

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

13

comunes. Todo esto es porque MVC como tal es un patrn, no una


tecnologa.

Vista: La vista es el conjunto de markup de la aplicacin,


es decir el HTML. En ASP.NET MVC este markup es pre
renderizado a travs de una tecnologa llamada Razor, la
cual permite, entre otras cosas, ejecutar lgica previa a
renderizar el HTML que ser enviado al cliente. Con
Razor esta compilacin o renderizacin ocurre del lado
servidor. No debera incluir ningn tipo de lgica de
negocio, sino ms bien lgica propia de interaccin 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
aplicacin, ms adelante, veremos que no es necesario
que est en el mismo proyecto que la aplicacin web.
Controlador: El controlador se encarga de recibir
solicitudes y ser el punto de entrada de la aplicacin, a
travs de lo que se conoce como acciones (Actions). Se
basa en solicitudes HTTP y puede responder con datos o
con contenido, como HTML.

CAPTULO TRES ASP.NET MVC 6


SIN PERDERSE
Una pequea introduccin al desarrollo
web
Esta seccin es una introduccin bsica y esencial de desarrollo
web, si ya ests familiarizado con desarrollo web en otras
tecnologas, probablemente no sea necesario que pases por esta
seccin.
En el desarrollo web, se trabaja con un servidor que responde
archivos e informacin 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 travs de ASP.NET procesa
la solicitud, contacta bases de datos y dems, y retorna pginas
HTML renderizadas, archivos CSS, JavaScript y medios
(imgenes, videos, etc).
HTML: markup de la pgina
JavaScript: lgica de lado cliente (pc de usuario)
CSS: hojas de estilo
La comunicacin entre el cliente y el servidor se realiza a travs
de HTTP por lo que cada solicitud se conforma de una solicitud
ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

14

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

15

(request) y una respuesta (response). Las solicitudes web tienen


como mnimo un encabezado (header) y un cuerpo (body). El
encabezado indica direccin de la solicitud, tipo de solicitud e
informacin del contenido aceptado, entre otros; y el cuerpo
incluye informacin que se enva al servidor.
De esta forma el tipo de solicitud se define a travs 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 envo de informacin, debe ir
acompaado de un cuerpo de contenido, por ejemplo una
imagen o un JSON
PUT: similar al POST, sin embargo se utiliza para cuando
se realizan actualizacin 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 tecnologa que ir
directo al cdigo y explorarlo? Pues ese ser el siguiente pas en
este libro. Durante todo el recorrido se irn 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 ms que una serie de DLLs que funcionan
para un fin especfico incluidas en un proyecto + una base de
cdigo configurativa de la tecnologa + uno o varios ejemplos de
cdigo. Es decir, si uno quisiera hasta podra empezar un proyecto
sin necesidad de seleccionar un template de Visual Studio.

La forma de unificar archivos en forma de proyecto es a travs


de archivos con extensin .csproj o .vbproj, los cuales a su vez se
pueden agrupar en una solucin con archivos extensin .sln. Para
entender un poco ms de archivos de proyecto y su funcionalidad.

Estructura de solucin
Archivos no especficos 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 especficos 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 creacin de


un proyecto basado en una plantilla es sencillo, en Visual Studio
> File/Archivo > New/Nuevo> Project/Proyecto

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

16

ASP.NET MVC 6 - UNA GUA 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 solucin acorde a sus necesidades ya que este ser
el nombre de espacio que seguir su proyecto (orden interno del
proyecto). Usualmente y por estndar de Microsoft se nombra el
nombre de espacio de la siguiente forma

Definicin 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
trmino ONE ASP.NET, el cual busca que se puedan crear
proyectos con tecnologa Web Forms y MVC/Web API en un solo
proyecto de Visual Studio, a diferencia de como anteriormente
solo se poda seleccionar un tipo.
La siguiente pantalla que aparece a continuacin da la opcin 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 GUA INTRODUCTORIA

18

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

19

Tipo de Proyecto ASP.NET


En la imagen anterior se ha resaltado la opcin Change
Authentication para dar un poco de nfasis a esta opcin. Si se le
da clic a este botn, aparece la siguiente pantalla.

Cambiar autenticacin
Esta ventana da la opcin de seleccionar la estrategia de
autenticacin, por lo cual se debe tener de antemano una idea de

la estrategia de autenticacin y autorizacin del sistema. Esto


porque ms adelante se puede cambiar, sin embargo puede ser un
poco complicado si no se conoce bien a detalle cmo se
implementa cada modelo, ya que al seleccionar una opcin se
crean las clases y configuraciones de ASP.NET y/o IIS para
procesar un modelo de autenticacin.
Cmo determinar el modelo de autenticacin?

No Authentication: en caso de que no se requiera


autenticacin o se desee implementar un tipo especial de
autenticacin
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
contraseas de manera segura y con buenas prcticas, 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 autenticacin empresiales, tal como
Azure Active Directory o Active Directory Federation
Services.

Windows Authentication: en ambientes corporativos


cuando las computadoras clientes estn en un dominio en
Active Directory Domain Services, de esta forma no se

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

20

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

21

solicita al usuario autenticarse, sino que se utilizan los


credenciales de Windows.
Para la demostracin se va a dejar marcada la opcin de Individual
User Accounts, el cual utiliza el Simple Membership Provider
para obtener autenticacin de usuarios en una base de datos SQL
Server en LocalDB (ms adelante se ahondar un poco ms 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 versin de .NET y Visual Studio, NuGet toma
mucho protagonismo, ya que se busca que con .NET Core solo se
traiga lo mnimo necesario y lo dems que se ocupe sea
descargado a travs 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 informacin del proyecto para Visual
Studio u otras herramientas, en este caso el archivo est casi vaco,
solo contiene informacin de las carpetas y versin del SDK. Para
los que vienen de versiones anteriores de .NET ver archivos
configurativos con extensin JSON es algo totalmente nuevo, por
otro lado para los que vienen de otras plataformas como Node.JS
es algo muy comn 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 solucin, 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 versin), el cual contiene archivos que
no deben ser compilados, tales como hojas de estilo (CSS),
imgenes y archivos de JavaScript.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

22

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

23

Folder wwwroot
A nivel de raz de proyecto hay otros archivos extensin .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
pequeo 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 tecnologas ya que
usualmente no dependen de la
tecnologa 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 prcticamente se distribuyen las
configuraciones que anteriormente existan en el archivo
web.config. Si eres nuevo en desarrollo web sobre .NET, el
web.config era un archivo XML que contena configuraciones
propias del proyecto.
Durante este libro no se va a ahondar tantsimo en cada detalle
nuevo, ms bien, se intentar que sea algo ms funcional y directo
a entender lo mnimo necesario de ASP.NET 5.
El archivo Startup.cs es el que invoca los .json e inyecta
dependencias necesarias (ms adelante se conversar un poco ms
al respecto).
Gulp
El desarrollo web moderno utiliza herramientas que permiten
crear mejores aplicaciones (ms veloces, optimizadas y seguras).
Anteriomente se mencionaron Grunt y Gulp por encima, voy a
tratar de ahondar un poco ms 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 GUA INTRODUCTORIA

24

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

25

la compilacin, 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 cdigo ms
mantenible, incrustar lgica, 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
cdigo, correr libreras como JSLint (verifica buenas prcticas en
el cdigo JavaScript), entre muchsimas ms cosas.
Por ejemplo en este caso el archivo si abrimos el gulpfile.js vemos
una serie de tareas como minificacin y limpiado de archivos css
y JavaScript.

Dependency Injection
El patrn Dependency Injection o Inyeccin de Dependencias
exista en MVC, Web API y SignalR desde antes, sin embargo no
de manera tan explcita ni tan consistente. Es por esto que
ASP.NET 5 se unific esta seccin de manera ms consistente.
Dependency Injection permite acceder a servicios en diferentes
puntos de la ejecucin de un sistema, por ejemplo en controladores
o apenas inicia la aplicacin. Adems trae un contenedor de
Dependency Injection que permite consolidar el sistema y sus
configuraciones. Ms adelante mostrar un ejemplo de cmo
utilizar Dependency Injection con la abstraccin por defecto de
ASP.NET 5, sin embargo esta puede ser reemplazada por otro
contener como Ninject o Autofact.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

26

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

27

Entrando ya en temtica 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 libreras
jQuery y Bootstrap, adems de otras ms. Por lo cual ya trae un
diseo inicial y unas pginas iniciales que responden solicitudes a
travs de controladores.

Ejecucin bsica

VISTAS
Lo primero que se ver en esta lnea sern las vistas y cmo
funcionan entre s.
Dnde estn ubicadas? En el folder Views.
Qu extensiones tienen? .cshtml o .vbhtml dependiendo del
lenguaje de programacin, si es C# la extensin es cshtml, si es
Visual Basic la extensin es vbhtml.
Qu lenguaje se utiliza? HTML a travs del pre compilador de
HTML llamado Razor.

Todo website tiene ciertos componentes que se repiten entre


pginas, tipo marco. En Web Forms se le conoca como
MasterPage, en MVC se le conoce como _Layout. Usualmente
estas secciones incluyen partes como encabezados, pie de pgina
y mens de navegacin. Por ejemplo en la imagen de la derecha
lo que est en celeste sera 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 versin
de ASP.NET, el tag environment el cual permite, segn 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 produccin
usualmente los archivos que se envan 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 cdigo fuente que se descarga del lado cliente y que
durante desarrollo se pueda realizar depuracin de cdigo
JavaScript.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

28

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

29

Etiqueta Environment
Al investigar un poco ms el archivo se puede encontrar la
sentencia @RenderBody() en esta parte del HTML se renderizar
el resto de pginas que utilicen este archivo de layout.
La manera de asignar este layout a diferentes pginas es a travs
de una variable llamada Layout. Es decir si en alguna vista se
asigna algn valor a esa variable global, esa pgina utilizar ese
archivo de layout. Con el siguiente diagrama se intentar explicar
un poco ms claro esto.

Renderizacin vista
Como se pudo notar al ejecutar el proyecto, la pgina que fue
retornada ya traa un layout y contenido renderizado, esto es
porque por defecto cada vista creada tiene un layout por defecto.
Esta configuracin se realiza en el archivo _ViewStart.cshtml. Es
decir, si no se indica explcitamente en cada vista cual archivo de

layout utilizar, la vista utilizar el que se indique en el archivo


_ViewStart.cshtml

Asignacin Layout
La sentencia anterior definida por
@{
}

Permite incrustar cdigo C#, se conocen como bloques de cdigo


(code blocks) y permiten ejecutar lgica, por ejemplo:

Bloque de cdigo
El smbolo @ tambin permite utilizar tambin lo que se conoce
como Tag Helpers. Los cuales bsicamente renderizn bloques de
HTML basndose en cierta lgica, 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 GUA INTRODUCTORIA

30

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

31

HTML Helper
O utilizar uno de los nuevos tag helpers que permite un cdigo
ms limpio al utilizar atributos de HTML. Por ejemplo:

Nuevo Tag Helpers


Al fin y al cabo ambos renderizan al final el siguiente bloque de
cdigo 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 informacin que se desea mostrar,
ms adelante se mostrar cmo 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 funcin equivale al nombre de la accin.
Nombre de Clase = Controlador
Nombre de Funcin = Accin
Por ejemplo en el archivo Controllers/HomeController

Clase de controlador
De esa manera, se crea un extremo (endpoint web) que puede ser
consultado a travs de un cliente que pueda realizar solicitudes
HTTP (un navegador, un robot, un dispositivo). Por ejemplo
segn la imagen anterior en HomeController existen las siguientes
2 rutas que responden solicitudes, acorde a la siguiente
convencin
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:

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

32

ASP.NET MVC 6 - UNA GUA 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 accin que corresponde.
Como pudieron notar al ejecutar este proyecto la url
http://localhost:<puerto>/ respondi una pgina a pesar de que
no se indic explcitamente el Controlador ni la accin, esto es
porque al definir la convencin de ruta se especifican unos valores
por defecto. De la siguiente forma:

Si no se indica la accin 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 travs del archivo Startup.cs en el siguiente


bloque de cdigo:

Plantilla de ruteo
En esa seccin de cdigo se define la convencin a seguir, es decir
{controlador}/{accin}/{id opcional}

El controlador en el tipo de funcin 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 funcin View se puede colocar sin pasar parmetros por lo cual
la funcin buscar una vista que est en el folder Views/<Nombre
de Controlador>/<Nombre de Accin>. En este caso retornar
la vista que est ubicada en Views/Home/About. Sin embargo
tambin se puede indicar explcitamente el nombre de la vista que
ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

34

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

35

se desea retornar. La funcin buscar un archivo con el nombre


indicado en el parmetro 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 cdigo
Existen 3 tipos de comentarios en Razor:

Comentarios HTML, son retornados al cliente en el


HTML
o <!-- este es un comentario -->
Comentarios internos, no son retornados al cliente
o * @* este es un comentario *@ *
Comentarios dentro de bloques de cdigo, 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 lgica de negocio y acceso a datos
para manipular informacin. Estn 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


funcin 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
funcin View.

3. Escribir algn contenido en la vista recin creada

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

36

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

37

4. Probar el cdigo ejecutando el proyecto (F5) y navegando


a la ruta:
http://localhost:<puerto>/home/vistapersonalizada

5. Disfrutar el resultado

Comunicacin cliente hacia servidor


Para este ejercicio se necesitar un formulario apuntando a travs
de un mtodo de tipo post a una accin en Home y este retornar
una vista.
1. En el archivo Views/Home/Index.cshtml agregar un
formulario apuntando a una accin 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>
<div class="form-group">
<input name="edad" placeholder="Edad" class="formcontrol" type="number" />
</div>
<div class="form-group">
<button type="submit" class="btn btndefault">Submit</button>
</div>
</div>
</form>
2. Crear la accin que responda a esta solicitud, en el archivo
Controllers/HomeController.cs agregar una funcin 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 lnea de cdigo de la funcin.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

38

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

39

4. Ejecutar el cdigo, 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 parmetros de la funcin, el cual
permite realizar la liga entre los valores enviados por el
formulario con los recibidos en la funcin. De esta forma
si hay un input con el atributo name y la accin a la que

se apunta recibe un parmetro 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 funcin SubmitForm,
el cual diferencia que esta accin responder solo a
solicitudes de tipo POST.
o Si no se indica este atributo en la funcin, por
defecto se crear la funcin respondiendo a
solicitudes tipo GET.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

40

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

41

CAPTULO CUATRO
CARACTERSTICAS AVANZADAS
En el captulo anterior se hizo un recorrido inicial por ciertas
funcionalidades principales de ASP.NET MVC 6. En el cual se
pudo conocer lo bsico de cada componente y cmo lograr
comunicacin y empezar a extender el proyecto bsico.

Pase de informacin entre el


controlador y la vista

Para compartir informacin entre una accin 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 dinmica que permite utilizar
dynamics de C# 4.0, solo sobrevive durante la solicitud
actual. Usualmente sirve para pasar datos sencillos.
TempData permite pasar informacin entre solicitudes
subsecuentes (por ejemplo redireccin)
Modelo este modo permite asignar a una vista un modelo
especfico y pasarla por parmetros al retornar la vista

Esta seccin busca explicar un poco ms como utilizar Razor y


hacer algunas cosas un poco ms complejas tales como renderizar
listas y pasar informacin por ViewBag. Adentrndonos 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 GUA INTRODUCTORIA

42

ASP.NET MVC 6 - UNA GUA 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 accin Index se deben crear


algunos tems de prueba para luego renderizarlos en la
vista, de la siguiente forma. Adems 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 travs


de parmetros 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 lnea de cdigo.
@model List<Item>

9. Lo siguiente sera iterar en la lista que est siendo


retornada y renderizar uno a uno los tems. Use el
siguiente bloque de cdigo para este fin. Como podr

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

44

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

45

notar se utiliza el carcter @ para ejecutar lgica en el


archivo Razor.
<ul>
@foreach(var item in Model)
{
<li>id: @item.Id nombre: @item.Nombre</li>
}
</ul>

10. Ahora ejecute la aplicacin (F5) y vea el resultado en el


navegador
en
la
direccin
http://localhost:<puerto>/Items/

11. Pasar informacin por ViewBag


12. En el mismo controlador, agregue la siguiente lnea de
cdigo dentro de la accin 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 aplicacin (F5) y vea el resultado en el


navegador
en
la
direccin
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
librera llamada DataAnnotations la cual permite definir qu
validaciones se necesitan en el formulario de lado servidor y a
travs de jQuery Validate validar lado cliente. Las dataannotations
ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

46

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

47

estn
en
el
nombre
de
espacio
System.ComponentModel.DataAnnotations y permiten no solo
especificar cierta informacin de validacin, sino tambin 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")]
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 lnea que tenga


un error y presione Ctrl+.

De lo anterior se puede resaltar lo siguiente:

La inclusin 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
condicin 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
caractersticas.

3. Para poder probar una validacin 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 GUA INTRODUCTORIA

48

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

49

Dos acciones, una para retornar el formulario vaco y otro


para recibir los datos del submit.
El atributo [ValidateAntiForgeryToken] el cual permite
evitar ataques de CSRF. Debera 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 informacin previamente ingresada.

4. Cree una vista en el folder /Views/Items llamada Crear


5. Agregar la informacin 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>
<div class="form-group">
<label asp-for="Id"></label>
<input asp-for="Id" class="form-control" />
<span asp-validation-for="Id" class="textdanger"></span>
</div>
<div class="form-group">
<label asp-for="Nombre"></label>
<input asp-for="Nombre" class="form-control" />
<span asp-validation-for="Nombre" class="textdanger"></span>
</div>
<button type="submit" class="btn btndefault">Submit</button>
</form>
@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 versin RTM ahora se utiliza un
valor de asignacin 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 travs 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 seccin 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 ningn campo
de clic en submit.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

50

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

51

7. Ingrese valores que cumplan con las especificaciones de


validacin y realice el submit. Debera llegar al
breakpoint con los datos ingresados.
8. Lo que se acaba de realizar es validacin de lado cliente,
la cual puede extenderse del lado servidor con la siguiente
sentencia en la accin 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
conocan como Vistas parciales, las cuales buscan renderizar
pequeos bloques de HTML, sirve en casos en los que se requiera
manipular pequeas porciones de una pgina, por ejemplo con
manejo asincrnico de una pgina. La principal diferencia es que
un ViewComponent es mucho ms poderoso que una Vista Parcial
debido a las formas de manipular la comunicacin.
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 GUA INTRODUCTORIA

52

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

53

2. Reemplace todo el contenido por el contenido a


continuacin (el css se agrega en el mismo archivo
solamente por simplicidad, no es una buena prctica bajo
ninguna razn)
<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>
<div class="noticias">
<h4>Nuevo ASP.NET 5</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>
<div class="noticias">
<h4>Hololens est aqu!</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>
<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 lnea de


cdigo debajo de la sentencia @RenderBody
@RenderBody()
@await Html.PartialAsync("_bannerNoticias")

4. Ejecute el proyecto (F5) y podr apreciar una Vista parcial


incrustada en cada pgina del sitio.
ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

54

ASP.NET MVC 6 - UNA GUA 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 cdigo, lo que ms adelante podra ser
reemplazado por datos desde una base de datos.
1. Crear un folder llamado ViewComponents en la raz 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
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
direccin
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 prctica bajo ninguna razn).
@model Dictionary<string, string>
<h2>Esto podra venir de una base de datos!</h2>
ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

56

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

57

<div class="bannerNoticias">
<p>Noticias</p>
@foreach (var item in Model)
{
<div class="noticias">
<h4>@item.Key</h4>
<p>@item.Value</p>
</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>

5. En el _layout.cshtml agregue la siguiente lnea 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 ms adelante, e
inclusive ejecutarlo de manera asincrnica.

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 comunicacin y traduccin de informacin
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 ms en la lgica que en cmo 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
informacin y genere las clases en C# o VB.NET.

Entity Framework (EF) extrae del archivo configurativo


(config.json) los datos de conexin a la base de datos.
Para este ejemplo utilizaremos Entity Framework Code First, el
cual tambin crea la base de datos automticamente.
Ahora, vamos a utilizar el mismo ViewComponent, pero
trataremos de obtener la informacin 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 GUA INTRODUCTORIA

58

ASP.NET MVC 6 - UNA GUA 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 <sunombredeespacio>.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 autenticacin 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 conexin a la base
de datos. Esto se realiza a travs del archivo Startup.cs.
En el mtodo 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 autenticacin 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 seccin de Configuration de este nuevo


DbContext hay un string, este es el que indica a cual base
de datos conectarse. Esta informacin se extrae del
archivo config.json. Este archivo ya cuenta con un
connection string, utilizado para la administracin de
usuarios fuera de caja.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

60

ASP.NET MVC 6 - UNA GUA 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": <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 lgica a continuacin 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,
tambin conocidos como Seed.
using Microsoft.AspNet.Mvc;
using System.Collections.Generic;
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
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 GUA INTRODUCTORIA

62

ASP.NET MVC 6 - UNA GUA 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 prctica bajo ninguna
razn). nfasis en lo que est en negrita.
@model List<Noticia>
<h2>Esto podra venir de una base de datos!</h2>
<div class="bannerNoticias">
<p>Noticias</p>
@foreach (var item in Model)
{
<div class="noticias">
<h4>@item.Titulo</h4>
<p>@item.Descripcion</p>
</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>
10. Ahora, el siguiente procedimiento es porque ASP.NET 5
sigue en proceso, pero ms adelante ser ms 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 dems)
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 aplicacin (F5) se
podrn ver las noticias pero saliendo de una base de datos
SQL Server.

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

64

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

65

Usando Dependency Injection


Como mencion en captulos anteriores ASP.NET 5 unifica y
ordena el uso de Dependency Injection en MVC, Web API y
SignalR. En este ejemplo veremos cmo podemos aprovechar
fcilmente 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 cdigo que se implement era:
public
BannerInteractivoViewComponent(NoticiasAppContext
_context)

Sin embargo a la hora de invocarlo no se est pasando el


parmetro _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
inyectndolo a nuestra aplicacin.
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 registraran 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 lgica 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. Cmo puede ver, el constructor est recibiendo un


parmetro 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 GUA INTRODUCTORIA

66

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

67

7. Aqu es donde Dependency Injection entra en juego y


resuelve esa dependencia sin que nosotros se lo
indiquemos explcitamente a la hora de inicializarlo.
8. Vaya al archivo Startup.cs
9. Y en el mtodo ConfigureServices agregue la siguiente
lnea en cualquier parte:
services.AddTransient<IErrorLogger, ErrorLogger>();

10. Al agregarlo a travs de la funcin AddTransient el


contenedor lo inyectar cuando un mtodo lo pida y quien
lo invoque no lo pase por parmetros lo inyectar.

CONCLUSIN
Cmo hemos podido ver, ASP.NET 5 trae muchsimas mejoras y
es un framework sumamente robusto para aplicaciones web
complejas.
Espero sinceramente que este libro les sea de utilidad para
adentrarse a tpicos ms complejos, que sea una referencia ligera
para sus proyectos, sin embargo no espero que lo utilicen como
una referencia definitiva al lenguaje, el patrn o el framework.
Dependiendo del xito de este libro, estar tratando de sacar otros
ms avanzados y de los cuales tengo algunos temas en mente, tales
como caractersticas 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 tcnico. Gracias a su feedback estar envindoles a su correo
electrnico cuando saque actualizaciones de esta serie u otros
libros de inters que genere en espaol.
Contacto
Email: contacto@waltermontes.com
Twitter: @tewar93
http://waltermontes.com

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

68