Aplicando Silverlight a “la V de MVC”

En el último artículo que escribí, relacionado con la tecnología ASP.NET MVC, hablé de como explotar los datos de nuestra aplicación web mediante los RIA Services de Silverlight. Pero también comenté que se puede acceder a ellos sin necesidad de utilizar dichos servicios, que es lo que vamos a ver en este caso: el uso de Silverlight como plataforma para mejorar la interfaz de usuario, o lo que en ASP.NET MVC viene a ser la “la V (Vista) ”.

Inicialmente lo que hacemos es crear un proyecto de tipo Silverlight Application llamado SilverlightDep y que se alojará en una aplicación web ASP.NET MVC. Al igual que en el resto de aplicaciones ASP.NET MVC se nos preguntará si queremos crear un proyecto de pruebas unitarias a lo que diremos que no (de momento).

SilverApp image image

A continuación, añadimos la base de datos AdventureWorks_Data a nuestro proyecto, y tal y como hemos visto en otras ocasiones creamos un modelo de acceso a datos de tipo ADO.NET Entity Data Model que nos permita acceder a los elementos de la tabla Department.

image image  imageimage

Una vez definido nuestro modelo de datos, pasamos a diseñar el objeto Silverlight que se encargará de mostrar dichos datos de la forma deseada. Para ello abrimos el archivo Main.xaml, y añadimos un ListBox, llamado Departments, que se encargará de mostrar los nombres de los departamento, y un TextBlock, llamado DepartmentsInfo, en el cual se mostrará toda la información relacionada con el departamento seleccionado. Además configuramos el evento de carga de nuestro control de usuario para que se lance con la carga de la página “Page_Loaded”.

image 

Dentro del proyecto SilverlightDep, añadimos una clase llamada Department que nos permita trabajar con nuestros datos mediante dicho objeto. Por ello, este tiene que tener las mismas propiedades que la tabla Department de nuestra base de datos, para que sea posible el mapeo.

  1. public class Department
  2.     {
  3.  
  4.             public int DepartmentID { get; set; }
  5.             public string Name { get; set; }
  6.             public string GroupName { get; set; }
  7.             public DateTime ModifiedDate { get; set; }
  8.     }

Añadimos las siguientes referencias al proyecto SilverlightDep, para que podamos utilizar Json para serializar nuestros datos, y poder mostrarlos a través de nuestra vista:

System.Runtime.Serialization

System.ServiceModel.Web

Una vez que ya tenemos la interfaz diseñada, vamos a dotar a cada elemento de la funcionalidad específica. Para ello vamos al archivo Main.xaml.cs, añadimos la siguiente referencia:

Inicializamos un objeto de tipo lista de departamentos:

  1. IList<Department> result;

Y añadimos el siguiente código:

