Slides de mi charla en la #NetCore2017. Novedades de MVC Core (View Components, Tag Helpers, Convenciones propias, nuevo sistema de binding).

1. 24.01.2017
ASP.NET MVC
Core

2. {
“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
#NETCore2017 2

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
#NETCore2017 3
(COMPARÁNDOLO CON MVC5, CLARO)

4. • Razor Tag Helpers
• Razor View Components
• Unificación MVC – WebApi
• Convenciones personalizadas
Algunas cosas que son distintas
#NETCore2017 4
(Y LO QUE VEREMOS HOY)

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
#NETCore2017 5
(Y LO QUE DEBERÍAS IR VIENDO INCLUSO EN MVC5)

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
#NETCore2017 6
(¡SI CONOCES OWIN/KATANA ESTÁS DE SUERTE!)

7. Los Tag Helpers son etiquetas Razor
personalizadas que permiten encapsular
código Razor
Parecidos a los helpers tradicionales, pero
más potentes
Razor TAG
HELPERS
#NETCore2017 7
INTEGRANDO HELPERS CON MÁS FACILIDAD

8. Demo: Creando
un Tag Helper
8

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
#NETCore2017 9
(LAS CLAVES)

10. Formularios más claros
#NETCore2017 10
YA 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
11

12. Los view components son el equivalente a las
acciones hijas de MVC5
Invocadas desde Razor
Muestran UI parcial con lógica de negocio
VIEW
COMPONENTS
#NETCore2017 12
YA NO MÁS ACCIONES HIJAS

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
#NETCore2017 13
(LAS CUATRO COSAS A SABER)
• Bonus 1.1: Invocar view component como tag helper
• <vc:nombre attr=“value” …></vc:nombre>

14. Demo: View
Components
14

15. WebApi desaparece y se integra en MVC
Core
No más ApiController ni clases duplicadas
El model binding de MVC Core es una
mezcla del de MVC5 y WebApi 2
MVC Y WEBAPI
UNIFICADOS
#NETCore2017 15
¡NO MÁS WEBAPI Y MVC!

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 quiera
2. No usar [FromBody]
Model binding unificado
#NETCore2017 16
(LAS REGLAS PARA NEWBIES)

17. Demo: Model
Binding
17

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
#NETCore2017 18
(LAS CLAVES AVANZADAS)

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
#NETCore2017 19
(LO QUE DEBEMOS SABER)

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
#NETCore2017 20
(LO QUE DEBEMOS SABER)

21. Demo: Custom
InputFormatter
21

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
#NETCore2017 22
(O COMO DARLE AL CLIENTE LO QUE PIDE)

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
#NETCore2017 23
(UN PAR DE COSILLAS MÁS…)
services.AddMvc().Configure<MvcOptions>(options =>
{
options.OutputFormatters.Insert(0, new HttpNotAcceptableOutputFormatter());
}

24. • En MVC5 / WebApi2 si se devolvía un null ese era serializado
Un poco más restful
#NETCore2017 24
(DOS DETALLITOS…)
• En MVC Core eso devuelve un 204 (No Content)
• Las cadenas son devueltas usando text/plain

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
#NETCore2017 25
(UN GRAN PODER CONLLEVA UNA GRAN RESPONSABILIDAD)

26. Demo: Convenciones
propias
26

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
#NETCore2017 27
(CONSEJOS BÁSICOS PARA AYUDARTE A DAR EL SALTO)

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
#NETCore2017 28
(CONSEJOS BÁSICOS PARA AYUDARTE A DAR EL SALTO)

29. ¡GRACIAS!
@eiximenis
etomas@plainconcepts.com

30. www.plainconcepts.com
MADRID
Paseo de la Castellana 163, 10º
28046 Madrid. España
T. (+34) 91 5346 836
BILBAO
Nervión 3 , 6º
48001 Bilbao. España
T. (+34) 94 6008 168
BARCELONA
Av. Josep Tarradellas 10, 6º 1ª
08029 Barcelona. España
T. (+34) 93 3607 114
SEVILLA
Avenida de la innovación s/n
Edificio Renta Sevilla, 3º A
41020 Sevilla. España
DUBAI
Dubai Internet City. Building 1
73030 Dubai. EAU
T. (+971) 4 551 6653
LONDON
Impact Hub Kings Cross
24B York Way, N1 9AB
London. UK
SEATTLE
1511, Third Ave
Seattle WA 98101. USA
T. (+1) 206 708 1285