Integración de Silverlight + RIA Services con ASP.NET MVC

Antes de irme de vacaciones, he estado peleándome unos días para integrar una aplicación Silverlight 4.0 dentro de un sitio web ASP.NET MVC, y por fin lo he conseguido. Aunque este no es el caso del que voy a hablar hoy, ya que después de lograr que funcionara decidí probar como sería realizar el mismo proceso pero con RIA Services, y la verdad es que facilita bastante el trabajo. Por lo que es de este último caso del que voy a hablar hoy.

Antes de empezar a trabajar con nuestra aplicación es necesario que instalemos el SDK de Silverlight 4.0WCF RIA Services V1.0 for Silverlight 4 and Visual Studio 2010. Una vez instalados estos plugins, abrimos Visual Studio y creamos un proyecto de tipo Silverlight Application al que llamaremos RiaApp. Si vamos siguiendo el wizard de creación, vemos que en la primera pantalla nos pregunta en que tipo de proyecto web vamos a alojar la aplicación, donde debemos indicar ASP.NET MVC Web Project. En la parte de abajo de dicha pantalla indicamos que la versión de Silverlight que vamos a utilizar es la 4.0.  y además activamos la casilla que habilita los servicios RIA para que podamos trabajar con ellos. Por último al alojar nuestro proyecto en una aplicación ASP.NET MVC nos pregunta si queremos crea un proyecto de pruebas unitarias a lo que diremos que no

 image image image

De forma que se crea la estructura específica de nuestra aplicación tal y como podemos observar a continuación en la siguiente imagen:

image

Siguiendo con el procedimiento normal de una aplicación ASP.NET MVC lo primero que hacemos es crear nuestro modelo de objeto, para lo cual es necesario añadir la fuente de datos de la cual extraeremos la información. Para ello hacemos clic con el botón derecho sobre App_Data > Add > Existing item, y seleccionamos la base de datos AdventureWorks_Data. A continuación vamos a definir el modelo que nos permita trabajar con la base de datos, para ello dentro de la carpeta Models hacemos clic con el botón derecho Add> New Item> ADO.NET Entity Data Model y vamos siguiendo el Wizard hasta llegar al punto en el que tenemos que seleccionar la tabla o tablas que queremos agregar y que en nuestro caso será Product

image imageimage image

Por último depuramos(F6) la aplicación para que se actualicen todas las modificaciones y podamos utilizar la base de datos.

El siguiente paso que vamos a dar es la creación de un servicio de dominio para que podamos conectar con nuestro objeto de datos, desde el cliente. Para ello hacemos clic con el botón derecho sobre el proyecto web Add>New Item> Domain Service y le damos el nombre de  AdventureService. A continuación nos aparece una pantalla para seleccionar el contexto de objeto con el que vamos a trabajar que en nuestro caso es la tabla Product, y para la cual activaremos la opción de editar, de forma que podamos modificar los valores de la misma, y la de generación de metadatos, de forma que podamos validarlos.

image image

Por último lo que vamos a hacer es añadir nuestra tabla a la aplicación Silverlight en forma de DataGrid. Para ello, si hacemos clic en la pestaña de Data Sources , cuando estamos en la aplicación Silverlight, nos aparece el contexto de datos que hemos creado. De forma que si expandimos Product y arrastramos el modelo en forma de Datagrid a la página MainPage.xaml este se genera de forma automática

image image

Tras realizar algunas modificaciones sobre el DataGrid para que sólo se muestren algunos de los campos de la lista, compilamos(F5) nuestra aplicación y vemos que se abre la página RiaAppTestPage.aspx donde aparecen nuestros datos:

image

Por último lo que vamos a hacer es integrar el objeto Silverlight creado dentro de nuestra página principal. Para ello abrimos la vista Index del controlador Home que se encuentra en Views >Home, y añadimos el código que se genera al crear nuestra aplicación, que se encuentra dentro de la página RiaAppTestPage.aspx:

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

Y el resultado final sería el siguiente, donde gracias a Silverlight 4.0 podemos mostrar e interactuar con los distintos elementos del DataGrid desde nuestra aplicación ASP.NET MVC, y lo mejor de todo sin escribir nada de código:

image 

¡¡¡Fácil, sencillo y para toda la familia!!!

Aquí dejo el código para su descarga, teniendo en cuenta que hay que añadir la base de datos AdventureWorks_Data para que funcione correctamente.