– Se lanza la aplicación cliente de Silverlight

  1. void Page_Loaded(object sender, RoutedEventArgs e)
  2.         {
  3.             WebClient wc = new WebClient();
  4.             wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
  5.             wc.OpenReadAsync(new Uri(«http://localhost:49705/Department/List»));
  6.         }

*Para saber cuál es la url que debemos indicar, es necesario compilar la aplicación y ver en que sitio web se está ejecutando. La ruta Department/List se define así porque vamos a trabajar con un controlador llamado Department, y una vista llamada List.

– Se leen los datos de nuestro objeto y se cargan en el ListBox, mediante el uso de la serialización en Json

  1. void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
  2.         {
  3.             DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(List<Department>));
  4.             result = (List<Department>)(json.ReadObject(e.Result));
  6.             for (int i = 0; i < result.Count; i++)
  7.             {
  8.                 Departments.Items.Add(result[i].Name);
  9.             }
  10.  
  11.         }

– Se muestra en el TextBlock la información de cada elemento seleccionado en el ListBox

  1. private void Departments_SelectionChanged(object sender, SelectionChangedEventArgs e)
  2.         {
  3.  
  4.             int index = Departments.SelectedIndex;
  5.             DepartmentsInfo.Text = «DepartmentID: « + result[index].DepartmentID.ToString() + «n» +
  6.                               «Name: « + result[index].Name.ToString() + «n» +
  7.                               «GroupName: « + result[index].GroupName.ToString() + «n» +
  8.                               «ModifiedDate: « + result[index].ModifiedDate.ToString();
  9.         }

Por último tenemos que crear la vista específica que nos permita interactuar con nuestro objeto cliente Silverlight. Para ello creamos un controlador llamado Department, y que contendrá un ActionResult, que nos devuelva a través de Json la vista que nosotros queremos. Para ello dentro de SilverlightDep.Web, hacemos clic con el botón derecho sobre Controllers > AddController, y creamos un controlador que llamaremos DepartmentController.

Dentro de este archivo:

– Hacemos referencia a las siguientes bibliotecas:

  1. using SilverMvcApp.Web.Models;

– Instanciamos la entidad con la que vamos a trabajar:

  1. AdventureWorks_DataEntities entity = new AdventureWorks_DataEntities();

– Creamos un resultado de acción que nos muestre los datos definidos en la entidad, en forma de lista

  1. public ActionResult List()
  2.         {
  3.             return Json(entity.Department.ToList(),JsonRequestBehavior.AllowGet);
  4.         }

Es necesario, indicar la opción JsonRequestBehavior.AllowGet, ya que si no, podemos tener problemas de acceso a las peticiones Json.

Por último creamos la vista correspondiente, para ello hacemos clic con el botón derecho sobre List > AddView.

image

Dentro de la vista List, en el apartado en MainContent, añadimos nuestro objeto Silverlight, cuyo código generado podemos encontrar en la página de prueba SilverlightDepTestPage.aspx

  1.     <div id=»silverlightControlHost»>
  2.         <object data=»data:application/x-silverlight-2,» type=»application/x-silverlight-2″ width=»100%» height=»100%»>
  3.           <param name=»source» value=»ClientBin/SilverlightDep.xap»/>
  4.           <param name=»onError» value=»onSilverlightError» />
  5.           <param name=»background» value=»white» />
  6.           <param name=»minRuntimeVersion» value=»4.0.50401.0″ />
  7.           <param name=»autoUpgrade» value=»true» />
  8.           <a href=»http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0″ style=»text-decoration:none»>
  9.               <img src=»http://go.microsoft.com/fwlink/?LinkId=161376″ alt=»Get Microsoft Silverlight» style=»border-style:none»/>
  10.           </a>
  11.         </object><iframe id=»_sl_historyFrame» style=»visibility:hidden;height:0px;width:0px;border:0px»></iframe></div>

Compilamos (F5), y el resultado que obtendríamos sería el siguiente.

image 

Si queremos utilizar este objeto en cualquier otra vista, lo único que tenemos que hacer es insertar este mismo código en la vista específica.

Además vamos a ver este mismo proceso pero utilizando un modelo de datos LinqToSql, ya que en artículos anteriores así me lo pedíais. La mayoría del procedimiento es similar a lo visto anteriormente, por lo que sólo comentaré las cosas diferentes. En este caso, nuestro modelo de acceso a datos será de tipo LINQ to SQL Classes, y lo llamaremos DepartmentModel.

image

Y una vez creado el modelo, debemos modificar el archivo DepartmentController, y configurar nuestro resultado de acción List de la siguiente forma:

  1. public ActionResult List()
  2.         {
  3.             DepartmentModelDataContext db = new DepartmentModelDataContext();
  4.             var deps = from dep in db.Departments
  5.                        select new
  6.                        {
  7.                            dep.DepartmentID,
  8.                            dep.Name,
  9.                            dep.GroupName,
  10.                            dep.ModifiedDate
  11.  
  12.                        };
  13.             return Json(deps,JsonRequestBehavior.AllowGet);
  14.  
  15.         }

De esta forma, combinando ASP.NET MVC y Silverlight, podemos crear aplicaciones muy potentes a nivel de interfaz de usuario…¡¡entre otras cosas!!

Un comentario sobre “Aplicando Silverlight a “la V de MVC””

  1. Excelente!.

    Amigo, consulta, qué pasa con los típicos mantenedores de data que se generan con los Helpers en ASP.NET MVC? Los métodos EDIT GET y EDIT POST todavía son aplicables en el Controlador respectivo? Te consulto esto ya que en los ejemplos más básicos que existen en ASP.NET MVC los métodos EDIT GET/POST, que usan vistas templates,obtienen los datos del form de la vista respectiva. Con Silverlight debiésemos trabajar con un viewmodel dada la cantidad de data? y esta entregarla actualizada al controlador para guardar los nuevos datos?

    Muchas gracias por tu gran ayuda.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *