Taller de Sistemas de Informacin 1

ASP.NET MVC y jQuery Clase 4

Contenidos
Introduccin y evolucin Problemas de Web forms MVC Pattern ASP.NET MVC jQuery

INCO - Facultad de Ingeniera Montevideo, Uruguay

Introduccin y evolucin
ASP.NET conforma un framework para el desarrollo web especficamente para el framework .NET Reemplazo de las clsicas pginas ASP (Active Server Pages) Es la alternativa ideada por Microsoft para competir con las existentes en el momento, principalmente en el mundo Java ASP.NET MVC surge no como reemplazo a tecnologa existente en .NET, sino como complemento

Aprovechando el auge de los frameworks MVC en otras tecnologas

INCO - Facultad de Ingeniera Montevideo, Uruguay

Introduccin y evolucin

INCO - Facultad de Ingeniera Montevideo, Uruguay

Introduccin y evolucin

1993

CGI (Common Gateway Interface)

Bajo nivel Ejecuta por fuera del servidor Alto consumo de recursos

1994-1995

Microsoft Internet Database Connector (IDC)

Ejecuta en el servidor

Solamente es un wrapper para las consultas SQL y templates para formatear los resultados

INCO - Facultad de Ingeniera Montevideo, Uruguay

Introduccin y evolucin

1996

Active Server Pages (ASP)

Interpretado en tiempo de ejecucin Spaghetti code

2002-2003

ASP.NET WebForms 1.0/1.1

Compilado Statefull UI

Orientacin a objetos
Extremadamente pesado HTML inentendible
6

INCO - Facultad de Ingeniera Montevideo, Uruguay

Introduccin y evolucin

2005

ASP.NET WebForms 2.0

2007

ASP.NET Ajax

2008

ASP.NET WebForms 3.5

2009

ASP.NET MVC 1.0

INCO - Facultad de Ingeniera Montevideo, Uruguay

Introduccin y evolucin

2010

ASP.NET MVC 2.0 ASP.NET Web Forms 4.0

2011

ASP.NET MVC 3.0

2012

ASP.NET MVC 4.0 ASP.NET WebForms 4.5

INCO - Facultad de Ingeniera Montevideo, Uruguay

Problemas de Web Forms

Al momento de desarrollar ASP.NET Web Forms, Microsoft intent trasladar todas las metodologas utilizadas en Win Forms a una plataforma nueva y totalmente distinta a la web Con esto logr una rpida adopcin de la nueva plataforma por parte de los desarrolladores existentes Escondi las complejidades del protocolo HTTP (con su naturaleza de stateless) y el manejo de HTML
INCO - Facultad de Ingeniera Montevideo, Uruguay 9

Problemas de Web Forms

Como contrapartida, todas estas facilidades para los nuevos desarrolladores, devinieron en aplicaciones web en muchos casos casi inusables o extremadamente pesadas para los tiempos que corran

Principales problemas

View State Difcil manejo del ciclo de vida de una pgina

Conexin entre eventos del lado del cliente y del lado del servidor

Code behind

Falsa sensacin de separacin de conceptos (lgica y presentacin)

Testeo

INCO - Facultad de Ingeniera Montevideo, Uruguay

10

Problemas de Web Forms

Igualmente, web forms sigui desarrollndose y es ampliamente utilizado al da de hoy Incorporacin de AJAX A partir de la versin 4.0, empez a respetar seriamente algunos estndares web

A partir de la versin 4.5 incorpora conceptos desarrollados en ASP.NET MVC

INCO - Facultad de Ingeniera Montevideo, Uruguay

11

MVC Pattern

El patrn Model-View-Controller (MVC) es un patrn arquitectnico Separa los componentes de una aplicacin web en tres capas Esto permite tener ms control sobre cada una de las partes individuales de la aplicacin Mayor facilidad para:

Desarrollar

Modificar
Testear
INCO - Facultad de Ingeniera Montevideo, Uruguay 12

MVC Pattern

INCO - Facultad de Ingeniera Montevideo, Uruguay

13

MVC Pattern

Modelo:

Representa el dominio sobre el que se esta interesado

Generalmente encapsula los datos almacenados en una base de datos, as como tambin el cdigo necesario para la manipulacin de los mismos

Vista:

Utilizadas para desplegar la informacin del modelo como una interfaz de usuario (UI)

Controlador:

Responde a la entrada del usuario, realiza operaciones sobre el modelo y selecciona las vistas a ser desplegadas, si corresponde

