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 
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.
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:
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:
En caso de resultar todo ok, devolvemos el statusCode en 200, es decir OK 
, 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
Y si revisamos con el IDE MongoVUE, veremos el dato ingresado:
Y todo con unas pocas líneas de código
Saludos!
@chalalo