ASP.NET MVC y Knockout : ViewModel

Una situación muy común que nos encontramos cuando comenzamos a trabajar con Knockout y ASP.NET MVC es la inicialización del modelo de KO (estructura JS) a partir del modelo de la vista (objeto C#). Una alternativa es inicializar el modelo de KO por medio de una llamada ajax al servidor (por ejemplo invocar un servicio WebAPI que nos devuelva el modelo ya serializado). Sin embargo como explica Eric Hexter en este excelente post, la experiencia de carga de la página por medio del renderizado del servidor (server side rendering) al parecer sigue siendo la más óptima.

Por lo tanto tenemos por un lado un renderizado inicial del lado del servidor utilizando un modelo de vista para tal propósito y por el otro lado tenemos KO con su propio modelo. La pregunta es cómo transformamos el viewmodel de ASP.NET MVC al viewmodel de KO sin utilizar llamas Ajax?

Investigando un poco encontré una simple solución propuesta por Eric Hexter (ver enlace de arriba). Lo que él propone es que simplemente convirtamos el modelo de la vista en un objeto Json dentro del código javascript de la página. En el ejemplo utilizaremos el view engine Razor para tal fin.

Manos a la obra!

En primer lugar vamos a crear el método de extensión ToJson() que nos permitirá representar objetos de .NET en formato JSON:

JsonExtension

JsonExtension

Por medio de esta extensión vamos a tener disponible el modelo de la vista en formato JSON, lo que nos posibilitará utilizarlo en nuestra lógica del lado del cliente (código javascript). Ahora lo que necesitamos es mapear el objeto JSON a los objetos observables que utiliza KO. Quien nos permite realizar tal actividad es el siguiente plugin de KO: KnockoutJS Mapping plugin  (disponible por medio de Nuget):

PM> Install-Package Knockout.Mapping

Veamos qué tan simple es su uso (continuamos con el ejemplo del post anterior):

Serializando el view model.

Serializando el view model.

Algunos puntos importantes:

  • Referencias a las librerías de KO y KnockoutJS Mapping plugin.
  • Generamos la representación JSON del modelo de la vista (del servidor) por medio del método de extensión ToJSon() y lo escribimos en el script por medio del helper HTML Raw.
  • El resto debería ser historia conocida 😉

Bien, finalmente tenemos el cuerpo del documento HTML:

Estructura HTML

Estructura HTML

Y la generación – mock – del modelo (en este ejemplo en el método de acción Index del controlador Home):

Método de acción Index

Método de acción Index

Corremos la aplicación y deberíamos obtener el siguiente resultado:

Resultado :)

Resultado 🙂

Como pueden ver esta es una forma muy simple de bindear el modelo de la vista del servidor al modelo de la vista del cliente.

Espero que les sea de utilidad!

Anuncios

3 comentarios en “ASP.NET MVC y Knockout : ViewModel

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s