[Tutorial] Comenzado con MVVM y Knockout.js – Parte 4: Conectar el ViewModel, con el Model mediante ASP.NET WebAPI y propiedades condicionales.

Hola, seguimos con nuestro proceso de aprendizaje sobre Knockout.js, esta vez veremos la posibilidad de condicionar ciertas propiedades del DOM según el valor del atributo del ViewModel y finalmente, enviaremos nuestro viewmodel serializado en json a un servicio REST de ASP.NET WEB API.

Te dejo el link de los tutoriales anteriores:

Parte 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx

Parte 2
http://geeks.ms/blogs/gperez/archive/2012/08/22/tutorial-comenzado-con-mvvm-y-knockout-js-parte-2-propiedades-observables-e-iteraciones.aspx

Parte 3
http://geeks.ms/blogs/gperez/archive/2012/09/06/tutorial-comenzado-con-mvvm-y-knockout-js-parte-3-agregar-y-remover-de-arreglos-observables.aspx

Desarrollo en el Cliente

Veamos el primer comportamiento deseado, en donde tenemos podemos asignar la persona que esta a cargo de un teléfono (quizas no tiene mucho sentido, pero es para efectos de ejemplo), como vez, al momento de presionar el check mostramos una caja de texto en donde podemos ingresar el nombre del encargado.

mvvm4

Veamos primero cual es el código HTML asociado a la lista de telefonos, puedes ver que el input type=”checkbox” tiene asociado una nueva propiedad del viewmodel que se llama tieneAcargo que es boolean, la misma propiedad se une al atributo visible del input text, de manera que lo que sucede en ese momento es:

  1. Se hace presiona sobre el check
  2. El check esta unido a una propiedad del viewmodel, por lo que por del binding bidireccional el viewmodel cambia el valor de la propiedad
  3. Nuevamente por el binding bidireccional la propiedad visible del input text obtiene el valor del viewmodel y se setea visible o invisible según el caso.

<ul data-bind=”foreach: telefonos”>
  <li>
    <span data-bind=”text: numero”></span>
    <button data-bind=”click: borrar” >Borrar</button>
    <input type=”checkbox” data-bind=”checked: tieneAcargo”/>Tiene A Cargo
    <input type=”text” data-bind=”value:Acargo, visible:tieneAcargo” />
  </li>
</ul>

Lo anterior se soporta en algunos cambios que hice el viewmodel, en la “clase” telefono, puedes ver que hay dos atributos observables, el tieneAcargo que es boolean y el Acargo, que contendrá la información escrita dentro de los input text.

<script type=”text/javascript”>

            function telefono(numero) {

                return {

                    numero: ko.observable(numero),

                    tieneAcargo: ko.observable(false),

                    Acargo: ko.observable(),

                    borrar: function () {

                        PersonaViewModel.telefonos.remove(this);

                    }

 

                };

            }

 

var PersonaViewModel = {

    nombre: ko.observable(“Juan Pablo”),

    apellidos: ko.observable(“Pérez Nuñez”),

    edad: ko.observable(1),

    telefonos: ko.observableArray([new telefono(234234),

                                   new telefono(565345)]),

         addTelefono: function () {

         this.telefonos.push(new telefono(document.getElementById
                                                 (
“tx_telefono”
).value));

        alert(“Cantidad de Telefonos:” + this.telefonos().length);

    },

    grabar: function () {

          alert(“Preparado para Guardar…”);

          $.ajax({

             url: “http://localhost:11590/Api/Default1”,

             type: “POST”,

             data: ko.toJSON(this),

             contentType: “application/json”,

             success: function (result) { alert(result) }

           });

 

           }

      };

 

   PersonaViewModel.nombreCompleto = ko.dependentObservable(function () {

          return this.nombre() + ” “ + this.apellidos();

      }, PersonaViewModel)

   ko.applyBindings(PersonaViewModel);

</script>     

El siguiente paso es enviar nuestro viewModel a ASP.NET Web API, para esto vamos a utilizar Jquery, notar que dentro del mismo modelo está la función de grabar, lo que garantiza que el concepto de que el viewmodel es responsable por sus propias acciones se mantenga.

Veamos un poco más la función de Ajax, como ya mencioné, estoy utilizando jquery, luego hago referencia a la url en donde esta el servicio que aceptará peticiones por POST. Luego el type POST que indicará cual acción se ejecutara del API Controller, luego ocupo la función  toJSON, recuerda que enconding nativo a json solo lo soportan las últimas versiones de los navegadores, y Knockout da soporte desde IE6, de todas formas, es muy útil este método de Knockout, luego recibimos y procesamos el mensaje de resultado de la acción.

Para llamar a la función grabar utilizamos un botón html simple:

<button data-bind=”click:grabar”>Guardar</button>

Desarrollo ASP.NET WEB API

No voy en entrar en detalle de como crear un proyecto con ASP.NET WEB API, si necesitas más información te recomiendo que leas los artículos anteriores:

Voy a mostrar el controlador y el modelo asociado. El modelo tiene las mismas características que nuestro viewmodel:

public class Persona
    {
        public string nombre { get; set; }
        public string apellidos { get; set; }
        public int edad { get; set; }
        public ICollection<Telefono> telefonos { get; set; }
    }

 

  public   class Telefono

    {

        public string numero { get; set; }

        public string tieneAcargo { get; set; }

        public string Acargo { get; set; } 

 

    }

Luego el controlador que contiene la acción:

public class Default1Controller : ApiController
{
// POST api/default1
  public String Post([FromBody] Persona persona)
  {

    String mensaje = string.Format(“Guardado {0} {1} telefonos:{2}”,
          persona.nombre, persona.apellidos, persona.telefonos.Count);

    return mensaje;

  }

Cuando se presiona el botón guardar veremos que se llama a nuestra acción con los parametros serializados con JSON:

image

 

Luego envío la respuesta al cliente, que consiste en un mensaje para este ejemplo, que me indica que todo esta ok. Ahora bien, luego se puede guardar en una BD, etc et.

image

Y Listo!, Te dejo el código por si quieres descargar este ejemplo:

https://dl.dropbox.com/u/1303802/Demo1MVVM.zip

Saludos!
@chalalo

Un comentario en “[Tutorial] Comenzado con MVVM y Knockout.js – Parte 4: Conectar el ViewModel, con el Model mediante ASP.NET WebAPI y propiedades condicionales.”

Deja un comentario

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