Fundamentos del Framework ASP.NET MVC 5 para el desarrollo de Aplicaciones Web multi-propósito y una comparación con su antecesor: ASP.NET Web Forms

1. Desarrollo de
Aplicaciones Web con
ASP.NET MVC 5
Módulo 1:Introducción a
ASP.NET MVC 5
Oscar Gensollen Arroyo
Microsoft Certified Trainer
MCSD Web + SharePoint
Arquitecto, Consultor en TI
oscar.gensollen@formativaperu.com
@oscargensollen

2. Agenda
 Arquitectura de ASP.NET MVC 5
 Web Forms versus MVC
 Creación y estructura de un proyecto
MVC

3. Desarrollo
Módulo 1
Arquitectura de ASP .NET MVC 5

4.  ASP .NET MVC es…
• Un nuevo tipo de proyecto para ASP .NET
• Una opción de desarrollo
• Mas control sobre el<html/>
• Un framework mas facil de probar
• No es para todos los casos
 Cuál es el punto con MVC?
• No es Web Forms vNext…es una alternativa más.
• Flexible, muy extensible
• Fundamental, parte de System.Web
• Integrado, NHibernate, Brail, etc, pueden ser
empleados con total libertad.
Arquitectura de ASP .NET MVC 5

5.  Motivaciones principales
 Clara separación de intereses
• Fácil testing con TDD
• Permite crear aplicaciones altamente mantenibles
 Extensible y conectable
• Soporta el reemplazo de cualquier componente
del sistema.
 Permite URLs claras y HTML simple
• Estructuras amigables SEO y REST
 Gran integración con ASP.NET
• Todos los proveedores de siempre funcionan
• Membership, Session, Caching, etc.
• Diseñador ASP.NET en VS2013
Arquitectura de ASP .NET MVC 5

6. Comparación de patrones
(1)
Arquitectura de ASP .NET MVC 5

8. Arquitectura de ASP .NET MVC 5
Browser
Controller
View Model
Database
Web Server HTTP
SQL

9. Routing
 http://host:port/Products/View/100
Arquitectura de ASP .NET MVC 5

10. Routing
 Decide que controlador responde a cada
petición
 Basándose en la URL
 Mapea una petición a una acción (método
de un controlador)
 Permite la creación de URLs personalizadas
con mucha facilidad
Arquitectura de ASP .NET MVC 5

11. El patrón MVC (mas explicado)
 Controlador
 Responde a las peticiones http
 Interactúa con el modelo
 Pasa los datos a la vista
 Modelo
 Contiene la lógica de negocio y datos
 Vista
 Representa visualmente (HTML) unos datos
Arquitectura de ASP .NET MVC 5

12. Controladores
 Manejan la lógica de presentación
 Son los que reciben las peticiones, en
base a una URL
 Derivan la petición a una acción
 Programáticamente un método
Arquitectura de ASP .NET MVC 5

13. Action Results
 Cada acción de un controlador debe
devolver un resultado que es enviado al
browser
 Ejemplos:
 ViewResult: Devuelve una vista (html)
 JsonResult: Devuelve datos en json
 FileResult: Devuelve el contenido de un
fichero
Arquitectura de ASP .NET MVC 5

14. Vistas
 Las vistas reciben datos del controlador y
muestran estos datos
 Se implementan mediante páginas .aspx
 Sin controles de servidor
 Sin «code-behind»
Arquitectura de ASP .NET MVC 5

15. Vistas parciales
 Una vista parcial es una vista que se
muestra dentro de otra vista
 Se implementan como controles .ascx
 Sin controles runat=«server»
 Sin code behind
 Dan soporte para reutilización y
composición
Arquitectura de ASP .NET MVC 5

16. Helpers
 ASP.NET MVC viene con clases que
ayudan a generar HTML de forma más
simple
 La propiedad HTML de las vistas accede al
