[Tutorial] Comenzado con MVVM y Knockout.js – Parte 5: Conectar el ViewModel, con el Model mediante ASP.NET WebMatrix & Razor

Hola!, continuamos con la serie de tutoriales, este en realidad es una anexo del tutorial anterior, en donde conectabamos el ViewModel con el Modelo con ASP.NET Web API, la cual provee una gran facilidad para manejar las peticiones a las acciones con parámetros con notación JSON. Pero, ¿qué pasa con WebMatrix y Razor? como se hace para recibir JSON? Se puede trabajar con Clases?, este post intenta responder estas preguntas.

PD: Si quieres revisar los otros post de esta serie, revisa:

Parte 4
http://geeks.ms/blogs/gperez/archive/2012/09/12/tutorial-comenzado-con-mvvm-y-knockout-js-parte-4-conectar-el-viewmodel-con-el-model-mediante-asp-net-webapi-y-propiedades-condicionales.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

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 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx

Volvamos a lo nuestro, el ViewModel y su funcionamiento será el mismo que puedes ver en la Parte 4, solo que ahora nos vamos a conectar a una ASP.NET Web Page, veamos la estructura del proyecto en WebMatrix:

image

Página test.cshtml

@{

    var reader = new StreamReader(Request.InputStream);

    var json = reader.ReadToEnd();

    var respuesta =WSTest.guardaPersona(json);

    Response.Write(respuesta);

  

}

Puedes notar que se va leer todo el contenido de lo enviado hacia esta página con el Request.InputStream, a diferencia de ASP.NET Web API, en donde podemos recibir directamente un objeto. Luego se lee todo el Stream y lo paso como parámetro a la función guardaPersona de la página WSTest.cshtml, recuerda que debe estar en la carpeta App_Code para que las funciones que esta contenga sean visibles a las demás páginas.

Página WSTest.cshtml
@functions {
 
  public static string guardaPersona(String obj) {
        var p = Json.Decode(obj);
        Persona persona = new Persona();
        persona = Json.Decode<Persona>(obj);
        return "Se Registro: " + persona.nombre +" con " 
+ persona.telefonos.Count + " Telefonos "
;
   }
 
    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; }
    }
 
}

La función guardaPersona obtiene el parámetro de tipo String, que si vemos que lo que contiene verás:

image

Las clases con las mismas con las que trabajamos anteriormente, así que instanciamos un objeto Persona y utilizamos el helper Json.Decode con el tipo <Persona> y le pasamos como parámetro el argumento de la función, que corresponde al String que contiene el formato json de lo enviado por Knockout.js. Ahora el objeto persona ya está contiene los datos enviados desde el cliente y estamos listos para guardar el objeto. En mi caso solo devuelvo un string para demostrar que ya podemos utilizar el objeto instanciado.

image

El ViewModel Solo cambia en la llamada, ahora no es una acción de ASP.NET Web API, es una página por lo que el modelo queda de la siguiente manera:

    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: "test.cshtml",
                        type: "POST",
                        data: ko.toJSON(this),
                        contentType: "application/json",
                        success: function (result) { alert(result) }
                    });
 
                }
            };

Como vez, casi no hay cambios y funciona muy bien Sonrisa.Si quieres descargar el ejemplo:

Descarga la parte 5 del Tutorial

Saludos!

@chalalo

Un comentario en “[Tutorial] Comenzado con MVVM y Knockout.js – Parte 5: Conectar el ViewModel, con el Model mediante ASP.NET WebMatrix & Razor”

Deja un comentario

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