Sie sind auf Seite 1von 59

ASP.

NET MVC 6 - UNA


GUA INTRODUCTORIA

Walter Montes Delgado

ASP.NET MVC 6 - UNA GUA


INTRODUCTORIA
Walter Montes Delgado
This book is for sale at
http://leanpub.com/aspnetmvc6-unaguaintroductoria
This version was published on 2015-05-15

This is a Leanpub book. Leanpub empowers authors and


publishers with the Lean Publishing process. Lean Publishing is
the act of publishing an in-progress ebook using lightweight tools
and many iterations to get reader feedback, pivot until you have
the right book and build traction once you do.
2015 Walter Montes Delgado

Contents
ACERCA DEL AUTOR . . . . . . . . . . . . . . . . . . . .

INTRODUCCIN PERSONAL - PORQU UNA GUA INTRODUCTORIA A MVC . . . . . . . . . . . . . . . . .

CAPTULO UNO UNA INTRODUCCIN A .NET 2015


Y ASP.NET 5 . . . . . . . . . . . . . . . . . . . . . . . .

CAPTULO DOS EL PATRN QUE TODOS AMAN, MVC

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE


Una pequea introduccin al desarrollo web . . . .
ASP.NET MVC 6 . . . . . . . . . . . . . . . . . . .
VISTAS . . . . . . . . . . . . . . . . . . . . . . . .
CONTROLADORES . . . . . . . . . . . . . . . . .
MODELOS . . . . . . . . . . . . . . . . . . . . . .
EJERCICIOS . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

9
9
10
22
26
29
29

CAPTULO CUATRO CARACTERSTICAS AVANZADAS


Pase de informacin entre el controlador y la vista . . . .
Validaciones . . . . . . . . . . . . . . . . . . . . . . . . .
Vistas parciales vs ViewComponents (VCs) . . . . . . . .
Agregando una base de datos . . . . . . . . . . . . . . .

34
34
38
44
50

CONCLUSIN . . . . . . . . . . . . . . . . . . . . . . . . .

56

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
http://waltermontes.com

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#

INTRODUCCIN PERSONAL - PORQU UNA GUA INTRODUCTORIA A


MVC

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

CAPTULO UNO UNA INTRODUCCIN A .NET 2015 Y ASP.NET 5

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

CAPTULO UNO UNA INTRODUCCIN A .NET 2015 Y ASP.NET 5

5 con otra versin de .NET Framework instalada en el servidor)


como en Linux y OSX.
A este punto .NET Core 5 soporta solamente ASP.NET MVC en C#,
es decir, no Web Forms ni VB.NET. Esto no significa que no pueda
ser que Microsoft incluya soporte a Web Forms o VB.NET en el
futuro. Por otro lado .NET Framework 4.6 si 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 progra-

CAPTULO DOS EL PATRN QUE TODOS AMAN, MVC

macin en N-Capas, MVC puede seguir estos lineamientos como


separacin de proyectos para distribuir componentes comunes.
Todo esto es por 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:

Ambiente web

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).
http://www.bing.com

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

10

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

11

En el momento de escribir este libro la versin de Visual Studio 2015


que se puede utilizar para desarrollar MVC 6 est en RC (Release
Candidate).
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.

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

12

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

13

.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

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
https://msdn.microsoft.com/en-us/library/ms229002(v=vs.110).aspx

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

14

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.

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

15

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

16

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

17

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

18

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.

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

19

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.

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

20

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

21

El archivo Startup.cs es el que invoca los .json e inyecta dependencias necesarias (ms adelante se conversar un poco ms al
respecto).
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
http://jquery.com
http://getbootstrap.com/

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

22

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

23

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.

Etiqueta Environment

Al investigar un poco ms el archivo se puede encontrar la sentencia


@RenderBody() en esta parte del HTML se renderizarn 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.

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

24

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:

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

25

Bloque de cdigo

El smbolo @ tambin permite utilizar tambin lo que se conoce