HtmlHelper que tiene métodos para
generar código HTML típico (p.ej. Controles
html)
 La propiedad AJAX de las vistas accede al
AjaxHelper que tiene métodos para
generar código para interactuar con la
Ajax Library
Arquitectura de ASP .NET MVC 5

17. Modelo
 El modelo contiene toda la lógica de
nuestra aplicación
 Lógica de negocio
 Acceso a datos
 Los controladores interaccionan con el
modelo para obtener datos que son
pasados a las vistas
 ViewModels
Arquitectura de ASP .NET MVC 5

18. Arquitectura de ASP .NET MVC 5
Model
ControllerView
•Browser hace un
request /Products/
•La ruta es determinada
•El controlador es
activado
•La acción del
controlador es
invocada
•El controlador realiza
alguna lógica
•Se entrega la vista,
pasándole ViewData
•URLs son renderizadas,
apuntando a otros
controladoras

19. Desarrollo
Módulo 1
Creación y estructura de un proyecto MVC

20.  Para crear un nuevo proyecto MVC 5
1. Diríjase al menú File – New - Project como se
muestra en la figura:
Creación y estructura de un proyecto MVC

21. 1. En las plantillas instaladas, seleccionar Visual C# Web
templates
2. Seleccione ASP. NET Web Application e indique el
nombre de su aplicación. Finalmente haga clic OK.
Creación y estructura de un proyecto MVC

22.  Dialogo de nuevo proyecto ASP .NET MVC
Creación y estructura de un proyecto MVC

23.  Application Templates
• Empty
• Web Forms
• MVC
• Web API
• Single Page Application
• Facebook
 Folders + Core References
• Web Forms
• MVC
• Web API
 Change Authentication
 No Authentication
 Individual User Accounts
 Organizational Accounts
 Windows Authentication
 Testing
Creación y estructura de un proyecto MVC

24. Creación y estructura de un proyecto MVC

25. Creación y estructura de un proyecto MVC (1)
 Carpetas de primer nivel por defecto (Basado en
convenciones)
Directorio Propósito
/App_Data Repositorio de archivos de datos que quieres leer o
escribir
/App_Start Contiene clases de configuración a nivel de
aplicación (autenticación, bundling, global action
filters, entre otros)
/Content Repositorio de los archivos CSS e imágenes, y otros
contenidos no dinámicos ni JavaScript
/Controllers Repositorio de las clases Controller que se encargan
de las solicitudes de URL
/fonts Contiene fuentes para Bootstrap

26. Creación y estructura de un proyecto MVC (2)
 Carpetas de primer nivel por defecto (Basado en
convenciones)
Directorio Propósito
/Models Repositorio de clases que representan y manipulan
los datos y objetos de negocio
/Scripts Repositorio de archivos de librería JavaScript y
scripts (.js)
/Views Repositorio para plantillas de archivos de UI que
son responsables para renderizacion, por ejemplo
de HTML

27. Desarrollo
Módulo 1
Web Forms versus MVC

28. ¿Qué hizo ASP.NET por nosotros?
 Tomó las mejores prácticas de ASP
 Hizo fácil el desarrollo
 Siguió la senda de Visual Basic
 Manejado por eventos
 Expandió el entorno RAD a la Web
 Orientado hacia la productividad
 No exigió demasiados requerimientos de los
desarrolladores
 No era necesario saber HTML, ni JavaScript
Web Forms versus MVC

29. ¿Qué es ASP .NET MVC?
 Es la implementación de la arquitectura MVC para
ASP .NET
 Alternativa a Web Forms
 Esta construido sobre ASP .NET
 Maneja el patrón «Front Controller»
 Expone la web tal como es
Web Forms versus MVC

30. Metas de ASP .NET MVC
 Permitir una clara separación de