INCO - Facultad de Ingeniera Montevideo, Uruguay

14

MVC Pattern

Es importante remarcar la importancia del modelo en la arquitectura MVC Es mediante el modelo que se representa todo el dominio de nuestra aplicacin, las entidades del mundo real, las reglas de negocio y las operaciones del mismo.

INCO - Facultad de Ingeniera Montevideo, Uruguay

15

ASP.NET MVC

A raz del resurgimiento del patrn MVC esta vez aplicado a la web, con el auge de ciertos frameworks (Ruby on Rails, p.e.), se empieza a desarrollar en paralelo a la evolucin de web forms, una nueva plataforma para ASP.NET

Para no repetir errores, se implemento esta plataforma con varios puntos a tener en cuenta:

Extensibilidad Fuerte control sobre HTTP y HTML Testeable Ruteo

INCO - Facultad de Ingeniera Montevideo, Uruguay

16

ASP.NET MVC

Se aprovecharon componentes base de la plataforma ASP.NET

Master Pages Membership Localizacin

Open Source!

INCO - Facultad de Ingeniera Montevideo, Uruguay

17

ASP.NET MVC

INCO - Facultad de Ingeniera Montevideo, Uruguay

18

ASP.NET MVC

Los controladores en ASP.NET MVC son por lo general clases C#, que derivan de System.Web.Mvc.Controller Cada mtodo pblico en un controlador es llamado un action method, el cual se asocia a una URL mediante el sistema de ruteo de ASP.NET MVC

Cuando se realiza un pedido a una URL asociada a un action method de un controlador, se ejecuta el mismo, realizando lo que sea requerido en el modelo y seleccionando una vista para mostrar al usuario

INCO - Facultad de Ingeniera Montevideo, Uruguay

19

ASP.NET MVC

ASP.NET MVC ofrece tambin la posibilidad de seleccionar distintos view engines, es decir, motores para las vistas En las primeras versiones se utilizaba el motor clsico de ASP.NET, el cual procesaba pginas .aspx

En la actualidad ofrece tambin el motor Razor, el cual es bastante ms poderoso

Existen adems distintos motores desarrollados por la comunidad

INCO - Facultad de Ingeniera Montevideo, Uruguay

20

ASP.NET MVC

En cuanto al modelo, no existen restricciones en cuanto a la implementacin Se pueden utilizar clases C# comunes y acceso a la base de datos de la forma que se prefiera

ORM

ADO.NET
Etc

INCO - Facultad de Ingeniera Montevideo, Uruguay

21

ASP.NET MVC

El concepto de Convention over configuration se hizo popular gracias a Ruby on Rails Se basa en el hecho de pre definir algunas convenciones, de forma tal de ahorrar tiempo al momento de crear una aplicacin configurando cosas

Se automatiza todo aquello que es posible automatizar

Existen bsicamente dos tipos de convenciones en un proyecto ASP.NET MVC:

Una son mas bien sugerencias

Las otras son las convenciones en si mismas
INCO - Facultad de Ingeniera Montevideo, Uruguay 22

ASP.NET MVC

Como ejemplo de sugerencias, al crear un nuevo proyecto se crea una carpeta Scripts, donde se sugiere vayan todas las libreras y archivos javascript de la aplicacin Pero uno puede renombrar la carpeta, o ubicar estos archivos donde quiera Las convenciones si se deben respetar

Los controladores son clases que deben terminar con Controller: por ejemplo, ProductController Cuando se refiere a un controlador desde cualquier parte del proyecto, solamente se utiliza el nombre, el framework automticamente agrega el controller
INCO - Facultad de Ingeniera Montevideo, Uruguay 23

ASP.NET MVC

Las vistas y vistas parciales van en la carpeta /Views/ControllerName (por ejemplo, /Views/Product) El framework espera que la vista por defecto de un action method se nombre igual que el propio mtodo

Un action method de nombre List tiene una vista asociada por defecto List.cshtml Se puede retornar otra vista desde el propio action method

INCO - Facultad de Ingeniera Montevideo, Uruguay

24

ASP.NET MVC

Como se mencion, otro aspecto importante en una aplicacin MVC es el ruteo

En una aplicacin Web Forms, cada URL se corresponde unvocamente con un archivo fsico alojado en el servidor En ASP.NET MVC una URL indica que accin de que controlador y con que parmetros se va a ejecutar Dependiendo de esto, se genera la vista correspondiente El motor de ruteo se encarga de examinar las URLs entrantes y generar las URLs salientes

