Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Tutorial Asp.net Web API con MongoDB – Parte 2.1

Hola, vamos a ver la primera parte de la segunda parte (suena raro, o la parte 2.1) del tutorial de MongoDB y ASP.NET Web API, la primera parte esta en:

http://geeks.ms/blogs/gperez/archive/2012/03/11/tutorial-asp-net-web-api-con-mongodb-parte-1.aspx

Debido a que he estado corto de tiempo, preferí escribir de inmediato el insertar datos desde jQuery , pasando por Web API a MongoDB. Bueno acá vamos Sonrisa

Formulario de Ingreso con un poco de HTML5

Voy a utilizar un formulario muy sencillo con validación required de HTML5, como ves , además cambiamos el mensaje de la validación con la propiedad Title, puedes notar que para cambiarlo en Firefox ocupamos x-moz-errormessage (espero que esto no sea así en el futuro, y que exista una propiedad estándar) . Luego el estilo de los labels es display: block para que el orden quede vertical.

image image

Veamos el código del formulario:

 

  <form id="formulario">

        <label for="Nombre">Nombre:</label>

        <input type="text" id="Nombre" name="Nombre" required

            title="Debe ingresar el Nombre de la farmacia"

            x-moz-errormessage="Debe ingresar el Nombre de la farmacia"/>

 

        <label for="Direccion">Dirección:</label>

        <input type="text" id="Direccion" name="Direccion" required

            title="Debe ingresar la Dirección"

            x-moz-errormessage="Debe ingresar la Dirección" />

 

        <label for="Telefono">Telefono:</label>

        <input type="tel" id="Telefono" name="Telefono" required

              title="Debe ingresar el telefono"

              x-moz-errormessage="Debe ingresar el telefono" />

 

        <label for="Comuna">Comuna:</label>

        <input type="tel"  id="Comuna"  name="Comuna" required

              title="Debe ingresar la Comuna"

              x-moz-errormessage="Debe ingresar la Comuna" />

 

        <label for="Latitud">Latitud:</label>

        <input type="number" id="Latitud" name="Latitud"  required

              title="Debe ingresar la Latitud"

              x-moz-errormessage="Debe ingresar la Latitud" />

 

 

       <label for="Longitud">Longitud:</label>

        <input type="number"  id="Longitud"  name="Longitud" required

              title="Debe ingresar la Longitud"

              x-moz-errormessage="Debe ingresar la Longitud" />

 

 

        <label for="Fecha">Fecha:</label>

        <input type="date"  id="Fecha" name="Fecha" required

              title="Debe ingresar la Fecha"

              x-moz-errormessage="Debe ingresar la Fecha" />

 

        <input type="submit" value="Guardar" />

    </form>

Bastante simple, nada del otro mundo, ahora veamos el código jQuery para el envío de datos:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script>

    $(document).ready(function () {

 

        $('#formulario').submit(function (event) {

            event.preventDefault();

          $.ajax({

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

                type: "POST",

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

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

                statusCode: {

                    200: function (farmacia) {

                        alert("Registro Insertado");

                    },

                    500: function () {

                        alert("Error al Insertar");

                    }

                }

            });

        });

 

        $.fn.serializeObject = function () {

            var o = {};

            var a = this.serializeArray();

            $.each(a, function () {

                if (o[this.name] !== undefined) {

                    if (!o[this.name].push) {

                        o[this.name] = [o[this.name]];

                    }

                    o[this.name].push(this.value || '');

                } else {

                    o[this.name] = this.value || '';

                }

            });

            return o;

        };

    });

</script>

Como vez, lo primero que hacemos es prevenir el evento por default del botón submit, de manera que no exista una recarga de página, luego configuramos la petición Ajax, vamos enviar estos datos por POST y esto repercute, como veremos más adelante, en el nombre del controlador. Los datos los voy a enviar mediante JSON, para esto ocupo una función de serialización y luego utilizamos la función JSON.stringify para dar el formato correcto, puedes ver más sobre esta función acá:http://msdn.microsoft.com/en-us/library/cc836459(v=vs.85).aspx

De hecho cuando lo ejecutemos e inspeccionemos JSON.stringify($(this).serializeObject()) veremos:

image

Ahora revisemos como vamos a recibir estos datos, veamos el controlador, en nuestro caso seguimos en el controlador

Acción en el Controlador FarmaciaController

  public HttpStatusCode PostFarmacia(Farmacia farmaciaInsert)

   {

      try

        {

          FarmaciaModels fm = new FarmaciaModels();

          fm.PostFarmacia(farmaciaInsert);

          return HttpStatusCode.OK;

        }

         catch (Exception)

         {

        throw new HttpResponseException(HttpStatusCode.InternalServerError);

        }

   }

Este controlador esta simplificado para fines del ejemplo, cabe destacar que debido a que nombre de nuestro método comienza con "Post" no necesitamos crear una nueva ruta customizada, el Método PostFarmacia puede ser invocado con  URL /Api/Farmacia, y este método será invocado bajo el contexto de un request HTTP POST.


Podría devolver además alguna variable desde el modelo, pero para nosotros por el momento va a estar ok. Si inspeccionamos el objeto farmaciaInsert veremos que los datos vienen correctamente:

 

image

En caso de resultar todo ok, devolvemos el statusCode en 200, es decir OK Pulgar hacia arriba, y en el caso contrario levantamos una excepción con un error 500 (HttpStatusCode.InternalServerError) . Estos Status Code son los que estamos evaluando con jQuery y de ello dependerá la respuesta que demos al usuario.

Modelo

Al igual que nuestro controlador, el modelo esta simplificado al máximo, de manera de centrarnos en lo importante para el ejemplo. Instanciamos una colección de farmacias, a la cual le insertamos el objeto farmaciaInsert

public void PostFarmacia(Farmacia farmaciaInsert)

{

   MongoCollection<Farmacia> farmacias = Db().GetCollection<Farmacia>
                                       (
"farmacias"
);

   farmacias.Insert(farmaciaInsert);

}

Ahora cuando nuestro proceso esté terminado veremos que se ejecuta la sección asociada al Status Code :200

image

Y si revisamos con el IDE MongoVUE, veremos el dato ingresado:

image

 

Y todo con unas pocas líneas de código Sonrisa
Saludos!
@chalalo

Posted: 19/3/2012 13:11 por Gonzalo Perez | con 3 comment(s)
Comparte este post:

Comentarios

Chalalo Land ha opinado:

Estamos ya en la segunda parte de la segunda parte (2.2), del tutorial en donde estamos viendo MongoDB

# March 25, 2012 7:39 AM

Gonzalo Perez ha opinado:

Estamos ya en la segunda parte de la segunda parte (2.2), del tutorial en donde estamos viendo MongoDB

# March 25, 2012 8:28 AM

Chalalo Land ha opinado:

Hola!, y seguimos con el tutorial de MongoDB + ASP.NET Web API , apoyándonos siempre en jQuery para la

# April 3, 2012 11:13 PM