responsabilidades
 Principio SRP
 Altamente mantenible
 Testeable por defecto
 Permitir un control completo sobre el HTML
 Habilitar URLs claras
 Amigable con REST
 Optimizado para buscadores (SEO)
 Basado en convenciones
 Convención sobre Configuración
Web Forms versus MVC

31. Web Forms
Web Forms versus MVC
VENTAJAS DESVENTAJAS
Productividad No tiene SoC de manera natural
RAD Hay que lidiar con el ViewState
Programación con estado Probar páginas es difícil
Controles enriquecidos Procesamiento y renderización
mezclados
Plataforma estable y madura Abstrae el JS y HTML (complica las
cosas con AJAX)

32. ASP .NET MVC
VENTAJAS DESVENTAJAS
Diseño claro, con una ordenada
separación de intereses
Carece de un «component model»
para hacer más fácil el diseño
Una delgada pila de ejecución Exige de mayores «skills» al
desarrollador
• Mejor comprensión de cómo
funciona la web
Control total sobre el HTML
Inclusive independencia de él
Total extensibilidad en todas sus
partes
Permite el desarrollo orientado a
pruebas (TDD)
Web Forms versus MVC

33. ¿Por qué escoger MVC?
 Por una o varias de las siguientes razones:
1. Para estudiarlo
2. Para escribir código «testeable»
3. Para escribir código bien diseñado (capas
desacopladas)
4. Para entregar valor a tus clientes
5. Porque es el futuro y estará bien posicionado
6. Porque es muy flexible y puede manejar
cambios
7. Porque te vuelve un mejor desarrollador
8. Porque permite control total sobre el HTML
 Estilos, Accesibilidad, Compatibilidad entre
navegadores, cumplimiento con
estándares
Web Forms versus MVC

34. Escenarios que pueden presentarse
¿En cuál de ellos estas tú?
 1: Te gusta Web Forms y estas feliz con ello
 2: Mayormente te gusta Web Forms pero no
estas del todo contento
 3: Eres nuevo en ASP .NET
 4: Estas liderando un equipo de desarrollo
Web Forms versus MVC

35. 1: Te gusta Web Forms y estas feliz
con ello
 Te sientes en control en ese modelo
 No te preocupa demasiado el tema del
viewstate
 No te preocupa mucho el tema de AJAX
y jQuery
 Puedes aprovechar al máximo la familia
de componentes visuales disponible
…Quédate con Web Forms
Web Forms versus MVC

36. 2: Mayormente te gusta Web Forms
pero no estas del todo contento
 Te esfuerzas en mantener bajo control el
Viewstate
 Quieres introducir mas JavaScript en las
páginas
 Te sientes restringido por las abstracciones
que el modelo impone
…Considera usar ASP .NET MVC
Web Forms versus MVC

37. 3: Eres nuevo en ASP .NET
 Y tienes experiencia suficiente en otros
frameworks
 Deseas un buen nivel de aprendizaje
(MVC no tiene secretos)
…ASP .NET MVC es para ti
Web Forms versus MVC

38. 4: Estas liderando un equipo de
desarrollo
 ASP .NET MVC «crea» las condiciones
para producir software de alta calidad,
más rápido
 Puede tener o tener beneficio tangible
para el cliente
 Tiene un inmediato ROI (Retorno de
inversión) para ti y tu compañía
…migra tu equipo a ASP .NET MVC
Web Forms versus MVC

39. Momento de tomar una decisión
 Si el requerimiento es «tomar control sobre
el HTML», ASP .NET MVC es la respuesta
 Se gasta tiempo arreglando cosas con
Web Forms
 Ese tiempo se puede invertir en aprender
un enfoque arquitecturalmente superior
 ASP .NET MVC no es perfecto, pero es
superior de lejos
 Aprende a tu ritmo, pero empieza!
Web Forms versus MVC

40. ¿Quieres más información?
Tenemos cursos en línea, en diversas
modalidades
¡Contáctanos!
 www.formativaperu.com
ventas@formativaperu.com