asp.net mvc 6 - una guÍa introductoria - add...

ASP.NET MVC 6 - UNAGUÍA INTRODUCTORIA

Walter Montes Delgado

ASP.NET MVC 6 - UNA GUÍAINTRODUCTORIA

Walter Montes Delgado

This book is for sale athttp://leanpub.com/aspnetmvc6-unaguaintroductoria

This version was published on 2015-05-15

This is a Leanpub book. Leanpub empowers authors andpublishers with the Lean Publishing process. Lean Publishing isthe act of publishing an in-progress ebook using lightweight toolsand many iterations to get reader feedback, pivot until you havethe right book and build traction once you do.

©2015 Walter Montes Delgado

http://leanpub.com/aspnetmvc6-unaguaintroductoria

http://leanpub.com

http://leanpub.com/manifesto

Contents

ACERCA DEL AUTOR . . . . . . . . . . . . . . . . . . . . 1

INTRODUCCIÓN PERSONAL - PORQUÉ UNAGUÍA IN-TRODUCTORIA A MVC . . . . . . . . . . . . . . . . . 2

CAPÍTULO UNO – UNA INTRODUCCIÓN A .NET 2015Y ASP.NET 5 . . . . . . . . . . . . . . . . . . . . . . . . 4

CAPÍTULO DOS – EL PATRÓN QUE TODOS AMAN, MVC 7

CAPÍTULO TRES – ASP.NET MVC 6 SIN PERDERSE . . . 9Una pequeña introducción al desarrollo web . . . . . . . 9ASP.NET MVC 6 . . . . . . . . . . . . . . . . . . . . . . 10VISTAS . . . . . . . . . . . . . . . . . . . . . . . . . . . 22CONTROLADORES . . . . . . . . . . . . . . . . . . . . 26MODELOS . . . . . . . . . . . . . . . . . . . . . . . . . 29EJERCICIOS . . . . . . . . . . . . . . . . . . . . . . . . . 29

CAPÍTULO CUATRO – CARACTERÍSTICAS AVANZADAS 34Pase de información entre el controlador y la vista . . . . 34Validaciones . . . . . . . . . . . . . . . . . . . . . . . . . 38Vistas parciales vs ViewComponents (VCs) . . . . . . . . 44Agregando una base de datos . . . . . . . . . . . . . . . 50

CONCLUSIÓN . . . . . . . . . . . . . . . . . . . . . . . . . 56

ACERCA DEL AUTORWalter Montes tiene múltiples años trabajando con tecnología Mi-crosoft desde desarrollo de software, instalación y configuración deproductos hasta arquitectura de soluciones. Al momento de escribireste libro, es el único Microsoft Most Valuable Professional (MVP)en ASP.NET/IIS de Centroamérica. Además de ser el administradorde la comunidad oficial de desarrolladores .NET en Costa Rica CRDevelopers .NET.

Cuenta con su propio blog en tecnología Microsoft y Open Sourceen la siguiente dirección: http://waltermontes.com¹

¹http://waltermontes.com

http://waltermontes.com


INTRODUCCIÓN PERSONAL- PORQUÉ UNA GUÍA

INTRODUCTORIA A MVCPara nadie es un secreto que .NET Framework de Microsoft es unaplataforma lo suficientemente robusta como para soportar millonesde aplicaciones críticas en las organizaciones, que además estarácon nosotros por muchísimos años en el futuro. Con el crecimientode la internet, Microsoft ha escuchado a los desarrolladores, em-presas y emprendedores, a raíz de esto ha orientado el desarrollode su Framework hacia algo que hoy en día con .NET 2015 es unaplataforma de desarrollo abierta, inclusiva y multiplataforma.

Sumado a todo esto que se ha ido viendo en los últimos añoscon la plataforma de Microsoft, está la orientación de ASP.NEThacia el software abierto y a cumplir y trabajar agradablemente conestándares mundiales que otras plataformas implementan. Pruebade esto fue el nacimiento de ASP.NET MVC, el cual le permite alos desarrolladores poder separar mejor las responsabilidades deun sistema, conocer completamente el markup de su aplicación ya entender como es la comunicación entre el cliente y el servidor,permitiendo optimizar sus sistemas. Es por esto que he tomado ladecisión de aportar a la comunidad hispana con un libro sencillo yal grano de ASP.NET MVC 6, para ayudarles a esas personas queapenas están entrando al mundo de MVC a entender este patrón yque las personas que ya lo conocen que puedan validar fundamentosbásicos mientras logran adentrarse un poco más.

Previo a iniciar a leer este libro sería ideal que ya conozca lassiguientes tecnologías al menos a un nivel básico:

• C#

INTRODUCCIÓN PERSONAL - PORQUÉ UNA GUÍA INTRODUCTORIA AMVC 3

• HTML• CSS• JavaScript

Todo lo presentado en este libro representa mi punto de vistapersonal y no busca representar a ningún empleador ni a Microsoftcomo corporación.

CAPÍTULO UNO – UNAINTRODUCCIÓN A .NET 2015

Y ASP.NET 5Antes de entrar en materia, es importante entender los cambiosque .NET Framework está teniendo para conocer cómo impactaesto a ASP.NET. Probablemente mucha de la información que serápresentada a continuación pueda ser confusa si estás empezando en.NET o ASP.NET, así que el consejo sería que más adelante vuelvasa esta sección y le des otra leída posterior a finalizar el libro.

.NET 2015 es el nombre que se le da a la nueva versión de .NETFramework y un buen punto de arranque es ver un diagrama comoMicrosoft presenta esta nueva versión liberada.

Vista de alto nivel de .NET 2015

Durante este libro se tomará un enfoque principalmente en a dondeestá ubicado ASP.NET dentro de esta “sombrilla” pero igualmenteles insto a conocer todo el mapa de .NET Framework y en mi

CAPÍTULO UNO – UNA INTRODUCCIÓN A .NET 2015 Y ASP.NET 5 5

parecer personal, principalmente sobre C# 6, Roslyn, CoreCLR y.NET Native.

