Construcción de sitios escalables conASP.NET MVCMariano SánchezLeandro BoffiRodolfo Finochietti (MVP)
Modelo-Vista-ControladorXerox PARC 1978http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html
ASP.NET MVCUn nuevo framework para Web DevelopmentUn nuevo tipo de proyecto en Visual StudioMás control sobre el HTMLMás testeableNo es una nueva versión de ASP.NET Web FormsEsta basado en ASP.NET
¿Que ofrece?SoC (Separation of Concerns)TDD por defaultMantenibilidadUrl y HTML mas limpioSEO y REST friendly/Usuarios/Buscar/MatíasCSS Friendly<html> <div> <label> <span>Modelo de programación mas performanteNo hay ViewStateNo hay modelo de eventos
DemoHola Mundo
¿Como trabaja?
Rutaswww.sitio.com/products/report/33/2008/11
URIs amigablesLegibleswww.sitio.com/products.aspx?module=reports&productId=33&year=2008&m=11www.sitio.com/products/report/33/2008/11Predecibleshttp://es.wikipedia.org/wiki/Microsoft
Ruteo – URIs amigablesSe agreganrutas a la RouteTable globalEl Mapeocrea un objetoRouteData  (un diccionario de key/values)protected void Application_Start(object sender, EventArgs e) {RouteTable.Routes.Add(	"Blog/bydate/[year]/[month]/[day]",	new { controller="blog", action="showposts" },	new { year=@"\d{1,4}", month= @"\d{1,2}",                         day = @"\d{1,2}"});}
Controlador – UsoBásicoEscenarios, Objetivos y DiseñoLas URLs indican“acciones”del Controlador, no páginasLas accionesdebendeclarase en el Controlador.El Controladorejecutalógica y elige la vista.public ActionResultShowPost(int id) {     Post p = PostRepository.GetPostById(id);     if (p != null) {         View(p);     } else {         View("nosuchpost", id);     }}
Vistas – UsoBásicoEscenarios, Objetivos y Diseño:Generan HTML u otrotipo de contenido. Helpers pre-definidos.Pueden ser .ASPX, .ASCX, .MASTER, etc.Puedenreemplazarse con otrastecnologías:Template engines (NVelocity, Spark, …).Formatos de salida (images, RSS, JSON, …).Puedendefinirsevistas Mockpara testing.El controladorofrecedatos a la VistaDatos Loosely Typed o Strongly Typed .
DemoASP.NET MVC
¿Qué hay del lado del cliente?
jQueryOpen SourceMIT y GPLCross BrowserInternet Explorer 6+, Firefox 2+, Opera 9+, and Safari 2+Liviano 15kAdoptado por MicrosoftIntegrado con Visual StudioSoporte 7/24
jQuery
jQuery Selectors
jQuery Animations
jQuery Pluginshttp://plugins.jquery.com/Ajax (182)
Animation and Effects (253)
Browser Tweaks (67)
Data (122)
DOM (123)
Drag-and-Drop (30)
Events (119)
Forms (317)
Integration (88)
JavaScript (130)
jQuery Extensions (198)

[Code Camp 2009] Desarrollando sitios web escalables con ASP.NET MVC (Rodolfo Finochietti + Leandro Díaz Guerra + Mariano Sánchez)

