TUT: Aprender ASP .NET MVC Paso a Paso en 7 dias(Día 4)

Contenido
¿Cuál es la Agenda?
  • Lab 15: JSON, MVC y JQuery
  • Lab 16: Gestión de Sesiones en MVC(ViewData, ViewBag, TempData y Variables Sesión)
  • Lab 17: Controles Asíncronos
  • ¿Que hay para el quinto día?

¿Cuál es la Agenda?
Este artículo es la continuación de Aprender paso a paso en 7 días y puedes revisarlo en los link siguientes:
Lab 15: JSON, MVC y JQuery
En caso seas nuevo en JSON por favor lee esto antes empezar con este laboratorio, Acerca de JSON.
En este laboratorio vamos a exponer un simple objeto “Customer” de MVC en formato JSON y consumimos el mismo usando Jquery.

Para este laboratorio por favor asegurarse que el proyecto el nombre del proyecto se MvcCuartoDia y crearse use la plantilla de proyecto básico esto es necesario para incluir las librerías Jquery en el proyecto MVC.


Paso 1: Crear un simple modelo Customer
El primer paso es crear una simple clase modelo “Customer” en el proyecto.

Paso 2: Exponer el objeto “Customer” como JSON
Ahora agregamos un controlador “Customer”, para exponer el objeto customer en formato JSON necesitamos usar “JsonResult” como se muestra en el siguiente código.


Por favor, ejecute el controlador con la acción JSON anterior para comprobar que el resultado JSON se muestra correctamente. Si estas usando Chrome el resultado se muestra en el navegador, si este es Internet Explorer este descargara un archivo.

Paso 3: Consumiendo el controlador JSON en Jquery
En caso seas nuevo en Jquery, por favor leer esto ¿Que es Jquery?

El siguiente paso es consumir los datos JSON usando una vista MVC. Asi que adelante Añadimos una vista con el nombre AprenderJquery.cshtml

Lo primero es agregar la referencia a la libreria Jquery en la parte superior de la pagina. en caso no encuentras jquery en el proyecto esto significa que no has creado el proyecto usando la plantilla basica o sino puedes instalarlo de forma manual usando la Consola de Administracion de paquetes de Visual Studio, esto lo explico al detalle en el artículo cargar vistas parciales en ASP.NET MVC usando Jquery Ajax o tambien usando CDN como lo explico es este tips de CDN.

Usando sintaxis html

Usando sintaxis razor

Puedes entonces hacer una llamada al controlador que esta exponiendo en formato JSON usando el método “getJson” como se muestra más abajo. Este toma tres parámetros:

El primer parámetro en “getJson” es el URL MVC JSON con el formato de estructura controller/action.

El segundo parámetro es la data a ser pasada. Por ahora esto es nulo como estamos más interesados en obtener datos JSON en lugar de publicar los datos.

El ultimo parametro es el método de devolución de llamada “Display” el cual será invocado cada vez que obtengamos datos JSON del controlador. La función ”Display” también está disponible en el siguiente código. Estoy asignando una alerta con la propiedad name. puedes ver como solamente tipeo data.CustomerCode, no convierto los datos JSON estos son automáticamente convertidos a objetos javascript.


El código completo en la vista MVC lo mostramos abajo. Se creado un simple botón HTML y dentro el evento click en donde se está llamando al método javascript “getJson” el mismo que hace una llamada al controlador JSON y muestra la data JSON en una alerta javascript.


La vista anterior es invocado usando el método “MostrarJson” del controlador Customer creado anteriormente.


Paso 4: Ejecutar la aplicación y ver el dato
Después de haber hecho todos los pasos es hora de ejecutar el proyecto(Ctrl+F5) y digitar en la url http://localhost:50360/Customer/mostrarJson para ver la belleza JSON en ejecución.


Lab 16: Gestión de Sesion en MVC (ViewData, ViewBag, TempData y variables sesión)
La meta principal en MVC es crear aplicaciones web y aplicaciones web usando el protocolo HTTP. Cuando envías una solicitud a la aplicación MVC se atiende la solicitud y se olvida de la solicitud. La próxima vez que el mismo usuario envía la solicitud MVC lo trata como una completa nueva solicitud.

