MVC 6 - Una Guia Introductoria

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
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
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
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.
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.
10
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
12
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
14
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
16
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.
18
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
20
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.
22
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
24
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.
26
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.
28
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:
30
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:
32
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
34
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 
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
36
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>
<input name="edad" placeholder="Edad" class="formcontrol" type="number" />
</div>
<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.
38
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.
40
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
42
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
44
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
46
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")]
[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);
}
48
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>
<label asp-for="Id"></label>
<input asp-for="Id" class="form-control" />
<span asp-validation-for="Id" class="textdanger"></span>
</div>
<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"); }
}
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.
50
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
52
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>
<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 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.
54
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
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>
56
57
<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 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.
58
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.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 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.
60
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.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!" }
62
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>
<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 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.
64
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.
66
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
68

MVC 6 - Una Guia Introductoria

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

MVC 6 - Una Guia Introductoria

Hochgeladen von

Copyright:

Verfügbare Formate

ASP.

NET MVC 6 - UNA GUA

Walter Montes Delgado

ASP.NET MVC 6 - UNA GUA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ACERCA DEL AUTOR

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

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

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

INTRODUCCIN PERSONAL PORQU UNA GUA

Todo lo presentado en este libro representa mi punto de vista

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

CAPTULO UNO UNA

Vista de alto nivel de .NET 2015

Lo ms notorio de este diagrama es la separacin de .NET

Donde est ASP.NET 5 en el universo .NET

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

A este punto .NET Core 5 soporta solamente ASP.NET MVC en

CAPTULO DOS EL PATRN QUE

Modelo Vista Controlador

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

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

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

CAPTULO TRES ASP.NET MVC 6

El cliente inicia una solicitud por HTTP al servidor, por ejemplo

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

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

GET: usualmente conocido como verbo obtener, no

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

Archivos especficos de usuario: archivos propios el software

Volviendo al tema de ASP.NET MVC el proceso de creacin de

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

Definicin de la plantila MVC 6

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

Tipo de Proyecto ASP.NET

la estrategia de autenticacin y autorizacin del sistema. Esto

No Authentication: en caso de que no se requiera

Windows Authentication: en ambientes corporativos

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

solicita al usuario autenticarse, sino que se utilizan los

El primer archivo global.json dentro del folder Solution Items es

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

la compilacin, tales como procesar archivos de LESS o SAAS

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

Entrando ya en temtica de propia ya de MVC, se pueden observar

Todo website tiene ciertos componentes que se repiten entre

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

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

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

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA

ASP.NET MVC 6 - UNA GUA INTRODUCTORIA