Tutorial Asp.net Web API con MongoDB – Parte 2.3

Hola!, y seguimos con el tutorial de MongoDB + ASP.NET Web API , apoyándonos siempre en jQuery para la funcionalidad del front-end, los post anteriores son:

Esta vez vamos a realizar la funcionalidad de Editar, que encierra la acción de buscar un registro en particular y luego editarlo.

He hecho unos cambios pequeños al ejemplo que hemos estado desarrollando, el primero es que para mostrar el modificar, voy a agregar en la función de mostrar el código para mostrar el botón Modificar, pensé hacer lo mismo que hice con el botón borrar para referenciarlo, pero wait!, no puedo, debido a que en el botón borrar lo tengo asociado como Id, por lo que voy a crear un atributo data-clave al cual voy a asociar el id en el botón modificar:

function muestraFarmacias(farmacias) {

   var li = "";

   $("#lista").empty();

   var href = null;

   $.each(farmacias, function (index, farmacia) {

       li += "<li>" + farmacia.Nombre +

    "<button  class=’botonEliminar’ id=’" + farmacia.Id +"’>Borrar</button>
     <button  class=’botonModificar’ data-clave=’"
+ farmacia.Id +
                                 "’>Modificar</button></li>"
;

   });

    $("#lista").append(li);

    $("#cargando").empty();

}

El cambio que hice sobre sobre el la acción de click sobre el botón Enviar/Modificar la paso a explicar en breve.

Entonces, manos a la obra Sonrisa , el funcionamiento es mega básico: hacer click en el botón modificar de la lista, vamos a obtener los datos y dejarlos en las cajas de texto para poder modificarlos, el botón que antes decía Guardar , debemos setearlo a Modificar, luego de presionarlo, se debe obviamente modificar el registro y volver al estado inicial, el de ingreso de registros.

image

Veamos la acciones del controlador FarmaciaController que nos van a permitir obtener los datos de una farmacia en particular a partir de su Id y el siguiente, que nos va a permitir modificar un registro.

public Farmacia ObtFarmacia(string id)
{ 
try
{   
    FarmaciaModels fm = new FarmaciaModels();
    Farmacia farmacia = fm.GetFarmacia(id);
    if (farmacia != null)
     {
         return farmacia;
     }
    throw new HttpResponseException(HttpStatusCode.NotFound);
}
catch (Exception){
      
throw new HttpResponseException(HttpStatusCode.InternalServerError);

  }

}

 

 

public HttpResponseMessage PutFarmacia(Farmacia farmaciaMod)

  {

     try

        {

           FarmaciaModels fm = new FarmaciaModels();

           fm.PutFarmacia(farmaciaMod);

           return new HttpResponseMessage(HttpStatusCode.OK);

         }

            catch (Exception)

            {

        throw new HttpResponseException(HttpStatusCode.InternalServerError);

            }

}

Como puedes ver la primera acción la utilizo para obtener una farmacia, su nombre comienza con Obt, y es que para no crear otro mapa de rutas, voy a utilizar el que permite agregar el nombre del controlador, acción e Id.

Para la segunda acción voy a utilizar el verbo Http PUT ,que tiene el significado de agregar o reemplazar, en nuestro caso es claramente reemplazar para ejecutar la acción del updatear el registro.

Revisemos ahora los métodos del modelo, que nos van a permitir realizar las tareas que las acciones exponen:

public Farmacia GetFarmacia(string id)

{

    MongoDatabase db = Db();

    return db.GetCollection<Farmacia>("farmacias").FindOneById(id)
}

 

public void PutFarmacia(Farmacia farmaciaMod)

{

  MongoDatabase db = Db();

  var farmacias = db.GetCollection<Farmacia>("farmacias");

  Farmacia farmacia = farmacias.FindOneById(farmaciaMod.Id);

  farmacia.Nombre = farmaciaMod.Nombre;

  farmacia.Direccion = farmacia.Direccion;

  farmacia.Telefono = farmacia.Telefono;

  farmacia.Comuna = farmacia.Comuna;

  farmacia.Latitud = farmacia.Latitud;

  farmacia.Longitud = farmacia.Longitud;

  farmacias.Save<Farmacia>(farmacia);

}