Ahora piensa en la siguiente situación:
  • El usuario final envía la solicitud al sitio MVC
  • MVC envía una pagina de logueo
  • El usuario ingresa detalles adecuados y envía los datos a la aplicación MVC.
  • MVC valida el usuario y enviar la página inicial del sitio. La aplicación MVC ahora se olvida todo lo relacionado con el usuario ya que es apátrida.
  • El usuario hace clic en uno de los link de la página inicial. Esto es enviado a la aplicación MVC y porque la aplicación MVC se ha olvidados de todo lo relacionado con el usuario, le envía una página de inicio de sesión para la autenticación de nuevo… el usuario se sentirá extraño..

Este resumen necesitamos tener algunos tipos de mecanismos el cual nos ayudara a recordar estados entre la solicitud y la respuesta de MVC.

Hay 3 maneras de mantener estados en MVC y estas maneras puede ser usado dependiendo de que capa a qué capa se navegas.

Temp Data: Ayuda a mantener los datos sobre las redirecciones para una única solicitud y respuesta. Ahora la redirección puede ser de controlador a controlador o de controlador a vista.

View Data: Ayuda a mantener datos cuando se mueve de controlador a la vista.


View Bag: Este es un contenedor dinámico alrededor de vista de datos. Cuando usamos el tipo “viewbag” la conversión no es requerido. Utiliza una clave dinámica interna.




Variables sesión: Usando variables sesión podemos mantener datos hasta cerrar el navegador. Demostraremos los fundamentos anteriores con una demostración.

Paso 1: Crear dos controladores “Default1” y “Default2”.
Agregar dos controladores Default1 y Default2.



Paso 2: Establecer Sesion, tempdata, viewdata y viewbag
En el controlador “Default1” dentro del método “Index” asignamos valores a sesión, tempdata, viewdata y viewbag como se muestra en el siguiente código. Una vez que hemos asignado los valores hacemos una redirección a la acción “AlgunaOtraAccion” el cual pertenece al controlador “Default2”.



Paso 3: Leer valores sesión, tempdata, viewdata y viewbag
En el controlador “Default2” capturamos para leer valores asignados en el controlador “Default1”. Una vez que los valores son leídos invocamos a la vista llamada “VistaDatos”.

Por favor note que se esta asignando “ViewData” y “ViewBag” antes de redireccionar a la vista.


La vista “VistaDatos” solo muestra los datos presentados en “TempData”, “Viewdata”, “ViewBag” y “Session”.

Vamo a habilitar un punto de depuración en las acciones de ambos controladores y vamos a ir al controlador Defualt1 y a su método Index http://localhost:50360/default1/index . En esta acción las sesión, tempdata, viewdata y viewbag son cargadas. Debajo podemos ver como se muestran los datos.



Ahora de aquí vamos a redireccionar al controlador “Default2” acción “AlgunaOtraAccion”.

En el controlador podemos ver que obtenemos las variables “TempData” y “Session” pero no “ViewData y “ViewBag”(Ver str3 y str4 con asignados null). En otras palabras “ViewData” y “ViewBag” no hacen persistencia de datos en redirección mientras “TempData” y “Session” si lo hacen.

Cuando la vista se invoca podemos ver todos los datos. En otras palabras los datos “ViewData” y “ViewBag” persistieron del controlador a la vista. Y también los datos “TempData” y “Session” persistieron.

Ahora cuando la vista vista invocada he agregado un HiperlInk “Hazme Click” el cual invoca a la acción “Index” del controlador “Default1”. Esto es para simular una nueva solicitud.


Cuando se hace click en el hipenvinculo. Todas las otras variables se apagan, solo la variable “Session” persiste.Lo podemos ver en la figura siguiente. Esto significa que las variables “Session” pueden persistir entre solicitudes.



Debajo está una tabla resumen que muestra los diferentes mecanismo de persistencia.



Lab 17: Controler Asíncronos
Las aplicaciones MVC al final del día son aplicaciones web los cuales son hospedados dentro de IIS. Ahora cuando cualquier solicitud llega al controlador MVC este genera un hilo del hilo pool y sirve a esta petición. En otras palabras el servidor Web IIS mantiene un grupo de hilos en lugar de crear hilos a partir de cero una y otra vez para obtener beneficios de rendimientos.