12 comentarios en “Integración de Silverlight + RIA Services con ASP.NET MVC”

  1. muy bueno amigo, estoy siguiendo los ejercicios q dejastes hasta el numero 3 de business appication silverlight 4.0 pero falta q sigas en el tema y lo termines para poder aprender, lo de asp mvc para mi es nuevo ya hice el ejemplo y me salio bien sin problemas como en el business application, ahora cual es la diferencia o cual es mejor con business application q trabaja con asp.net o con aplicacion de navegacion de silverlight q podemos elegir usar asp.net mvc..??? orientame en esto ya q de ello depende el proyecto q pienso hacer….

    ah te comento q este ejercicio lo hice desde silverlight, eligiendo aplicacion de navegacion y luego cuando me pide en donle lo alojo elegi asp.net mvc, creo q en eso no hay variacion de la forma como tu lo hicistes o como yo lo hice…
    salu2,

  2. Hola Alex, ya siento no haberte contestado antes pero es que estaba de vacaciones y no había visto tus comentarios.

    Lo primero de todo decir que, tal y como comentas, este proyecto también se puede crear a partir de una aplicación silverlight alojada en otra asp.net mvc, es lo mismo.
    En cuanto a la pregunta a cerca de que tecnología utilizar para el desarrollo de aplicaciones de negocio, para mi depende de con que tecnología te sientas tu más cómodo, y de si conoces el lenguaje asp. Ya que en cuanto a posibilidades a la hora de trabajar con los datos ofrecen prácticamente lo mismo.
    Sin embargo, a mi personalmente me parece más interesante utiizar Asp.net mvc con Silverlight porque te permite explotar, tanto las características propias de este framework (separa modelo,lógica y diseño),como las que aporta silverlight a nivel de interfaz de usuario. De esta forma se puede combinar ambas características para crear aplicaciones más potentes, y de foma más sencilla.

    Por último visto tu interés en utilizar Sql to Linq para trabajar con el modelo de datos, en próximos articulos mostraré como implementar las mismas aplicaciones que hemos hecho hasta ahora pero usando Sql to Linq

    Un saludo
    Y gracias por tus comentarios

  3. podrias ponerme el código del ejemplo y así poder interactuar y sacar todo el partido del mismo??esque asi a veces es muy enredado y no consigo llegar a diversas partes del mismo!!!!

  4. Ya esta disponible el código del proyecto. He eliminado la base de datos ya que sino era imposible subir el archivo debido al tamaño del mismo. Por lo tanto, lo único que hay que hacer es añadir la base de datos AdventureWorks_Data a nuestro proyecto para que este funcione correctamente.
    Si teneis algun problema en la implementación del mismo, no dudeís en hacermelo saber
    Un saludo

  5. Buenas
    estoy realizando mi proyecto fin de carrera con una aplicación de negocio en silverlight.
    La tengo bastante avanzada, y me he dado cuenta que tengo que modificar la base de datos eliminando una tabla y cambiando una relación.
    Para usar la base de datos he creado un ado.net.
    ¿Cómo puedo hacerlo para no empezar desde cero?
    Muchas gracias

  6. Lo que tienes que hacer es realizar las modificaciones necesarias en tu base de datos, y luego actualizar el modelo ado.net que has creado para que se refresquen los datos.

    Aquí te dejo un enlace que te puede servir de guía, ya que explica como realizar dichas modificaciones en la base de datos, y como actualizar posteriormente el modelo de forma sencilla, y sin tener que empezar de cero 😉

    http://www.asp.net/mvc/tutorials/getting-started-with-mvc-part8

    Espero que te sirva de ayuda
    Un saludo

  7. ¡¡¡Muchas gracias por tu respuesta!!!
    Me ha ayudado un montón. También tengo que en el servidor de dominio y en los metadatos de este, he tenido que realizar algunas modificaciones. Sobre todo, he tenido que eliminar en el cliente el proxi que tenía creado y volver a compilar para que reconociera los cambios realizados en el servidor.
    Muchas gracias por todo.
    Saludos!!!

  8. Felicitaciones, me parece muy buena la idea, ahora me podes decir como harías para que una vez mostrados los datos con el control silverlight y luego que el usuario haya realizado cambios o seleccionado una opción o incluso pulsado un botón, se dispare un evento con datos hacia ASP.NET MVC? Yo programo con silverlight desde hace unos años, pero ahora estaba inquieto por usar ASP.NET MVC pero no me convence como resuelve la interface de usuario, por eso esta opción me encata.

  9. Hola Jorge,
    El modo de acceder a los datos desde ASP.NET MVC es a través del servicio de dominio que hemos definido previamente (AdventureService). Ya que cuando operamos con Silverlight mediante RIA Services, es este servicio el que se encarga de interactuar con el modelo de datos. Por ejemplo, podriamos obtener una lista de nuestros elementos actualizados de la siguiente forma:

    public ActionResult List()
    {
    var service = new AdventureService();
    IQueryable productos = service.GetProduct();
    return View(productos);
    }
    Y luego los mostraríamos a través de la vista como hemos visto en otras ocasiones:
    < % foreach (var pro in Model) { %>

  10. < %=Html.ActionLink(pro.Name, "Details", new { id = pro.ProductID })%>
    < %=Html.Encode(pro.ProductLine)%>
  11. < % } %>

    Aquí hay otro ejemplo de como pasar datos datos entre Silvelight y ASP.NET MVC, por si quieres echarle un vistazo:)

    http://geeks.ms/blogs/gortigosa/archive/2010/09/09/aplicando-silverlight-a-la-v-de-mvc.aspx

    Espero que te sea de ayuda
    Un saludo

  12. Excelente trabajo.

    Vengo de un mundo por no decirlo obsoleto de programación estructurada, y estoy aprendiendo POO y web. MVC encuentro que es un patrón muy práctico para quienes tenemos una “cietra estructura mental”, lo que en cierta medida nos facilita la vida. Ahora, la posibilidad de integrarlo con Silverligtht expande enormemente las posibilidades. Traté de hacer algunas cosas en MVC junto con AJAX usando el AJAX Toolkit, pero no es muy fácil la integración dado que según entiendo, el patrón de AJAX Toolkit aplica sobre Web Forms.

    Tengo una pequeña aplicación que estoy desarrollando, e intentaré migrarla a esta nueva forma, y la clave, al parecer, para mantener una buena coherencia del patrón MVC es utilizar de manera correcta los DomainDataSource.

    Felicitaciones por tu trabajo.

Deja un comentario

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