Destaca la simplicidad de los métodos, el primero para obtener una farmacia en particular, en donde instanciamos una colección de farmacias y sobre ella ejecutamos el método FindOneByID que permite buscar un elemento en la colección de MongoDB mediante el Id especificado para el objeto farmacias. Esto se hace con “carga demorada”  y es una consulta compilada, es decir, no se obtiene toda la colección y sobre ella luego se filtra, si no que se hace la consulta directamente y muy optimizada de parte del motor para obtener un único registro.

Ahora para Modificar una farmacia, lo que hago es pasar el objeto que se va a modificar, el cual viene con el Id original y los datos modificados desde el formulario, para el Id cree una variable oculta (hidden field) dentro del formulario para guardar el valor. Luego obtengo el objeto y sobre escribo sus propiedades y luego lo guardo con el método Save.

Ahora que ya vimos el BackEnd, vamos a ver los métodos en el frontEnd que nos van a permitir llamar a las acciones:

Funciones Javascript, utilizando jQuery por su puesto, la primera para asociar el evento Click sobre el botón modificar, el cual llama a la acción del controlador ObtFarmacia,una vez que se obtienen los datos, se llama la funcion muestraFarmacia, que sirve para mostrar los datos en el formulario y setear el Id en el campo oculto, para tener disponible el Id para ejecutar el update.

    $(".botonModificar").live("click", function () {

            var id = $(this).attr("data-clave");
              $.ajax({
                 url: "http://localhost:51753/Api/Farmacia/ObtFarmacia/"+id,

                 type:"GET",

                contentType: "application/json;charset=utf-8",

                statusCode: {

                    200: function (farmacia) {

                        muestraFarmacia(farmacia);

                    },

                    400: function () {

                        $("#mensaje").text("Error en la Petición");

                    },

                    404: function () {

                        $("#mensaje").text("Datos no Encontrados");

                    },

                    500: function () {

                        $("#mensaje").text("Error en el servidor");

                    } 

                }

            });

        });

 

        function muestraFarmacia(farmacia) {

            $("#Id").val(farmacia.Id);

            $("#Nombre").val(farmacia.Nombre);

            $("#Direccion").val(farmacia.Direccion);

            $("#Telefono").val(farmacia.Telefono);

            $("#Comuna").val(farmacia.Comuna);

            $("#Latitud").val(farmacia.Latitud);

            $("#Longitud").val(farmacia.Longitud);

            $("#Fecha").val(farmacia.Fecha);

            $("#boton").val("Modificar");

        }

Ahora veamos la modificación que se hizo sobre el manejador del Submit del formulario, acá es donde se hizo la modificación, primero definimos una variable verbo, que según el botón esta en estado modificar, será PUT o de caso contrario, será POST, esto es para determinar a que acción del controlador vamos a llamar , PostFarmacia para ingresar o PutFarmacia para actualizar, recuerda que el tema de ingreso y borrado están en los post anteriores.

También seteo una variable acción de manera de poder enviar un msg adecuado al contexto la cual puede ser “Insertar” y “Modificar”.

Una vez que ya ejecutamos la llamada ajax mediante jQuery, limpiamos los elementos input, con lo que la variable oculta que contiene el Id también se limpia, también al botón lo volvemos a su texto original “Guardar”

 

$(‘#formulario’).submit(function (event) {

        var verbo = "POST"

        var accion = "Insertar";

        if ($("#boton").val() == "Modificar") {

            verbo = "PUT";

            accion = "Modificar";

        }

            event.preventDefault();

            $.ajax({

                url: "http://localhost:51753/Api/Farmacia",

                type: verbo,

                contentType: "application/json;charset=utf-8",

                cache: false,

                data: JSON.stringify($(this).serializeObject()),

                statusCode: {

                    200: function (farmacia) {

                        listaFarmacias();

                     

                    },

                    500: function () {

                        alert("Error al " + accion);

                    }

                }

            });

            limpiar();

        });

 

    function limpiar() {

        $(":input").val("");

        $("#boton").val("Guardar");

    }

 

Finalmente el funcionamiento queda de la siguiente manera, recuerda que no hemos hecho nada por el diseño, es solo funcionalidad, y si, de nuevo no arreglé lo de Regitros Triste

Espero que te sirva!, luego seguimos con el tema de seguridad Sonrisa
Saludos

@chalalo

Un comentario en “Tutorial Asp.net Web API con MongoDB – Parte 2.3”

Deja un comentario

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