Vamos asumir que un servidor web ha creado un pool de hilos de tamaño 2. Ahora esto es solo una suposición porque un pool de tamaño 2 es muy hipotético. Pero para hacer cosas simples consideramos que los pool de hilos son de tamaño 2.

Vamos a decir primero que la solicitud llega al sitio, IIS tira un objeto de pool de hilo ya realizado y empieza a servir la petición. Mientras tanto vamo a decir llega la segunda solicitud en lo que de nuevo el IIS se tira un hilo del pool de hilo y empieza a servir la segunda petición. 

Ahora lo divertido empieza cuando llega la tercera solicitud. El servidor IIS no tiene más objetos de hilos en el pool como ya ya han sido servidos a “request1” y “request2”. Asi que el servidor solo mueve la tercera solicitud a un modo de espera o el servidor puede enviar un mensaje ”503 ocupado” para el cliente.

Esta situación es denominado como “Thread Starvation”. Las situación Thread Starvation se pueden superar al hacer la solicitud “Asincrona”. Así que la petición llega e inmediatamente la solicitud se procesa de manera “Asincrona” y soltando el hilo que sirva la solicitud inmediatamente.

Así que para evitar esto podemos lograr lo mismo, haciendo nuestros controladores “Asincronos”.

Ahora vamos a entender paso a paso como implementar controladores asíncronos en MVC.

Paso 1: Heredar de la clase AsyncController
Considerando la siguiente clase controlador “HeavyController” el cual tiene una acción “AlgunMetodoHeavy” y esta acción espera 20 segundos. Así que vamos a entender cómo podemos hacer este simple controlador Asynch.


Así que el primer paso es heredar de la clase “AsyncController”.


Paso 2: Marcar métodos con el anexo Async
El siguiente paso es añadir la palabra Async después de los métodos. Asi como podemos observar “AlgunMetodoHeavy” ha sido cambiado a “AlgunMetodoHeavyAsync”.

La lógica de código de Heavy es decir “Thread.Sleep()” is movido a un metodo diferente y este método es invocado usando la tarea de la librería paralela de “AlgunMetodoHeavyAsync”.

Cada vez que una “Task” o un “Thread” es iniciado nosotros incrementamos el contador de OutstandingOperations pero usando “AsyncManager” y cada vez que una tarea multi-threaded es completada decrementamos el contador.


Paso 3: Crear el método completado
Ahora una vez todas las tareas multi-threaded completadas y el OutstandingOperations esta cero necesitamos retornar la vista. Asi para el mismo necesitamos crear un metodo ActionResult con la palabra Completed anexada. Este método se llama cuando todas OutstandinOperations son cero.



Paso 4: Asegurarse de crear la vista “AlgunMetodoHeavy.cshtml”
También asegurarse de agregar la vista “AlgunMetodoHeavy” con el siguiente texto dentro.


Paso 5: Ejecutar y disfrutar
Ahora digitar en el navegador “http://localhost:50360/heavy/AlgunMetodoHeavy” y ver la salida. 


TIP: ¿Qué es Jquery?


¿Qué es Jquery?
Jquery es una librería javascript reutilizable el cual simplifica la codificación javascript.

Así que en lugar de escribir largos códigos como se muestra:


Usando Jquery el código javascript de arriba, es ahora simplificado como este que se muestra:

¿Como usar estas librerías Jquery?
Nenesitamos descargar el archivo Jquery.js de http://jquery.com e incluir en nuestras propias paginas web. Los archivos Jquery son llamados con el numero de versión como “jquery-1.8.1.js” donde 1.8.1 es la versión del archivo JS. En la parte superior de su página necesitas incluir la referencia como se indica en el siguiente código:

TIP: Acerca de JSON


¿Qué es JSON?
JSON significa JavaScript Object Notation. JSON es un lenguaje ligero, independiente del formato de intercambio de datos.