Lo más notorio de este diagrama es la separación de .NET Frame-work en dos bloques: .NET Framework 4.6 y .NET Core 5.

.NET Framework 4.6*: Continúa el trabajo que trae .NET 4.5.2con muchísimas mejoras alrededor del framework. Se puede ubicarcomo el framework que viene incluido en el sistema operativo, eneste caso en Windows 10 y el cual recibe actualizaciones a travésdel conocido Windows Update. Es importante notar que sobre.NET Framework 4.6 están las tecnologías WPF, Windows Formsy ASP.NET versiones 4 y 5.

.NET Core 5: Microsoft lo describe como un “framework modular”,el cual llega a nosotros como una versión de software abierto, elcual puede ser desplegado de manera modular y local, ademásde ser mucho más ligero. Al ser modular busca también ser mul-tiplataforma, corriendo en Windows, Linux y OSX. A diferenciade .NET Framework 4.6, .NET Core 5 permite correr aplicacionesASP.NET solamente en la versión 5 y Universal Windows Apps con.NET Native.

De esta forma ASP.NET se ubica de la siguiente manera dentro deluniverso .NET.

Donde está ASP.NET 5 en el universo .NET

Con ASP.NET 5 corriendo en ambas “ediciones” del framework selogra desplegar y desarrollar aplicaciones web tanto en Windows(sobre .NET Framework 4.6 o corriendo lado a lado sobre .NET Core

CAPÍTULO UNO – UNA INTRODUCCIÓN A .NET 2015 Y ASP.NET 5 6

5 con otra versión de .NET Framework instalada en el servidor)como en Linux y OSX.

A este punto .NET Core 5 soporta solamente ASP.NET MVC en C#,es decir, no Web Forms ni VB.NET. Esto no significa que no puedaser que Microsoft incluya soporte a Web Forms o VB.NET en elfuturo. Por otro lado .NET Framework 4.6 si continúa soportando elmodelo de desarrollo en Web Forms y el lenguaje de programaciónVB.NET.

Algunas de las características más notables de ASP.NET 5 es launificación de MVC, Web API y Web Pages en un solo modeloconocido como MVC 6. Otra importante adición es la integracióncon herramientas populares de desarrollo web como Bower, Grunty Gulp, los cuales ya se podían utilizar con otros frameworks dedesarrollo como PHP, Node.JS y Ruby.

CAPÍTULO DOS – EL PATRÓNQUE TODOS AMAN, MVC

Modelo Vista Controlador, es lo que las siglas MVC representan,y su objetivo principal es lograr la separación entre estos tres“personajes”, lo cual permite, a través de este patrón de diseño,crear aplicaciones robustas tomando en consideración buenas prác-ticas aprendidas de otras plataformas de desarrollo y del propioMicrosoft.

Modelo Vista Controlador

La separación de conceptos busca precisamente que cada “bloque”de la aplicación realice solo el trabajo que le corresponde, asílogra obtener otras ventajas tales como mantenibilidad del sistema,extensibilidad y crecimiento ordenado.

Así como otros patrones ya buscan logra esto, tales como progra-

CAPÍTULO DOS – EL PATRÓN QUE TODOS AMAN, MVC 8

mación en N-Capas, MVC puede seguir estos lineamientos comoseparación de proyectos para distribuir componentes comunes.Todo esto es por MVC como tal es un patrón, no una tecnología.

Vista La vista es el conjunto de markup de la aplicación, es decirel HTML. En ASP.NET MVC este markup es pre renderizado através de una tecnología llamada Razor, la cual permite, entre otrascosas, ejecutar lógica previa a renderizar el HTML que será enviadoal cliente. Con Razor esta compilación o renderización ocurre dellado servidor. No debería incluir ningún tipo de lógica de negocio,sino más bien lógica propia de interacción con el usuario, comoiterar una lista (List) y presentar una lista ordenada (ul) de ítemsal usuario.

Modelo Son los objetos de dominio o negocio de la aplicación, másadelante, veremos que no es necesario que esté en elmismo proyectoque la aplicación web.

Controlador El controlador se encarga de recibir solicitudes y ser elpunto de entrada de la aplicación, a través de lo que se conoce comoacciones (Actions). Se basa en solicitudes HTTP y puede respondercon datos o con contenido, como HTML.

CAPÍTULO TRES – ASP.NETMVC 6 SIN PERDERSE

Una pequeña introducción al desarrolloweb

Esta sección es una introducción básica y esencial de desarrollo web,si ya estás familiarizado con desarrollo web en otras tecnologías,probablemente no sea necesario que pases por esta sección.

En el desarrollo web, se trabaja con un servidor que respondearchivos e información y un navegador que ejecuta y lee losarchivos. Por ejemplo:

Ambiente web

El cliente inicia una solicitud por HTTP al servidor, por ejemplohttp://www.bing.com², y el servidor, a través de ASP.NET procesa lasolicitud, contacta bases de datos y demás, y retorna páginas HTMLrenderizadas, archivos CSS, JavaScript y medios (imágenes, videos,etc).

²http://www.bing.com

http://www.bing.com

http://www.bing.com

CAPÍTULO TRES – ASP.NET MVC 6 SIN PERDERSE 10

HTML: markup de la página

JavaScript: lógica de lado cliente (pc de usuario)

CSS: hojas de estilo

La comunicación entre el cliente y el servidor se realiza a travésde HTTP por lo que cada solicitud se conforma de una solicitud(request) y una respuesta (response). Las solicitudes web tienencomo mínimo un encabezado (header) y un cuerpo (body). Elencabezado indica dirección de la solicitud, tipo de solicitud einformación del contenido aceptado, entre otros; y el cuerpo incluyeinformación que se envía al servidor.

De esta forma el tipo de solicitud se define a través de un verboHTTP que indica el tipo de solicitud, los principales verbos quese deben conocer son: * GET: usualmente conocido como verbo“obtener”, no incluye cuerpo

• POST: solicitud de envío de información, debe ir acompañadode un cuerpo de contenido, por ejemplo una imagen o unJSON

