Desarrollo de Aplicaciones Web con ASP NET MVC

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 + Share. Point Arquitecto, Consultor en TI oscar. gensollen@formativaperu. com @oscargensollen

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

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 framework mas facil de probar No es para todos los casos Cuál es el punto con MVC? • • No es Web Forms v. Next…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 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 VS 2013

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

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

Arquitectura de ASP. NET MVC 5 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 de un controlador) Permite la creación de URLs personalizadas con mucha facilidad

Arquitectura de ASP. NET MVC 5 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 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 Action Results Cada acción de un controlador debe devolver un resultado que es enviado al browser Ejemplos: § § § View. Result: Devuelve una vista (html) Json. Result: Devuelve datos en json File. Result: Devuelve el contenido de un fichero

Arquitectura de ASP. NET MVC 5 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 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 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 Html. Helper que tiene métodos para generar código HTML típico (p. ej. Controles html) La propiedad AJAX de las vistas accede al Ajax. Helper que tiene métodos para generar código para interactuar con la Ajax Library

Arquitectura de ASP. NET MVC 5 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 § View. Models

Arquitectura de ASP. NET MVC 5 • 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 View. Data • URLs son renderizadas, apuntando a otros controladoras Model View Controller

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

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 estructura de un proyecto MVC 1. 2. En las plantillas instaladas, seleccionar Visual C# Web templates 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 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 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

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 Java. Script /Controllers Repositorio de las clases Controller que se encargan de las solicitudes de URL /fonts Contiene fuentes para Bootstrap

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 Java. Script y scripts (. js) /Views Repositorio para plantillas de archivos de UI que son responsables para renderizacion, por ejemplo de HTML

Desarrollo Módulo 1 Web Forms versus MVC

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 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 Java. Script

Web Forms versus MVC ¿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 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 Web Forms VENTAJAS DESVENTAJAS Productividad No tiene So. C de manera natural RAD Hay que lidiar con el View. State 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)

Web Forms versus MVC 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 ¿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 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 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 j. Query Puedes aprovechar al máximo la familia de componentes visuales disponible …Quédate con Web Forms

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

Web Forms versus MVC 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 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 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!

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