INCO - Facultad de Ingeniera Montevideo, Uruguay

25

ASP.NET MVC

ASP.NET MVC esto lo realiza en el archivo Global.asax

public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); }

INCO - Facultad de Ingeniera Montevideo, Uruguay

26

ASP.NET MVC

El motor de vistas Razor fue incorporado en la versin 3.0 de ASP.NET MVC Compila las vistas como forma de mejorar la performance

Se traducen a cdigo C# para compilarlas al momento de utilizarlas por primera vez Las clases compiladas se almacenan en disco hasta que la vista cambie

INCO - Facultad de Ingeniera Montevideo, Uruguay

27

ASP.NET MVC

Tres formas principales de agregar contenido dinmico a las vistas:

Cdigo embebido
<ul> @for (int i = 0; i < 10; i++){ <li>@i </li> } </ul>

Helpers HTML
@{ Html.BeginForm("Edit", "Home"); }
@{ Html.EndForm();}
<form action="/Home/Edit" method="post"> </form>
INCO - Facultad de Ingeniera Montevideo, Uruguay 28

ASP.NET MVC

Vistas parciales
Se

utilizan en escenarios donde se quiere reutilizar las mismas vistas en varios lados

@Html.Partial("VistaParcial")

INCO - Facultad de Ingeniera Montevideo, Uruguay

29

ASP.NET MVC

Los action methods retornan un Action Result ASP.NET MVC provee distintos tipos de Action Result para tratar de abarcar las distintas posibilidades de respuesta al usuario

ViewResult

PartialViewResult
RedirectResult FileResult JsonResult

JavascriptResult
EmptyResult

INCO - Facultad de Ingeniera Montevideo, Uruguay

30

ASP.NET MVC

Otra caracterstica que tenemos es el objeto dinmico ViewBag

Podemos definir propiedades arbitrarias en el objeto y accederlas directamente en la vista
public ActionResult Index() { ViewBag.Message = "Utilizando el ViewBag";

ViewBag.Date = DateTime.Now;
return View(); } @{ ViewBag.Title = "Home Page"; } <h2>@ViewBag.Message</h2> <h3>@ViewBag.Date</h3>
INCO - Facultad de Ingeniera Montevideo, Uruguay 31

ASP.NET MVC

Como principal desventaja del ViewBag es que no es posible saber en tiempo de compilacin que datos se agregaron al objeto De existir errores solo se darn en tiempo de ejecucin

INCO - Facultad de Ingeniera Montevideo, Uruguay

32

ASP.NET MVC

En los controladores existen formas de obtener ciertos datos, bsicamente a travs del objeto Request

Request.QueryString Request.Form Request.Cookies Request.HttpMethods Request.Headers Request.Url

INCO - Facultad de Ingeniera Montevideo, Uruguay

33

ASP.NET MVC

Existe cierta metadata que podemos agregar a nuestro modelo para realizar validaciones De esta forma nos garantizamos mantener la integridad de datos en nuestra base, por ejemplo Las validaciones, igualmente, deben realizarse en todas las capas

Required StringLength RegularExpression Range Compare

INCO - Facultad de Ingeniera Montevideo, Uruguay

34

ASP.NET MVC

ASP.NET MVC provee, al igual que muchos otros frameworks MVC, una herramienta llamada Scaffolding Consiste en la posibilidad de crear vistas a partir de un modelo definido, para ciertas operaciones predefinidas

Edit

Create
List Details Delete

O sea, bsicamente, mediante muy pocos pasos, es posible crear el ABM de las entidades de nuestro modelo
INCO - Facultad de Ingeniera Montevideo, Uruguay 35

ASP.NET MVC

Lamentablemente, la utilidad del scaffolding es puramente para prototipar o para que sea el punto de partida Temas como seguridad, validaciones, etc necesitan ser agregados igualmente

INCO - Facultad de Ingeniera Montevideo, Uruguay

36

jQuery

Librera implementada en JavaScript puro, o sea, client side Incorporada por defecto en los proyectos ASP.NET MVC Provee facilidades para AJAX y modificacin del DOM Se abstrae de las distintas implementaciones de los navegadores

INCO - Facultad de Ingeniera Montevideo, Uruguay

37

jQuery

Estructura plugins

Miles de plugins implementados para su utilizacin

jQuery UI