como Tag Helpers. Los cuales bsicamente renderizan 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:

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

26

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

27

rutas que responden solicitudes, acorde a la siguiente convencin


http://localhost:
http://localhost:
http://localhost:
(*) nota: La palabra controller en la clase es removida del nombre.
As las solicitudes web se resuelven de la siguiente forma:

Procesamiento solicitudes web

Entra la solicitud iniciada desde el cliente (pc o dispositivo), el


servidor busca que haya una ruta que responda a esa url y responde
el accin que corresponde.
Como pudieron notar al ejecutar este proyecto la url http://localhost:
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:

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

28

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

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

29

retornados al cliente en el HTML * * Comentarios internos, no son


retornados al cliente * @* este es un comentario *@ * Comentarios
dentro de bloques de cdigo, no son retornados al cliente HTML *
@{ // 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
1
2
3
4

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.

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

30

3. Escribir algn contenido en la vista recin creada

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


la ruta: http://localhost:
5. Disfrutar el resultado

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

31

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
1
2
3
4
5
6

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


thod="post">
<input name="nombre" />
<input name="edad" type="number" />
<button type="submit" >Submit</button>
</form>

2. Crear la accin que responda a esta solicitud, en el archivo


Controllers/HomeController.cs agregar una funcin como la
siguiente

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

1
2
3
4
5
6
7

32

[HttpPost]
public IActionResult SubmitForm(string nombre, int eda\
d) {
var nombreRecibido = nombre;
var edadRecibida = edad;
return View("Index");
}

3. Crear un breakpoint en la lnea de cdigo de la funcin.

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 asp-action, los
cuales renderizan en el atributo action=Home/SubmitForm

CAPTULO TRES ASP.NET MVC 6 SIN PERDERSE

33

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.
Si no se indica este atributo en la funcin, por defecto se
crear la funcin respondiendo a solicitudes tipo GET.

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

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

35

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

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

36

4. Y se debe agregar este contenido


1
2
3
4
5
6

[HttpPost]
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
1
2
3
4

List<Item> items = new List<Item>(){


new Item() { Id=1, Nombre="Item1" },
new Item() { Id=2, Nombre="Item2" },
new Item() { Id=3, Nombre="Item3" }};

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

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

37

return View(items);

7. A la vista 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
1

@model List<Item>

8. 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 notar se utiliza el carcter
@ para ejecutar lgica en el archivo Razor
1
2
3
4
5
6

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

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


navegador en la direccin http://localhost:

10. Pasar informacin por ViewBag


11. En el mismo controlador, agregue la siguiente lnea de cdigo
dentro de la accin Index en cualquier parte antes de la
sentencia View.

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

38

ViewBag.Mensaje = "Este valor es pasado por ViewBag!";

12. En la vista agregue un poco de markup para mostrar el valor


en la vista de la siguiente forma
1
2
3
4
5
6
7
8
9
10

@model List<Item>
<h1>@ViewBag.Mensaje</h1>
<ul>
@foreach(var item in Model)
{
<li>id: @item.Id nombre: @item.Nombre</li>
}
</ul>

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


navegador en la direccin http://localhost:

Validaciones
En un sistema robusto, deben 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

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

39

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 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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 t\
em no debe superar los 10 caracteres")]
public string Nombre { get; set; }
}
}

De lo anterior se puede resaltar lo siguiente:


La inclusin del nombre de espacio DataAnnotations.

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

40

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.
2. 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.
1
2
3
4
5
6
7
8
9
10

public IActionResult Crear()


