Desarrollo de
Aplicaciones Web con
ASP.NET MVC 5
Módulo 1:Introducción a
ASP.NET MVC 5
Oscar Gensollen Arroyo
Microsoft Ce...
Agenda
 Arquitectura de ASP.NET MVC 5
 Web Forms versus MVC
 Creación y estructura de un proyecto
MVC
Desarrollo
Módulo 1
Arquitectura de ASP .NET MVC 5
 ASP .NET MVC es…
• Un nuevo tipo de proyecto para ASP .NET
• Una opción de desarrollo
• Mas control sobre el<html/>
• Un...
 Motivaciones principales
 Clara separación de intereses
• Fácil testing con TDD
• Permite crear aplicaciones altamente ...
Comparación de patrones
(1)
Arquitectura de ASP .NET MVC 5
Arquitectura de ASP .NET MVC 5
Browser
Controller
View Model
Database
Web Server HTTP
SQL
Routing
 http://host:port/Products/View/100
Arquitectura de ASP .NET MVC 5
Routing
 Decide que controlador responde a cada
petición
 Basándose en la URL
 Mapea una petición a una acción (método
...
El patrón MVC (mas explicado)
 Controlador
 Responde a las peticiones http
 Interactúa con el modelo
 Pasa los datos a...
Controladores
 Manejan la lógica de presentación
 Son los que reciben las peticiones, en
base a una URL
 Derivan la pet...
Action Results
 Cada acción de un controlador debe
devolver un resultado que es enviado al
browser
 Ejemplos:
 ViewResu...
Vistas
 Las vistas reciben datos del controlador y
muestran estos datos
 Se implementan mediante páginas .aspx
 Sin con...
Vistas parciales
 Una vista parcial es una vista que se
muestra dentro de otra vista
 Se implementan como controles .asc...
Helpers
 ASP.NET MVC viene con clases que
ayudan a generar HTML de forma más
simple
 La propiedad HTML de las vistas acc...
Modelo
 El modelo contiene toda la lógica de
nuestra aplicación
 Lógica de negocio
 Acceso a datos
 Los controladores ...
Arquitectura de ASP .NET MVC 5
Model
ControllerView
•Browser hace un
request /Products/
•La ruta es determinada
•El contro...
Desarrollo
Módulo 1
Creación y estructura de un proyecto MVC
 Para crear un nuevo proyecto MVC 5
1. Diríjase al menú File – New - Project como se
muestra en la figura:
Creación y est...
1. En las plantillas instaladas, seleccionar Visual C# Web
templates
2. Seleccione ASP. NET Web Application e indique el
n...
 Dialogo de nuevo proyecto ASP .NET MVC
Creación y estructura de un proyecto MVC
 Application Templates
• Empty
• Web Forms
• MVC
• Web API
• Single Page Application
• Facebook
 Folders + Core Referenc...
Creación y estructura de un proyecto MVC
Creación y estructura de un proyecto MVC (1)
 Carpetas de primer nivel por defecto (Basado en
convenciones)
Directorio Pr...
Creación y estructura de un proyecto MVC (2)
 Carpetas de primer nivel por defecto (Basado en
convenciones)
Directorio Pr...
Desarrollo
Módulo 1
Web Forms versus MVC
¿Qué hizo ASP.NET por nosotros?
 Tomó las mejores prácticas de ASP
 Hizo fácil el desarrollo
 Siguió la senda de Visual...
¿Qué es ASP .NET MVC?
 Es la implementación de la arquitectura MVC para
ASP .NET
 Alternativa a Web Forms
 Esta constru...
Metas de ASP .NET MVC
 Permitir una clara separación de
responsabilidades
 Principio SRP
 Altamente mantenible
 Testea...
Web Forms
Web Forms versus MVC
VENTAJAS DESVENTAJAS
Productividad No tiene SoC de manera natural
RAD Hay que lidiar con el...
ASP .NET MVC
VENTAJAS DESVENTAJAS
Diseño claro, con una ordenada
separación de intereses
Carece de un «component model»
pa...
¿Por qué escoger MVC?
 Por una o varias de las siguientes razones:
1. Para estudiarlo
2. Para escribir código «testeable»...
Escenarios que pueden presentarse
¿En cuál de ellos estas tú?
 1: Te gusta Web Forms y estas feliz con ello
 2: Mayormen...
1: Te gusta Web Forms y estas feliz
con ello
 Te sientes en control en ese modelo
 No te preocupa demasiado el tema del
...
2: Mayormente te gusta Web Forms
pero no estas del todo contento
 Te esfuerzas en mantener bajo control el
Viewstate
 Qu...
3: Eres nuevo en ASP .NET
 Y tienes experiencia suficiente en otros
frameworks
 Deseas un buen nivel de aprendizaje
(MVC...
4: Estas liderando un equipo de
desarrollo
 ASP .NET MVC «crea» las condiciones
para producir software de alta calidad,
m...
Momento de tomar una decisión
 Si el requerimiento es «tomar control sobre
el HTML», ASP .NET MVC es la respuesta
 Se ga...
¿Quieres más información?
Tenemos cursos en línea, en diversas
modalidades
¡Contáctanos!
 www.formativaperu.com
ventas@f...
Desarrollo de Aplicaciones Web con ASP.NET MVC5
Próxima SlideShare
Cargando en…5
×

Desarrollo de Aplicaciones Web con ASP.NET MVC5

3.814 visualizaciones

Publicado el

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

Publicado en: Tecnología

Desarrollo de Aplicaciones Web con ASP.NET MVC5

  1. 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. 2. Agenda  Arquitectura de ASP.NET MVC 5  Web Forms versus MVC  Creación y estructura de un proyecto MVC
  3. 3. Desarrollo Módulo 1 Arquitectura de ASP .NET MVC 5
  4. 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. 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. 6. Comparación de patrones (1) Arquitectura de ASP .NET MVC 5
  7. 7. Arquitectura de ASP .NET MVC 5 Browser Controller View Model Database Web Server HTTP SQL
  8. 8. Routing  http://host:port/Products/View/100 Arquitectura de ASP .NET MVC 5
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Desarrollo Módulo 1 Creación y estructura de un proyecto MVC
  19. 19.  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
  20. 20. 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
  21. 21.  Dialogo de nuevo proyecto ASP .NET MVC Creación y estructura de un proyecto MVC
  22. 22.  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
  23. 23. Creación y estructura de un proyecto MVC
  24. 24. 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
  25. 25. 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
  26. 26. Desarrollo Módulo 1 Web Forms versus MVC
  27. 27. ¿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
  28. 28. ¿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
  29. 29. 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
  30. 30. 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)
  31. 31. 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
  32. 32. ¿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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. ¿Quieres más información? Tenemos cursos en línea, en diversas modalidades ¡Contáctanos!  www.formativaperu.com ventas@formativaperu.com

×