INCO - Facultad de Ingeniera Montevideo, Uruguay

38

jQuery

La base de la librera es la funcin jQuery() Tiene un alias que significa exactamente lo mismo, $() Nos permite seleccionar elementos del DOM

$(p) selecciona todos los elementos <p> del DOM

$(.clase) selecciona todos los elementos con la clase CSS clase

$(#myID) selecciona el elemento con identificador myID

INCO - Facultad de Ingeniera Montevideo, Uruguay

39

jQuery

Los selectores permiten elegir el conjunto de elementos con el que vamos a operar A esos elementos le realizamos una operacin, por ejemplo:

$(#myID).hide(): seleccionamos el elemento con identificador myID y lo ocultamos

Podemos seleccionar elementos en todo el documento, como hasta ahora, o en un determinado contexto

$(td, miElemento) selecciona todos los elementos td que sean descendientes de miElemento

INCO - Facultad de Ingeniera Montevideo, Uruguay

40

jQuery

Tambin podemos seleccionar por atributos

$([attr]) selecciona los elementos que contengan ese atributo $([attr] = val) selecciona los elementos que contengan ese atributo con el valor val

El caso $(*) es especial, selecciona todos los elementos del documento

INCO - Facultad de Ingeniera Montevideo, Uruguay

41

jQuery

Tambin tenemos filtros

:eq(n) toma el elemento n-1 de la seleccin :even, :odd toma los elementos pares o impares de la seleccin :first, :last, :header, :not(selector)

Los filtros se pueden utilizar en conjuncin con los selectores

$(input:eq(7)) $(:header )
INCO - Facultad de Ingeniera Montevideo, Uruguay 42

O solos

jQuery

Filtros en los formularios

Caso especial de filtros Nos permite seleccionar elementos de un formulario

:button :checkbox :checked :disabled,

:enabled

ms

INCO - Facultad de Ingeniera Montevideo, Uruguay

43

jQuery

Importante, siempre es necesario esperar el armado del DOM

Se hace con la funcin $(document).ready()

<script type="text/javascript"> $(document).ready(function () {

// nuestro cdigo jQuery

}); </script>

De esta forma, podemos seleccionar los elementos porque sabemos que ya van a estar en pantalla

INCO - Facultad de Ingeniera Montevideo, Uruguay

44

jQuery

Con respecto a CSS, jQuery provee todas las funcionalidades necesarias

$(#miTabla).addClass(miClaseCSS) toma la tabla con id miTabla, y le agrega la clase CSS miClaseCSS Tambin podemos usar la funcin css: $(tr:even).css(background-color, silver ) hasClass(miClase)

Tambin podemos hacer consultas

INCO - Facultad de Ingeniera Montevideo, Uruguay

45

jQuery

Funciones de navegacin

children() next() prev()

parent()
siblings()

INCO - Facultad de Ingeniera Montevideo, Uruguay

46

jQuery

jQuery tambin provee manejadores de eventos

$(#myID).click(function(){ alert(Hizo click en el elemento + myID); }

Esto permite utilizar una funcin nuestra al momento de ejecutarse un evento en un elemento o en los elementos seleccionados

INCO - Facultad de Ingeniera Montevideo, Uruguay

47

jQuery

Para realizar pedidos AJAX se utiliza la funcin $.ajax(opciones)

Inicia un pedido AJAX utilizando las opciones que se pasen como parmetro para controlar la forma de realizar el pedido, as como tambin como se notifica a las funciones de callback
$.ajax({

url: http://miUrl,
dataType: json, type: POST, success: function(data){ alert(xito); } })

INCO - Facultad de Ingeniera Montevideo, Uruguay

48

jQuery

Como ya vimos que es muy sencillo retornar datos JSON con ASP.NET MVC La funcin ajax utilizando el tipo json es ideal para solicitar datos va AJAX a las acciones de los controladores

INCO - Facultad de Ingeniera Montevideo, Uruguay

49

jQuery

Efectos visuales

fadeIn() fadeOut() hide()

show()
slideDown() slideUp()

toggle()

INCO - Facultad de Ingeniera Montevideo, Uruguay

50

jQuery

jQuery

http://jquery.com/ http://jqueryui.com http://plugins.jquery.com/

jQuery UI

Plugins de jQuery

INCO - Facultad de Ingeniera Montevideo, Uruguay

51

Preguntas

INCO - Facultad de Ingeniera Montevideo, Uruguay

52