{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Crear(Item nuevoItem)
{
return View(nuevoItem);
}

De lo anterior se puede resaltar lo siguiente:


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.

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

41

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.
3. Agregar la informacin del formulario HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

@model Item
<form asp-action="crear" asp-controller="item" method=\
"post" asp-anti-forgery>
<div asp-validation-summary="ValidationSummary.All\
" class="text-danger"></div>
<div>
<label asp-for="Id"></label>
<input asp-for="Id" class="form-control" />
<span asp-validation-for="Id" class="text-dang\
er"></span>
</div>
<div>
<label asp-for="Nombre"></label>
<input asp-for="Nombre" class="form-control" />
<span asp-validation-for="Nombre" class="text-\
danger"></span>
</div>
<button type="submit" class="btn btn-default" >Sub\
mit</button>
</form>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScript\
sPartial"); }
}

De lo anterior se puede resaltar lo siguiente:


El formulario con el asp-action y asp-controller como

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

42

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.
El @model asignado es de tipo Item, esto le da el contexto al formulario para saber que ser un formulario
para ese tipo de dato.
El atributo asp-validation-summary=ValidationSummary.All
el cual si existen errores en el formulario generar un
tipo resumen de todos los problemas.
El atributo asp-for en labels e inputs, el cual extrae
los metadatos agregados a 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.
4. 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.

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

43

5. Ingrese valores que cumplan con las especificaciones de