¿Como JSON formatea ?
El formato de JSON es como se muestra en el código de abajo. Este empieza con una simple llave de apertura, seguido con valores separados por comas y finalmente termina con una llave 
La parte buena de JSON simplemente se traduce a objetos javascript. Por ejemplo en la siguiente imagen puedes ver como la variable persona ha sido transformado en un objeto persona las propiedades “FirtName” y “LastName”.

TIP: Actualizar tablas relacionadas en T-SQL

En Sql Server tuve la necesidad de hacer una actualización en tablas relacionadas tipo maestro - detalle. Me di con la sorpresa que no se podía ya que me tiraba un error de dependencia Foreign key y no me permitía actualizar el campo de relación en ninguna de las dos tablas.

Así que averiguando por ahí encontré la solución lo primero que hay que realizar es asegurarse que en la relación está habilitado la la actualización y eliminación en cascada y para realizar esto correr el siguiente script.

Ahora si solo actualizamos la tabla cabecera y la tabla detalle automáticamente se actualizará.

TIP: CDN o link para algunos componentes web


Los CDN(content Distribuitor Networking), son servicios de alojamiento que brindan algunos empresas con el fin de brindar los componentes en linea, hacer uso de algún CDN hace más rápida y eficiente la carga de nuestras páginas web, y puede suceder que algun otro desarrollador este usando la misma CDN que nosotros y este cargado en la cache lo cual no seria necesario volver a cargar el CDN.

Por ejemplo:

JQUERY
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

AngularJS
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

La empresa Google tiene alojado los principales componentes en sus servidores:
https://developers.google.com/speed/libraries/devguide

ART: Como cargar vistas parciales en ASP.NET MVC usando Jquery Ajax


En este articulo, hablaremos vistas parciales en ASP.NET MVC y cargalos via Jquery Ajax Podría ver varios escenarios para esto. vamos asumir que tenemos una pagina que contiene múltiples vistas parciales y datos de varias fuentes. Podemos cargar cada vista parcial usan AJAX de forma individual, esto mejora la experiencia de usuario porque los componentes son cargados fácilmente si esperar hasta la carga de todos los componentes. Tan protnto como cada uno de las cargas de control, para el usuario estará disponible ara el usuario en la página.

Paso 1: Creando el proyecto
Yo estoy usando MVC 4 para este artículo; pero no importa si usas MVC 3, MVC 4 o MVC 5. Vamos a crear un proyecto MVC 4 en blanco en visual Studio 2012 y le vamos a llamar PartialView_Jquery.

Paso 2: Agregando clases modelo
Luego agregamos dos clases modelo Cliente y Producto, en la estructura del proyecto tiene que estar dentro de la carpeta Models.

Clase Producto:

Clase Cliente:
Paso 3: Agregando el Controlador
Ahora vamos a crear el controlador Home y los métodos Index, ObtenerProducto y ObtenerCliente.

Paso 5: Cargando de datos al modelo
Ahora vamos a crear una lista de los objetos Cliente y Producto, esto lo realizamos en los métodos del controlador Home creados en los pasos anteriores.

Este código es para el objeto cliente :


Esto es para el objeto Producto:


Paso 5: Creando la Vistas Parciales
Ahora creamos las vistas DetalleCliente.cshtml y DetalleProducto.cshtml relacionados con los métodos creados en el controlador Home Obtener Cliente y ObtenerProducto respectivamente(se puede crear haciendo click derecho sobre el método del controlador y seleccionando la opción crear vista).
Creando la vista parcial DetalleProducto.cshtml


Creando la vista parcial DetalleCliente.cshtml


Paso 6: Creando la Vista principal Index.cshtml
Es en esta vista donde vamos a cargar las dos vistas parciales, utilizando Jquery ajax, para agregar a nuestro proyecto los archivos script de jquery podemos utilizar la consola de administrador de paquetes de visual studio(Herramientas->Administrador de Paquetes de Biblioteca), y digitar install-Package Jquery, entonces se instalará en la carpeta Scripts de nuestro proyecto.

Ahora si podemos trabajar con nuestra vista principal Index.cshtml:


Paso 7: Probando la aplicación.
Ahora se han creado dos botones, cuando se presiona el botón carga la vista correspondiente, esto hará que la carga de la información sea más rápido porque solo esta cargando una porción de la pagina y no toda la 
página.