• PUT: similar al POST, sin embargo se utiliza para cuando serealizan actualización de recursos

• DELETE: similar al en estructura al GET, pero el servidordebe entender que se busca remover el recurso que se con-sulta en lugar de retornarlo

ASP.NET MVC 6

¿Qué mejor forma de comenzar a aprender una tecnología que irdirecto al código y explorarlo? Pues ese será el siguiente pasó eneste libro. Durante todo el recorrido se irán mencionando algunosconceptos importantes y al final un par de ejemplos.


En el momento de escribir este libro la versión de Visual Studio 2015que se puede utilizar para desarrollar MVC 6 está en RC (ReleaseCandidate).

Antes de comenzar, es importante entender que una plantilla deVisual Studio, no es más que una serie de DLLs que funcionan paraun fin específico incluidas en un proyecto + una base de códigoconfigurativa de la tecnología + uno o varios ejemplos de código.Es decir, si uno quisiera hasta podría empezar un proyecto sinnecesidad de seleccionar un template de Visual Studio.

La forma de “unificar” archivos en forma de proyecto es a travésde archivos con extensión .csproj o .vbproj, los cuales a su vez sepueden agrupar en una solución con archivos extensión .sln. Paraentender un poco más de archivos de proyecto y su funcionalidad.


Estructura de solución

Archivos no específicos de usuario: archivos propios del software,que pueden ser controlados por unmanejador de versiones tal comoTFS o Github.

• -sln• .csproj o .vbproj

Archivos específicos de usuario: archivos propios el software desar-rollado para el usuario de sistema actual. No son controlados porcontroladores de versiones.

• -suo


• .csproj.user o .vbproj.user

Volviendo al tema de ASP.NET MVC el proceso de creación deun 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 fi-jarse que seleccione .NET Framework 4.6 y colocar un nombre deproyecto y de solución acorde a sus necesidades ya que este seráel nombre de espacio que seguirá su proyecto (orden interno delproyecto). Usualmente y por estándar de Microsoft³ se nombra elnombre de espacio de la siguiente forma

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

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

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


Definición de la plantila MVC 6

