24.01.2017

ASP.NET MVC Core

#NETCore2017

{ “title”: “Developer”, “awards”: [“mvp”], “twitter”: “@eiximenis”, “blog”: “http://geeks.ms/etomas” “work” : { “name”: “Plain Concepts”, “office”: “BCN”, “url”: “http://www.plainconcepts.com” }}

Eduard Tomàs

2

#NETCore2017 3

• MVC Core mantiene el mismo modelo de desarrollo que MVC5• Vistas (Razor), Controladores, Acciones, Resultados de acción• Convenciones• Enrutamiento (tabla de rutas + enrutamiento por atributos)

• Si sabes MVC5 el salto inicial a MVC Core no es muy complejo• Misma filosofía

Lo que es (casi) igual(COMPARÁNDOLO CON MVC5, CLARO)

#NETCore2017 4

• Razor Tag Helpers• Razor View Components• Unificación MVC – WebApi• Convenciones personalizadas

Algunas cosas que son distintas(Y LO QUE VEREMOS HOY)

#NETCore2017 5

• MVC Core se alinea con las tendencias front modernas

• Directorio wwwroot donde se despliega la app• Ciclo de trabajo usando npm, gulp, bower, …

• Visual Studio 2015/2017 tiene gran soporte para esas herramientas

• Fácil uso con herramientas externas

La gran diferencia(Y LO QUE DEBERÍAS IR VIENDO INCLUSO EN MVC5)

#NETCore2017 6

• Muchas de las diferencias son de ASP.NET Core, no de MVC Core:

• Seguridad• Logging• Gestión de errores• Configuración• …

MVC Core es un middleware core(¡SI CONOCES OWIN/KATANA ESTÁS DE SUERTE!)

#NETCore2017 7

Los Tag Helpers son etiquetas Razor personalizadas que permiten encapsular código RazorParecidos a los helpers tradicionales, pero más potentes

Razor TAG HELPERSINTEGRANDO HELPERS CON MÁS FACILIDAD

8

Demo: Creando un Tag Helper

#NETCore2017 9

• Mayor integración con herramientas de diseño• Heredan de la clase TagHelper• Se pueden redefinir etiquetas HTML existentes• Una etiqueta HTML puede ser o no un Tag Helper en

función de sus atributos• Tienen conocimiento de su contenido

• Directiva @addTagHelper para importarlos

Razor Tag Helpers(LAS CLAVES)

#NETCore2017 10

Formularios más clarosYA NO MÁS @HTML…. (CASI)

<form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal"> <h4>Use a local account to log in.</h4> <div asp-validation-summary="All" class="text-danger"></div> <div class="form-group"> <label asp-for="Email" class="col-md-2 control-label"></label> <div class="col-md-10"> <input asp-for="Email" class="form-control" /> <span asp-validation-for="Email" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="Password" class="col-md-2 control-label"></label> <div class="col-md-10"> <input asp-for="Password" class="form-control" /> <span asp-validation-for="Password" class="text-danger"></span> </div> </div> <p> <a asp-action="ForgotPassword">Forgot your password?</a> </p> </form>

11

Demo: Tag Helper repeater

#NETCore2017 12

Los view components son el equivalente a las acciones hijas de MVC5Invocadas desde RazorMuestran UI parcial con lógica de negocio

VIEW COMPONENTSYA NO MÁS ACCIONES HIJAS

#NETCore2017 13

• Heredar de ViewComponent• Definir método Invoke (o InvokeAsync) que retorna

IViewComponentResult• Parámetros libres (método Invoke no es override).• Vista Default.cshml en

/Views/Shared/Components/<Componente>• Invocar desde Razor• @Component.Invoke(“nombre”, new {<parámetros>})

View Components(LAS CUATRO COSAS A SABER)

• Bonus 1.1: Invocar view component como tag helper

• <vc:nombre attr=“value” …></vc:nombre>

14

Demo: View Components

#NETCore2017 15

WebApi desaparece y se integra en MVC CoreNo más ApiController ni clases duplicadasEl model binding de MVC Core es una mezcla del de MVC5 y WebApi 2

MVC Y WEBAPI UNIFICADOS¡NO MÁS WEBAPI Y MVC!

#NETCore2017 16

1. Si el controlador es un controlador de API:1. Un solo parámetro complejo con [FromBody]2. N parámetros simples que irán en URL

2. Si el controlador es un controlador de Web:1. Tantos parámetros simples o complejos como se

quiera2. No usar [FromBody]

Model binding unificado(LAS REGLAS PARA NEWBIES)

17

Demo: Model Binding

#NETCore2017 18

• El content-type de la petición determina el model binding a usar

• Usar application/x-www-form-urlencoded usa model binding a lo MVC

• Usar application/json o text/xml usa model binding a lo WebApi

• Otros content-types usarán el model binding especificado por el desarrollador

Model binding unificado(LAS CLAVES AVANZADAS)

#NETCore2017 19

• Parámetros son leídos por value providers• Parámetros son enlazados por model binders• Un mismo parámetro puede ser enlazado múltiples veces• Un mismo parámetro puede ser enlazado desde URL o

desde el cuerpo de la petición• Se puede enlazar más de un parámetro desde la URL• Se puede enlazar más de un parámetro desde el cuerpo de

la petición

Model binding a lo MVC(LO QUE DEBEMOS SABER)

#NETCore2017 20

• Parámetros de URL son leídos por value providers• Parámetros de URL son enlazados por model binders• Se puede enlazar más de un parámetro desde la URL• Un mismo parámetro de URL puede ser enlazado varias veces• Solo un parámetro puede ser enlazado desde el cuerpo de la

petición• Leído y enlazado a partir de un InputFormatter• El parámetro enlazado a partir del cuerpo de la petición debe

estar marcado con [FromBody]

Model binding a lo WebApi(LO QUE DEBEMOS SABER)

21

Demo: Custom InputFormatter

#NETCore2017 22

• Integrada en aquellos action results que heredan de ObjectResult

• Usa la cabecera Accept de la petición• Se puede forzar un formato con [Produces]• La respuesta es generada por un OutputFormatter

• Podemos crear OutputFormatters nuevos para dar soporte a nuevos formatos

Negociación de contenido(O COMO DARLE AL CLIENTE LO QUE PIDE)

#NETCore2017 23

• Si no hay un OutputFormatter para el tipo especificado el fallback por defecto es JSON

• Se puede añadir el HttpNotAcceptableOutputFormatter que devolverá un 406

Negociación de contenido(UN PAR DE COSILLAS MÁS…)

services.AddMvc().Configure<MvcOptions>(options =>{    options.OutputFormatters.Insert(0, new HttpNotAcceptableOutputFormatter());}

#NETCore2017 24

• En MVC5 / WebApi2 si se devolvía un null ese era serializado

Un poco más restful(DOS DETALLITOS…)

• En MVC Core eso devuelve un 204 (No Content)

• Las cadenas son devueltas usando text/plain

#NETCore2017 25

• Podemos modificar las convenciones por defecto y agregar convenciones nuevas

• ¿Es buena idea modificar las convenciones? …• Habilita escenarios interesantes• Implementar IApplicationModelConvention

• Podemos agregar restricciones implementando IActionConstraintMetadata

Convenciones propias(UN GRAN PODER CONLLEVA UNA GRAN RESPONSABILIDAD)

26

Demo: Convenciones propias

#NETCore2017 27

• Empieza ya a usar npm, gulp y similares.• Olvida los bundles de MVC• Usa los IHttpResult de WebApi2. • Olvida el enrutado por verbo de WebApi.• Usa enrutado por atributos en WebApi.• Usa WebApi en modo OWIN.• Usa inyección de dependencias• Evita devolver datos desde MVC5. Usa WebApi.

De MVC5 a MVC Core(CONSEJOS BÁSICOS PARA AYUDARTE A DAR EL SALTO)

#NETCore2017 28

• Sustituye Razor Helpers por Tag Helpers• Sustituye acciones hijas por View Components

• Elimina [FromUri] en ApiControllers y verifica los bindings

• Y por supuesto: Valora si vale la pena migrar. ¡Recuerda todo lo que no es realmente MVC Core pero sí ASP.NET Core!

De MVC5 a MVC Core(CONSEJOS BÁSICOS PARA AYUDARTE A DAR EL SALTO)

¡GRACIAS!@eiximenis

etomas@plainconcepts.com

www.plainconcepts.com

MADRIDPaseo de la Castellana 163, 10º

28046 Madrid. EspañaT. (+34) 91 5346 836

BILBAONervión 3 , 6º

48001 Bilbao. EspañaT. (+34) 94 6008 168

BARCELONAAv. Josep Tarradellas 10, 6º 1ª

08029 Barcelona. EspañaT. (+34) 93 3607 114

SEVILLAAvenida de la innovación s/nEdificio Renta Sevilla, 3º A

41020 Sevilla. España

DUBAIDubai Internet City. Building 1

73030 Dubai. EAUT. (+971) 4 551 6653

LONDONImpact Hub Kings Cross24B York Way, N1 9AB

London. UK

SEATTLE1511, Third Ave

Seattle WA 98101. USAT. (+1) 206 708 1285