validacin y realice el submit. Debera llegar al breakpoint
con los datos ingresados.
6. 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.
1
2
3
4
5
6
7
8
9
10

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Crear(Item nuevoItem)
{
if (ModelState.IsValid)
{
// guardar en la base de datos
return RedirectToAction("Index");
}
return View(nuevoItem);

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

11

44

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

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

45

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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. Lore\
m cum ut auctor vel integer mus tortor, adipiscing plat\
ea 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. Lore\
m cum ut auctor vel integer mus tortor, adipiscing plat\
ea penatibus, in placerat, lectus adipiscing! Ultrices \
scelerisque adipiscing parturient!</p>

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

46

</div>
<div class="noticias">
<h4>Hololens est aqu!</h4>
<p>Est porta ac magna lundium? Amet eros. Lore\
m cum ut auctor vel integer mus tortor, adipiscing plat\
ea 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
1
2

@RenderBody()
@await Html.PartialAsync("_bannerNoticias")

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


incrustada en cada pgina del sitio.

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

47

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
1
2
3
4
5
6
7
8
9
10
11

using Microsoft.AspNet.Mvc;
using System.Collections.Generic;
using System.Linq;
namespace <sunombredeespacio>.ViewComponents
{
public class BannerInteractivoViewComponent : V\
iewComponent
{
Dictionary<string, string> noticias
= new\
Dictionary<string, string>();

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

48

public IViewComponentResult Invoke()


{
noticias = new Dictionary<string, strin\
g>() {
{ "Costa Rica en el puesto #13 de F\
IFA","Est porta ac magna lundium? Amet eros. Lorem cum \
ut auctor vel integer mus tortor, adipiscing platea pen\
atibus, in placerat, lectus adipiscing! Ultrices sceler\
isque adipiscing parturient!"},
{ "Nuevo ASP.NET 5","Est porta ac m\
agna lundium? Amet eros. Lorem cum ut auctor vel intege\
r mus tortor, adipiscing platea penatibus, in placerat,\
lectus adipiscing! Ultrices scelerisque adipiscing par\
turient!"},
{ "Hololens est aqu!","Est porta\
ac magna lundium? Amet eros. Lorem cum ut auctor vel i\
nteger mus tortor, adipiscing platea penatibus, in plac\
erat, lectus adipiscing! Ultrices scelerisque adipiscin\
g parturient!"}
};
return View(noticias);
}
}
}

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

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

49

@model Dictionary<string, string>


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

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

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

50

Agregando una base de datos


Para esto utilizaremos Entity Framework Code First y obtendremos
la informacin de las noticias desde la base de datos. Debido a
esto, usaremos la instancia de LocalDB existente. 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

using
using
using
using

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

1. Primero agregue las dependencias de Entity Framework a


travs de NuGet al proyecto

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

51

2. Cuando finalice la instalacin, 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.

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

1
2
3
4
5
6
7
8
9

52

using Microsoft.Data.Entity;
namespace wm.website.ui.Models
{
public class NoticiasAppContext : DbContext
{
public DbSet<Noticia> Noticias { get; set; }
}
}

3. 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.
1
2
3
4
5
6
7
8
9
10
11

// Add EF services to the services container.


services.AddEntityFramework()
.AddSqlServer()
.AddDbContext<ApplicationDbContext>(op\
tions =>
options.UseSqlServer(Configuration\
["Data:DefaultConnection:ConnectionString"]))
.AddDbContext<NoticiasAppContext>(opti\
ons =>
options.UseSqlServer(Configuration\
["EntityFramework:ConnectionString"]));

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

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

53

{
"AppSettings": {
"SiteTitle": "wm.website.ui"
},
"Data": {
"DefaultConnection": {
"ConnectionString": "Server=(localdb)\\mss\
qllocaldb;Database=aspnet5-wm.website.ui-a913355d-72f6-\
4d80-892a-19699864e285;Trusted_Connection=True;Multiple\
ActiveResultSets=true"
}
},
"EntityFramework": {
"ConnectionString": "Data Source=INSTANCIA_SQL\
SERVER;Integrated Security=True;Connect Timeout=15;Encr\
ypt=False;TrustServerCertificate=False;ApplicationInten\
t=ReadWrite;MultiSubnetFailover=False"
}
}

5. Con esto listo, proceda a compilar el proyecto.


6. Volveremos al ViewComponent de Noticias y reemplazaremos las noticias locales por unas salidas de base de datos. En
el archivo ViewComponentes/BannerInteractivoViewComponent.cs.
1
2
3
4
5
6
7
8
9

using
using
using
using

Microsoft.AspNet.Mvc;
System.Collections.Generic;
System.Linq;
wm.website.ui.Models;

namespace <sunombredeespacio>.ui.ViewComponents
{
public class BannerInteractivoViewComponent : View\
Component

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

54

{
List<Noticia> noticias = new List<Noticia>();
NoticiasAppContext db;
public BannerInteractivoViewComponent(Noticias\
AppContext _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 Ri\
ca en el puesto #13 de FIFA", Descripcion="Est porta ac\
magna lundium? Amet eros. Lorem cum ut auctor vel inte\
ger mus tortor, adipiscing platea penatibus, in placera\
t, lectus adipiscing! Ultrices scelerisque adipiscing p\
arturient!" },
new Noticia() { Id=1, Titulo="Nuevo AS\
P.NET 5", Descripcion="Est porta ac magna lundium? Amet\
eros. Lorem cum ut auctor vel integer mus tortor, adip\
iscing platea penatibus, in placerat, lectus adipiscing\
! Ultrices scelerisque adipiscing parturient!" },
new Noticia() { Id=1, Titulo="Hololen\
s est aqu!", Descripcion="Est porta ac magna lundium?\
Amet eros. Lorem cum ut auctor vel integer mus tortor,\
adipiscing platea penatibus, in placerat, lectus adipi\
scing! Ultrices scelerisque adipiscing parturient!" }
});

CAPTULO CUATRO CARACTERSTICAS AVANZADAS

45
46
47
48
49
50

55

db.SaveChanges();
return View(db.Noticias.ToList());
}
}
}

7. Al concretar este punto, se podrn ver las noticias pero


saliendo de una base de datos SQL Server.

CONCLUSIN
Debido a que este libro fue escrito con una versin de Visual Studio
que an no es RTM y con varios componentes que an estn en
preview, estar tratando de actualizarlo en la siguiente direccin
ASP.NET MVC 6 - UNA GUA INTRODUCTORIA.
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: waltermontes@outlook.com
Twitter: @tewar93
http://waltermontes.com

http://waltermontes.com
mailto:waltermontes@outlook.com
https://twitter.com/tewar93
http://waltermontes.com

Das könnte Ihnen auch gefallen