Para los que vienen desde versiones anteriores previo a VisualStudio 2012, ha visto un par de cosas nuevas, entre ellas, que notuvieron que seleccionar el tipo de proyecto (Web Forms, MVC oWeb 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 eltérmino ONEASP.NET, el cual busca que se puedan crear proyectoscon tecnología Web Forms y MVC/Web API en un solo proyectode Visual Studio, a diferencia de como anteriormente solo se podíaseleccionar un tipo.

La siguiente pantalla que aparece a continuación da la opción deseleccionar una nueva plantilla de proyecto ASP.NET 5. En este casose debe seleccionar Web Site, el cual crea una plantilla para un sitioweb MVC y Web API.


Tipo de Proyecto ASP.NET

En la imagen anterior se ha resaltado la opción “Change Authenti-cation” para dar un poco de énfasis a esta opción. Si se le da clic aeste botón, aparece la siguiente pantalla.

Cambiar autenticación

Esta ventana da la opción de seleccionar la estrategia de auten-ticación, por lo cual se debe tener de antemano una idea de laestrategia de autenticación y autorización del sistema. Esto porque


más adelante se puede cambiar, sin embargo puede ser un pococomplicado si no se conoce bien a detalle cómo se implementacada modelo, ya que al seleccionar una opción se crean las clasesy configuraciones de ASP.NET y/o IIS para procesar un modelo deautenticación.

¿Cómo determinar el modelo de autenticación?

• No Authentication: en caso de que no se requiera autenti-cación o se desee implementar un tipo especial de autenti-cación

• Individual User Accounts: en caso de que se quiera contarcon usuarios propios para el sistema, es decir, con una basede datos SQL Server que almacene usuarios y contraseñas demanera segura y con buenas prácticas, y/o cuando se quiereautenticar usuarios con una tercera parte, tal como Facebook,Twitter, Google o Microsoft.

• Work And School Accounts: permite autenticar con provee-dores de autenticación empresiales, tal como Azure ActiveDirectory o Active Directory Federation Services.

• Windows Authentication: en ambientes corporativos cuandolas computadoras clientes están en un dominio en ActiveDirectory Domain Services, de esta forma no se solicita alusuario autenticarse, sino que se utilizan los credenciales deWindows.

Para la demostración se va a dejar marcada la opción de IndividualUser Accounts, el cual utiliza el Simple Membership Provider paraobtener autenticación de usuarios en una base de datos SQL Serveren LocalDB (más adelante se ahondará un poco más en este tema).

Al terminarse de aprovisionar el proyecto es probable que el nodo“References” aparezca de esta forma References (Restoring) porunos segundos mientras se terminan de descargar y aprovisionarlas DLLs necesarias. Al finalizar se deberá ver una estructura defolders y archivos similar a la de la imagen de la derecha.


En esta nueva versión de .NET y Visual Studio, NuGet toma muchoprotagonismo, ya que se busca que con .NET Core solo se traigalo mínimo necesario y lo demás que se ocupe sea descargado através de NuGet. Esta nueva estructura es muy similar a las de losproyectos en Github o Codeplex.

Estructura Proyecto

Los primeros niveles son: * Solutions Items * src


El primer archivo global.json dentro del folder Solution Items es elarchivo que contiene la información del proyecto para Visual Studiou otras herramientas, en este caso el archivo está casi vacío, solocontiene información de las carpetas y versión del SDK. Para los quevienen de versiones anteriores de .NET ver archivos configurativoscon extensión JSON es algo totalmente nuevo, por otro lado para losque vienen de otras plataformas como Node.JS es algo muy comúny natural.

Archivo global.json

En el siguiente folder src donde se ven los archivos propios delproyecto, como ya se han conocido anteriormente.

Dentro del folder src parecen los proyectos de la solución, en esteejemplo solo existe el proyecto de Interfaz de Usuario “wm.website.ui”.En este nuevo proyecto de MVC 6 aparece un folder llamadowwwroot, (nuevo en esta versión) el cual contiene archivos que nodeben ser compilados, tales como hojas de estilo (CSS), imágenes yarchivos de JavaScript.


Folder wwwroot

A nivel de raíz de proyecto hay otros archivos extensión .json,tales como bower.json, config.json, package.json y project.json. ¡Sí!No hay web.config por defecto, sin embargo ASP.NET 5 soportaarchivos configurativos en formato XML, INI o JSON. Para tratarde entender todo este cambio configurativo se hará un pequeñooverview de cada archivo.

bower.json

El archivo bower.json, contiene, como su nombre lo dice, configu-raciones propias de bower.


Bower

¿Qué es bower? Bower, al igual que NPM son administradores depaquetes, algo así como NuGet pero se comparten entre diferentestecnologías ya que usualmente no dependen de la tecnología back-end. En este caso Bower permite manejar dependencias de ladocliente, tales como jquery, bootstrap, etc.

config.json, package.json y project.json

Entre estos proyectos prácticamente se distribuyen las configura-ciones que anteriormente existían en el archivo web.config. Si eresnuevo en desarrollo web sobre .NET, el web.config era un archivoXML que contenía configuraciones propias del proyecto.

Durante este libro no se va a ahondar tantísimo en cada detallenuevo, más bien, se intentará que sea algo más funcional y directoa entender lo mínimo necesario de ASP.NET 5.


El archivo Startup.cs es el que invoca los .json e inyecta depen-dencias necesarias (más adelante se conversará un poco más alrespecto).

Entrando ya en temática de propia ya de MVC, se pueden observarlos folders Controllers, Views y Models. Para correr inicialmente laplantilla se debe presionar F5 y se podrá observar la nueva plantillacorriendo. Este template ya tiene incluidas las librerías jQuery⁴ yBootstrap⁵, además de otras más. Por lo cual ya trae un diseñoinicial y unas páginas iniciales que responden solicitudes a travésde controladores.

Ejecución básica

⁴http://jquery.com⁵http://getbootstrap.com/

http://jquery.com

http://getbootstrap.com/

http://jquery.com

http://getbootstrap.com/


VISTAS

Lo primero que se verá en esta línea serán las vistas y cómofuncionan entre sí.

¿Dónde están ubicadas? En el folder Views

¿Qué extensiones tienen? .cshtml o .vbhtml

¿Qué lenguaje se utiliza? HTML a través del pre compilador deHTML llamado Razor

Todo website tiene ciertos componentes que se repiten entre pági-nas, tipo “marco”. En Web Forms se le conocía como MasterPage,en MVC se le conoce como _Layout. Usualmente estas seccionesincluyen partes como encabezados, pie de página y menús denavegación. Por ejemplo en la imagen de la derecha lo que está enceleste sería el layout.

Layout

_layout.cshtml

Este archivo incluye todo el marco y plantilla HTML, es decir, tagscomo <head>,

Al abrir este archivo se puede apreciar algo nuevo en esta versión deASP.NET, el tag “environment” el cual permite, según el despliegueque se realice, agregar unos u otros archivos de scripts y hojas


de estilos. Por ejemplo para el momento de desarrollo sirven losarchivos fuentes iniciales, sin embargo en producción usualmentelos archivos que se envían a un usuario son los archivos de hojasde estilo y scripts minificados y obfuscados. Esto para evitar el usoinnecesario de ancho de banda y complicar la lectura del códigofuente que se descarga del lado cliente y que durante desarrollo sepueda realizar depuración de código JavaScript.

Etiqueta Environment

Al investigar un pocomás el archivo se puede encontrar la sentencia@RenderBody() en esta parte del HTML se renderizarán el resto depáginas que utilicen este archivo de layout.

La manera de asignar este layout a diferentes páginas es a través deuna variable llamada Layout. Es decir si en alguna vista se asignaalgún valor a esa variable global, esa página utilizará ese archivode layout. Con el siguiente diagrama se intentará explicar un pocomás claro esto.


Renderización vista

Como se pudo notar al ejecutar el proyecto, la página que fueretornada ya traía un layout y contenido renderizado, esto esporque por defecto cada vista creada tiene un layout por defecto.Esta configuración se realiza en el archivo _ViewStart.cshtml. Esdecir, si no se indica explícitamente en cada vista cual archivo delayout utilizar, la vista utilizará el que se indique en el archivo_ViewStart.cshtml

Asignación Layout

La sentencia anterior definida por

@{

}

Permite incrustar código C#, se conocen como bloques de código(code blocks) y permiten ejecutar lógica, por ejemplo:


Bloque de código

El símbolo @ también permite utilizar también lo que se conocecomo Tag Helpers. Los cuales básicamente renderizan bloques deHTML basándose en cierta lógica, fuera de caja se incluyen losconocidos como HTML Helpers.

Existen diferentes Tag helpers que se pueden utilizar por ejemplooptar por el que ha venido desde versiones anteriores:

HTML Helper

O utilizar uno de los nuevos tag helpers que permite un código más“limpio” al utilizar atributos de HTML. Por ejemplo:

Nuevo Tag Helpers

Al fin y al cabo ambos renderizan al final el siguiente bloque decódigo HTML:

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

Vistas de contenido


Las vistas contienen el HTML base + lo renderizado por el Razor. Sucontenido dependerá de la información que se desea mostrar, másadelante se mostrará cómo se asocia con un controlador y con unmodelo.

CONTROLADORES

Un controlador se conforma de una clase con funciones que respon-den solicitudes HTTP. La clase equivale al nombre del controladory la función equivale al nombre de la acción.

Nombre de Clase = Controlador Nombre de Función = Acción

Por ejemplo en el archivo Controllers/HomeController

Clase de controlador

De esa manera, se crea un extremo (endpoint web) que puede serconsultado a través de un cliente que pueda realizar solicitudesHTTP (un navegador, un robot, un dispositivo). Por ejemplo segúnla imagen anterior en HomeController existen las siguientes 2


rutas que responden solicitudes, acorde a la siguiente convenciónhttp://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), elservidor busca que haya una ruta que responda a esa url y respondeel acción que corresponde.

Como pudieron notar al ejecutar este proyecto la url http://localhost:

• Si no se indica la acción que se busca alcanzar, se utiliza pordefecto la que se llame Index

• Si no se indica el controlador que se busca alcanzar, se utilizapor defecto la que se llama Home

Esto se define a través del archivo Startup.cs en el siguiente bloquede código:


Plantilla de ruteo

En esa sección de código se define la convención a seguir, es decir{controlador}/{acción}/{id opcional}

El controlador en el tipo de función define qué tipo de dato seretornará al cliente. Por ejemplo en el homecontroller, todas lasacciones responden un tipo de dato IActionResult, en este caso todaslas funciones retornan un objeto de tipo View.

Plantilla de ruteo

La función View se puede colocar sin pasar parámetros por lo cualla función buscará una vista que esté en el folder *Views/

A pesar de todo esto, en lugar de un View se pueden retornarcualquier tipo de datos que herede de IActionResult.

Comentarios de código

Existen 3 tipos de comentarios en Razor: * Comentarios HTML, son


retornados al cliente en el HTML * * Comentarios internos, no sonretornados al cliente * @* este es un comentario *@ * Comentariosdentro de bloques de código, no son retornados al cliente HTML *@{ // este es un comentario }

Es importante saber qué tipo de comentario utilizar, para evitar estarretornando al cliente comentarios internos.

MODELOS

Los modelos son clases que representan objetos de dominio ypueden ser utilizados por la lógica de negocio y acceso a datos paramanipular información. Están ubicado en la plantilla en el folderModels.

EJERCICIOS

Agregar una nueva vista

Para este ejercicio se necesitará una nueva vista que sea retornadaal hacer una consulta HTTP a un url.

1. En el archivo Controllers/HomeController.cs crear una fun-ción que permita retornar una nueva vista

1 public IActionResult VistaPersonalizada()

2 {

3 return View();

4 }

2. Posterior a crear el extremo que ya recibe las solicitudes web,se debe crear una vista que sea retornada por la función View.


3. Escribir algún contenido en la vista recién creada

4. Probar el código ejecutando el proyecto (F5) y navegando ala ruta: http://localhost:

5. Disfrutar el resultado


Comunicación cliente hacia servidor

Para este ejercicio se necesitará un formulario apuntando a travésde un método de tipo post a una acción en Home y este retornaráuna vista.

1. En el archivo Views/Home/Index.cshtml agregar un formula-rio apuntando a una acción del controladorHome, al comienzodel archivo

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

2 thod="post">

3 <input name="nombre" />

4 <input name="edad" type="number" />

5 <button type="submit" >Submit</button>

6 </form>

2. Crear la acción que responda a esta solicitud, en el archivoControllers/HomeController.cs agregar una función como lasiguiente


1 [HttpPost]

2 public IActionResult SubmitForm(string nombre, int eda\

3 d) {

4 var nombreRecibido = nombre;

5 var edadRecibida = edad;

6 return View("Index");

7 }

3. Crear un breakpoint en la línea de código de la función.

4. Ejecutar el código, ingresar datos y dar clic a submit.

5. Visual Studio detectará el Breakpoint y este permitirá ver sise pasaron correctamente los valores.

¿Qué se puede notar del ejercicio anterior?

• Los atributos personalizados asp-controller y asp-action, loscuales renderizan en el atributo action=”Home/SubmitForm”


• El uso del atributo name en los inputs para ser relacionadocon los parámetros de la función, el cual permite realizar la“liga” entre los valores enviados por el formulario con losrecibidos en la función. De esta forma si hay un input conel atributo name y la acción a la que se apunta recibe unparámetro con el mismo nombre al valor del atributo name,ASP.NET los relaciona y asigna el valor a la variable.

• El uso del atributo [HttpPost] en la función SubmitForm, elcual diferencia que esta acción responderá solo a solicitudesde tipo POST.

– Si no se indica este atributo en la función, por defecto secreará la función respondiendo a solicitudes tipo GET.

CAPÍTULO CUATRO –CARACTERÍSTICAS

AVANZADASEn el capítulo anterior se hizo un recorrido inicial por ciertasfuncionalidades principales de ASP.NET MVC 6. En el cual se pudoconocer lo básico de cada componente y cómo lograr comunicacióny empezar a extender el proyecto básico.

Pase de información entre elcontrolador y la vista

Para compartir información entre una acción y una vista existendiversas estrategias que se pueden utilizar, tales como: * ViewDatapermite pasar datos entre un controlador y una vista, solo sobrevivedurante el solicitud actual * ViewBag es una propiedad dinámicaque permite utilizar “dynamics” de C# 4.0, solo sobrevive durante lasolicitud actual. Usualmente sirve para pasar datos sencillos. * Tem-pData permite pasar información entre solicitudes subsecuentes(por ejemplo redirección) *Modelo este modo permite asignar a unavista un modelo específico y pasarla por parámetros al retornar lavista

Esta sección busca explicar un pocomás como utilizar Razor y haceralgunas cosas un poco más complejas tales como renderizar listas ypasar información por ViewBag.

Adentrándonos a Razor, renderizar una lista

1. Crear un controlador llamado ItemsController

CAPÍTULO CUATRO – CARACTERÍSTICAS AVANZADAS 35

2. Crear un folder en la ruta Views/Items y una vista llamadaIndex dentro de ese folder

3. Crear un modelo llamado Items con el siguiente contenido.Clic derecho en el folder Models > Add > New Item…


4. Y se debe agregar este contenido

1 [HttpPost]

2 public class Item

3 {

4 public int Id { get; set; }

5 public string Nombre { get; set; }

6 }

5. En el controlador Items en la acción Index se deben crearalgunos ítems de prueba para luego renderizarlos en la vista,de la siguiente forma

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

2 new Item() { Id=1, Nombre="Item1" },

3 new Item() { Id=2, Nombre="Item2" },

4 new Item() { Id=3, Nombre="Item3" }};

6. Para renderizarlos en la vista Index, se debe pasar a travésde parámetros de la sentencia View(), en el mismo archivoItemsController, posterior a inicializar la lista


1 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 archivode vista. En el archivo Views/Items/Index borre todo elcontenido y agregue la siguiente línea de código

1 @model List<Item>

8. Lo siguiente sería iterar en la lista que está siendo retornaday renderizar uno a uno los ítems. Use el siguiente bloque decódigo para este fin. Como podrá notar se utiliza el carácter@ para ejecutar lógica en el archivo Razor

1 <ul>

2 @foreach(var item in Model)

3 {

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

5 }

6 </ul>

9. Ahora ejecute la aplicación (F5) y vea el resultado en elnavegador en la dirección http://localhost:

10. Pasar información por ViewBag11. En el mismo controlador, agregue la siguiente línea de código

dentro de la acción Index en cualquier parte antes de lasentencia View.


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

12. En la vista agregue un poco de markup para mostrar el valoren la vista de la siguiente forma

1 @model List<Item>

2

3 <h1>@ViewBag.Mensaje</h1>

4

5 <ul>

6 @foreach(var item in Model)

7 {

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

9 }

10 </ul>

13. Ahora ejecute la aplicación (F5) y vea el resultado en elnavegador en la dirección http://localhost:

Validaciones

En un sistema robusto, deben existir validaciones de datos delado cliente y de lado servidor, si bien estas se pueden crearmanualmente, “uno a uno”, esta tarea puede ser un poco engorrosa


y compleja de mantener. Para esto ASP.NET MVC cuenta conuna librería llamada DataAnnotations la cual permite definir quévalidaciones se necesitan en el formulario de lado servidor y a travésde jQuery Validate validar lado cliente.

Las dataannotations están en el nombre de espacio

System.ComponentModel.DataAnnotations

y permiten no solo especificar cierta información de validación, sinotambién ciertos metadatos que Razor entenderá, como cual textomostrar en el label.

DataAnnotations

1. Vaya al archivo Models/Item.cs y reemplace el contenido dela clase por el siguiente.

1 using System.ComponentModel.DataAnnotations;

2

3 namespace <sunombredeespacio>.Models {

4 public class Item

5 {

6 [Required(ErrorMessage = "El identificador del\

7 ítem es obligatorio")]


9 [Required(ErrorMessage ="El nombre del ítem es\

10 obligatorio")]

11 [Display(Name ="Nombre de ítem")]

12 [MaxLength(10, ErrorMessage ="El nombre del ít\

13 em no debe superar los 10 caracteres")]

14 public string Nombre { get; set; }

15 }

16 }

De lo anterior se puede resaltar lo siguiente:• La inclusión del nombre de espacio DataAnnotations.


• El atributo sobre las propiedades de clase Requiredel cual permite definir que sea un campo requerido,así jQuery validate podrá colocarlo como requerido.Incluye la propiedad ErrorMessage, el cual permiteagregar un mensaje personalizado en caso de que nose cumpla la condición indicada.

• El atributo Display que permite cambiar la forma enque en un label se mostrará el nombre del campo.

• El atributoMaxLength es uno demuchos otros atributosque se pueden agregar a propiedades de clase paradefinir características.

2. Para poder probar una validación debe primero existir unformulario de ingreso de datos. Para esto cree dos acciones enel controlador ItemsController. Uno para retornar el HTMLy otro para recibir el submit del formulario. De la siguientemanera.

1 public IActionResult Crear()

2 {

3 return View();

4 }

5 [HttpPost]

6 [ValidateAntiForgeryToken]

7 public IActionResult Crear(Item nuevoItem)

8 {

9 return View(nuevoItem);

10 }

De lo anterior se puede resaltar lo siguiente:• Dos acciones, una para retornar el formulario vacío yotro para recibir los datos del submit.

• El atributo [ValidateAntiForgeryToken] el cual permiteevitar ataques de CSRF. Debería ser utilizado siempreen las solicitudes de tipo POST o PUT.


• Un retorno en el POST de la sentencia View() conel modelo que ingresó por la solicitud, es decir, seretorna el formulario con la información previamenteingresada.

3. Agregar la información del formulario HTML

1 @model Item

2

3 <form asp-action="crear" asp-controller="item" method=\

4 "post" asp-anti-forgery>

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

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

7 <div>

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

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

10 <span asp-validation-for="Id" class="text-dang\

11 er"></span>

12 </div>

13 <div>

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

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

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

17 danger"></span>

18 </div>

19

20 <button type="submit" class="btn btn-default" >Sub\

21 mit</button>

22 </form>

23 @section Scripts {

24 @{await Html.RenderPartialAsync("_ValidationScript\

25 sPartial"); }

26 }

De lo anterior se puede resaltar lo siguiente:• El formulario con el asp-action y asp-controller como


ya se mencionó anteriormente para indicar cual ex-tremo contactar.

• El atributo asp-anti-forgery para que el formulariosea compatible con el atributo anteriormente agregado[ValidateAntiForgeryToken] y así evitar ataques de CSRF.

• El @model asignado es de tipo Item, esto le da el con-texto al formulario para saber que será un formulariopara ese tipo de dato.

• El atributo asp-validation-summary=”ValidationSummary.All”el cual si existen errores en el formulario generará untipo resumen de todos los problemas.

• El atributo asp-for en labels e inputs, el cual extraelos metadatos agregados a través de las propiedades declases y DataAnnotations y los renderiza, por ejemplo,asigna el tipo de dato del input, el label, y mensajes deerror.

• La sección Scripts, que permite renderizar los scripts dejQuery Validate que interceptan un submit y validan delado cliente un formulario.

4. Agregue un breakpoint en el action que recibe la solicitud, esdecir, el que tiene le atributo HttpPost y corra el proyecto (F5).En el formulario, sin llenar ningún campo de clic en submit.


5. Ingrese valores que cumplan con las especificaciones devalidación y realice el submit. Debería llegar al breakpointcon los datos ingresados.

6. Lo que se acaba de realizar es validación de lado cliente,la cual puede extenderse del lado servidor con la siguientesentencia en la acción post del crear.

1 [HttpPost]

2 [ValidateAntiForgeryToken]

3 public IActionResult Crear(Item nuevoItem)

4 {

5 if (ModelState.IsValid)

6 {

7 // guardar en la base de datos

8 return RedirectToAction("Index");

9 }

10 return View(nuevoItem);


11 }

7. La variable ModelState permite validar el estado de lo quese haya utilizado como contexto del formulario. Si los datosse ingresan correctamente, el ModelState.IsValid será true, decaso contrario será un false.

Vistas parciales vs ViewComponents(VCs)

Los VCs son muy similares a lo que en versiones anteriores seconocían como Vistas parciales, las cuales buscan renderizar pe-queños bloques de HTML, sirve en casos en los que se requieramanipular pequeñas porciones de una página, por ejemplo conmanejo asincrónico de una página. La principal diferencia es queun ViewComponent es mucho más poderoso que una Vista Parcialdebido a las formas de manipular la comunicación.

Ejemplo de Vista Parcial

1. Crear una vista en el folder Views/Shared que será invocadadesde el _Layout.cshtml


2. Reemplace todo el contenido por el contenido a continuación(el css se agrega en el mismo archivo solamente por simplici-dad, no es una buena práctica bajo ninguna razón)

1 <div class="bannerNoticias">

2 <p>Noticias</p>

3 <div class="noticias">

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

5 <p>Est porta ac magna lundium? Amet eros. Lore\

6 m cum ut auctor vel integer mus tortor, adipiscing plat\

7 ea penatibus, in placerat, lectus adipiscing! Ultrices \

8 scelerisque adipiscing parturient!</p>

9 </div>


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






16 </div>


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





23 </div>

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

25 </div>

26 <style>

27 .bannerNoticias {

28 border:solid 1px #aaa;

29 border-radius:10px;

30 padding:12px;

31 }

32 .bannerNoticias .noticias {

33 display:inline-block;

34 float:left;

35 max-width:200px;

36 font-size:12px;

37 }

38 .clearer{

39 clear:both;

40 }

41 </style>

3. En el archivo de Layout, inserte la siguiente línea de códigodebajo de la sentencia @RenderBody

1 @RenderBody()

2 @await Html.PartialAsync("_bannerNoticias")

4. Ejecute el proyecto (F5) y podrá apreciar una Vista parcialincrustada en cada página del sitio.


Ejemplo de ViewComponent

En este caso crearemos un viewcomponent que logre lo mismoque la vista parcial anterior, sin embargo esta vez obtendremos lasnoticias desde el código, lo quemás adelante podría ser reemplazadopor datos desde una base de datos. 1. Crear un folder llamadoViewComponents en la raíz del proyecto. 2. Cree una clase llamadaBannerInteractivoViewComponent.cs 3. Reemplace el contenido dela clase por el siguiente

1 using Microsoft.AspNet.Mvc;

2 using System.Collections.Generic;

3 using System.Linq;

4

5 namespace <sunombredeespacio>.ViewComponents

6 {

7 public class BannerInteractivoViewComponent : V\

8 iewComponent

9 {

10 Dictionary<string, string> noticias = new\

11 Dictionary<string, string>();


12

13 public IViewComponentResult Invoke()

14 {

15 noticias = new Dictionary<string, strin\

16 g>() {

17 { "Costa Rica en el puesto #13 de F\

18 IFA","Est porta ac magna lundium? Amet eros. Lorem cum \

19 ut auctor vel integer mus tortor, adipiscing platea pen\

20 atibus, in placerat, lectus adipiscing! Ultrices sceler\

21 isque adipiscing parturient!"},

22 { "Nuevo ASP.NET 5","Est porta ac m\

23 agna lundium? Amet eros. Lorem cum ut auctor vel intege\

24 r mus tortor, adipiscing platea penatibus, in placerat,\

25 lectus adipiscing! Ultrices scelerisque adipiscing par\

26 turient!"},

27 { "¡Hololens está aquí!","Est porta\

28 ac magna lundium? Amet eros. Lorem cum ut auctor vel i\

29 nteger mus tortor, adipiscing platea penatibus, in plac\

30 erat, lectus adipiscing! Ultrices scelerisque adipiscin\

31 g parturient!"}

32 };

33

34 return View(noticias);

35 }

36 }

37 }

1. Ahora, cree un folder en la dirección Views/Shared/Compo-nents y dentro de ese folder, cree otro llamado BannerInterac-tivo (Views/Shared/Components/BannerInteractivo) y luegocree una vista que se llameDefault.cshtml, agrege el siguientecontenido a la vista (el css se agrega en el mismo archivosolamente por simplicidad, no es una buena práctica bajoninguna razón).


1 @model Dictionary<string, string>

2 <div class="bannerNoticias">

3 <p>Noticias</p>

4 @foreach (var item in Model)

5 {


7 <h4>@item.Key</h4>

8 <p>@item.Value</p>

9 </div>

10 }

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

12 </div>

13 <style>

14 .bannerNoticias {

15 border: solid 1px #aaa;

16 border-radius: 10px;

17 padding: 12px;

18 }

19

20 .bannerNoticias .noticias {

21 display: inline-block;

22 float: left;

23 max-width: 200px;

24 font-size: 12px;

25 }

26

27 .clearer {

28 clear: both;

29 }

30 </style>

2. Si ejecuta el proyecto (F5) verá el mismo resultado 2 veces,sin embargo con el ViewComponent podrá sacar los datosdesde una base de datos más adelante, e inclusive ejecutarlode manera asincrónica.


Agregando una base de datos

Para esto utilizaremos Entity Framework Code First y obtendremosla información de las noticias desde la base de datos. Debido aesto, usaremos la instancia de LocalDB existente. 1. Crearemos unaentidad de noticia para este ejemplo, en Models cree una clase quese llame Noticia.cs, reemplace el contenido con el siguiente

1 using System;



4 using System.Threading.Tasks;

5

6 namespace <sunombredeespacio>.ui.Models

7 {

8 public class Noticia

9 {


11 public string Titulo { get; set; }

12 public string Descripcion { get; set; }

13 }

14 }

1. Primero agregue las dependencias de Entity Framework através de NuGet al proyecto


2. Cuando finalice la instalación, vamos a proceder a agregar elcontexto de Code First. En el mismo folder de Models, creeun archivo que se llame NoticiasAppContext.cs y reemplaceel contenido con el siguiente.


1 using Microsoft.Data.Entity;

2

3 namespace wm.website.ui.Models

4 {

5 public class NoticiasAppContext : DbContext

6 {

7 public DbSet<Noticia> Noticias { get; set; }

8 }

9 }

3. Con esto listo, se debe configurar Entity Framework (registrarla dependencia) y agregar la conexión a la base de datos.Esto se realiza a través del archivo Startup.cs. en el métodoConfigureServices se agregan las configuraciones, encontraráque ya se está agregando Entity Framework y configurado uncontexto, este contexto es el que ya se usa para autenticaciónde usuarios. Pero debemos agregar el nuevo contexto para lasNoticias.

1 // Add EF services to the services container.

2 services.AddEntityFramework()

3 .AddSqlServer()

4 .AddDbContext<ApplicationDbContext>(op\

5 tions =>

6 options.UseSqlServer(Configuration\

7 ["Data:DefaultConnection:ConnectionString"]))

8 .AddDbContext<NoticiasAppContext>(opti\

9 ons =>

10 options.UseSqlServer(Configuration\

11 ["EntityFramework:ConnectionString"]));

4. Como ve en la sección de Configuration de este NuevoDbContext hay un string, este es el que indica a cual basede datos conectarse. Esta información se extrae del archivoconfig.json. Este archivo ya cuenta con un connection string,utilizado para la administración de usuarios fuera de caja.


1 {

2 "AppSettings": {

3 "SiteTitle": "wm.website.ui"

4 },

5 "Data": {

6 "DefaultConnection": {

7 "ConnectionString": "Server=(localdb)\\mss\

8 qllocaldb;Database=aspnet5-wm.website.ui-a913355d-72f6-\

9 4d80-892a-19699864e285;Trusted_Connection=True;Multiple\

10 ActiveResultSets=true"

11 }

12 },

13 "EntityFramework": {

14 "ConnectionString": "Data Source=INSTANCIA_SQL\

15 SERVER;Integrated Security=True;Connect Timeout=15;Encr\

16 ypt=False;TrustServerCertificate=False;ApplicationInten\

17 t=ReadWrite;MultiSubnetFailover=False"

18 }

19 }

5. Con esto listo, proceda a compilar el proyecto.6. Volveremos al ViewComponent de Noticias y reemplazare-

mos las noticias locales por unas salidas de base de datos. Enel archivo ViewComponentes/BannerInteractivoViewCompo-nent.cs.

1 using Microsoft.AspNet.Mvc;



4 using wm.website.ui.Models;

5

6 namespace <sunombredeespacio>.ui.ViewComponents

7 {

8 public class BannerInteractivoViewComponent : View\

9 Component


10 {

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

12 NoticiasAppContext db;

13

14 public BannerInteractivoViewComponent(Noticias\

15 AppContext _context)

16 {

17 db = _context;

18 }

19 public IViewComponentResult Invoke()

20 {

21 // Limpiemos la base de datos

22 if (db.Noticias.Count() > 0)

23 db.Noticias.RemoveRange(db.Noticias);

24 db.SaveChanges();

25

26 // Recreemos los 3 archivos

27 db.Noticias.AddRange(new List<Noticia>() {

28 new Noticia() { Id=1, Titulo="Costa Ri\

29 ca en el puesto #13 de FIFA", Descripcion="Est porta ac\

30 magna lundium? Amet eros. Lorem cum ut auctor vel inte\

31 ger mus tortor, adipiscing platea penatibus, in placera\

32 t, lectus adipiscing! Ultrices scelerisque adipiscing p\

33 arturient!" },

34 new Noticia() { Id=1, Titulo="Nuevo AS\

35 P.NET 5", Descripcion="Est porta ac magna lundium? Amet\

36 eros. Lorem cum ut auctor vel integer mus tortor, adip\

37 iscing platea penatibus, in placerat, lectus adipiscing\

38 ! Ultrices scelerisque adipiscing parturient!" },

39 new Noticia() { Id=1, Titulo="¡Hololen\

40 s está aquí!", Descripcion="Est porta ac magna lundium?\

41 Amet eros. Lorem cum ut auctor vel integer mus tortor,\

42 adipiscing platea penatibus, in placerat, lectus adipi\

43 scing! Ultrices scelerisque adipiscing parturient!" }

44 });


45 db.SaveChanges();

46

47 return View(db.Noticias.ToList());

48 }

49 }

50 }

7. Al concretar este punto, se podrán ver las noticias perosaliendo de una base de datos SQL Server.

CONCLUSIÓNDebido a que este libro fue escrito con una versión de Visual Studioque aún no es RTM y con varios componentes que aún están enpreview, estaré tratando de actualizarlo en la siguiente direcciónASP.NET MVC 6 - UNA GUÍA INTRODUCTORIA⁶.

Dependiendo del éxito de este libro, estaré tratando de sacar otrosmás avanzados y de los cuales tengo algunos temas en mente, talescomo características avanzadas en MVC, aplicaciones MVC 6 conAngularJS, Web API avanzado, Microsoft Azure, entre otros. Asíque agradezco si pudieran brindarme feedback de este, mi primerlibro técnico. Gracias a su feedback estaré enviándoles a su correoelectrónico cuando saque actualizaciones de esta serie u otros librosde interés que genere en español.

Contacto

Email: [email protected]⁷

Twitter: @tewar93⁸

http://waltermontes.com⁹

⁶http://waltermontes.com⁷mailto:[email protected]⁸https://twitter.com/tewar93⁹http://waltermontes.com


mailto:[email protected]

https://twitter.com/tewar93



mailto:[email protected]

https://twitter.com/tewar93


asp.net mvc 6 - una guÍa introductoria - add...

Documents