Notas del editor

  • #11 El Controller es responsable de interpretar el Request ruteado y luego ejecutar el método correspondiente (Action) que se encarga manipular el modelo y reenviar la respuesta al usuario. La respuesta de la ejecución de una Action es una instancia de la clase ActionResult. El Controller nos provee de Helpers para obtener distintos tipos de ActionResult (View, Content, Json, etc.).El motor de routing mapea la ruta a un controller y a una acción especifica (puede estar explicitada o ser la default).El controller ejecuta esa acción la cual puede acceder al modelo (aplicar lógica de negocios, repositories, etc.). Setear la información para la vista ViewData, ViewModel y seleccionar un tipo de respuesta para enviarle al usuario ().Hay varios tipos de actionresult. Se utilizan dependiente el caso.Tipos: EmptyResult – Representa a un result nulo,ContentResult – Escribe el contenido especifico directamente al response textJsonResult – Devuelve el contenido serializado a JsonRedirectResult – Redirecciona a la URL especificadaRedirectToRouteResult – Redirecciona a la ruta especificadaViewResult – Renderiza la vista especificadaPartialViewResult – Renderiza la vista parcial especificada (Usualmente usado en AJAX request9FileResult – Escribe binary en el stream JavaScript Result – Ejecuta javascript inmediato en el cliente.La ejecución de las acciones puede filtrarse según el verbo HTTP que se este usando.Desde el Controller se pueden agregar valores al ViewData y/o setear el ViewModel de la Vista tipada a utilizar.El Controller puede recibir como parámetros instancias de las clases del modelo, las cuales son creadas y completadas mediante los mecanismos de Binding (ModelBinding) que utiliza ASP.NET MVC, los parámetros definidos en las rutas y/o seteados en el QueryString del Request, o directamente los valores de los inputs del Formulario en una colleccion (FormCollection) o como parametros independientes mapeados por el nombre.
  • #12 La View se encarga de transformar y formatear el Model para presentarlo ante el usuario. Es el componente básico de UI en ASP.NET MVC. Para esto, las Views utilizan un diccionario por el cual reciben información llamado ViewData. A su vez, las vistas tipadas utilizan la propiedad ViewModel sobre la cual se setea el modelo que se quiere presentar.La vista toma la información del Modelo y la formatea y se la presenta al usuario (UI). Hay dos tipos de vistas tipadas o no.ViewData = Diccionario sobre el cual se puede agreagar información variada para mostrar en la vista.ViewModel una o varias entidades del modelo que se quiera utilizar.Por convención existe una carpeta por controller para poner a las vistas. De esta forma se puede decir fácilmente a la vista que controller usarLas vistas se buscan en la carpeta con el nombre del controller y en la carpeta shared.ASP.Net MVC nos provee del HelperHtml el cual posee varios métodos para poder generar los controles HTML que necesitemos incorporar a la View, como así también el Binding que queramos generar entre estos y los componentes del ViewData y del ViewModel.Existen dos tipos de Views, las típicas Full Views y las PartialViews.
  • #16 Es una biblioteca de JavaScript que nos simplifica la interacción con documentos HTML, la manipulación del DOM y el manejo de eventos, animaciones y AJAX.La utilización de jQuery nos permite realizar distintas funcionalidades cuya implementación en JavaScript requeriría mucho más código. Es de código libre Se encarga automáticamente de resolver la compatibilidad con el Browser que estemos usando (Cross Browser). Es liviana (averiguar los pesos) Esta soportada por una amplia comunidad (Muchos plugins desarrollados). y actualmente es un estándar en los desarrollos Web en VS, por lo cual MSFT también le da soporte gratuito.Archivo documento para VS <script type="text/javascript" src="../../Scripts/jquery-1.3.2-vsdoc.js"></script> Permite desarrollar extensiones fácilmente.* Con ella se genera código sumamente prolijo y compacto.
  • #17 Como principal característica, se centra en la obtención de elementos del DOM (mediante “Queries”) para realizar operaciones sobre ellos.Permite la creación de código JavaScript “no intrusivo”, facilitando la separación de la estructura (HTML) del comportamiento (JavaScript).Query sobre el dom. = Resultados. Sobre esos resultados se aplica una operación. Permite el encadenamiento de métodos. $(“#txtValor”).val();*Javascript no intrusivo (los handlers para los eventos de los controles seteados en el ready del documento)$(document).ready(function()   {       $(“#btnHello”).click(function(){alert(“Hello”);});});  
  • #21 Actualizaciones parciales: podemos evitar la actualización de la pagina completa en ciertos casos que no es necesario, como por ejemplo en la selección de un combo o en la aplicación de un filtro. Esto evita que el refresco total de la pagina resulte en la impresión de que el sistema es lento.Request asincrónicos: La posibilidad de realizar los Request de manera asincrónica le da a el usuario la posibilidad de seguir interactuando con el sistema mientras este realiza otras tares (ej.: un IM web chequea la existencia de mensajes nuevos, un Web Mail la de correos , etc.)Carga del servidor reducida: Si los principales elementos funcionales de la pagina se pueden obtener con diferentes / independientes operaciones AJAX esto va a generar que el servidor tenga mucha menos carga.experiencia del usuario: Elimina los refresh de las paginas, la aparición de ventanas en blanco y la barra de progreso. Hace que se sientan frente a una aplicación del tipo WinForm.Vistas parciales: Helper AJAX del MVC FWK.AjaxControlToolkit: Solamente los archivos de cliente (JS)jQuery, nos permite manejar todas las opciones del request AJAX desde el inicio hasta el fin. Es el mas flexible.