Tutorial Asp.net Web API con MongoDB – Parte 2.2
Estamos ya en la segunda parte de la segunda parte (2.2), 
del tutorial en donde estamos viendo MongoDB + ASP.NET Web API + jQuery. En este post vamos a ver el listar datos y el eliminar.
Url del post anterior:
http://geeks.ms/blogs/gperez/archive/2012/03/19/tutorial-asp-net-web-api-con-mongodb-parte-2-1.aspx
Importante
He hecho cambios desde el post anterior, que nos van ayudar a acceder desde jQuery, el primero tiene que ver con la generación del ObjectID de la clase Farmacia, ahora es un StringObjectIdGenerator, el cual permite generar una clave única de tipo String, debido a que el retorno hacia jQuery, con la solución anterior, tenía la siguiente estructura:
"timestamp":1298346771,
"machine":8775338,
"pid":20092,
"increment":0
Que corresponde, como antes mencionaba, al objeto ObjectID, por lo que leyendo la documentación encontré que era más acertado para trabajar con jQuery el StringObjectIdGenerator que permite generar una clave pero que tenga el formato de un String, por lo que mi clase Farmacia queda finalmente de la siguiente forma:
public class Farmacia
{
[BsonId(IdGenerator = typeof(StringObjectIdGenerator))]
public String Id { get; set; }
[BsonRequired]
public string Nombre { get; set; }
[BsonRequired]
public string Direccion { get; set; }
[BsonIgnoreIfNull]
public string Telefono {get;set;}
[BsonRequired]
public string Comuna { get; set; }
public string Latitud { get; set; }
public string Longitud { get; set; }
[BsonRequired]
public string Fecha { get; set; }
}
También hice un cambio en el tipo de retorno del método PostFarmacia del ejemplo anterior, ahora retorna un HttpResponseMessage, que es el adecuado para enviar responses con código de estado.
Ahora bien al formulario anterior solo vamos agregar una lista con cero diseño, con el nombre de la farmacia y al lado un botón eliminar. A continuación te dejo el video con el funcionamiento final.
(PD: sí, el título dice Regitros en vez de Registros, pero bueno se entiende no?)
Como está de moda el estilo metro, agregué en la funcionalidad un gif animado con el loading metro’s style, para darle un look (si es que este demo tiene algún look) un poco mejor. T dejo el gif para que lo utilices en tus desarrollos (así que dale al botón derecho y guardar!)
Veamos ahora el controlador y modelo para las dos acciones, Listar y Borrar.
Nuevas acciones del Controlador FarmaciaController
public IEnumerable<Farmacia> ListFarmacias()
{
try
{
System.Threading.Thread.Sleep(4000);
FarmaciaModels fm = new FarmaciaModels();
var lista = fm.ListFarmacias();
if (lista != null)
{
return lista;
}
throw new HttpResponseException(HttpStatusCode.NotFound);
}
catch (Exception){
throw new HttpResponseException(HttpStatusCode.InternalServerError);
}
}
public HttpResponseMessage DeleteFarmacia(string id)
{
try
{
FarmaciaModels fm = new FarmaciaModels();
fm.DeleteFarmacia(id);
return new HttpResponseMessage(HttpStatusCode.NoContent);
}
catch (Exception)
{
throw new HttpResponseException(HttpStatusCode.InternalServerError);
}
}
Puedes observar en la primera acción que hago una pausa de 4 segundos (para que se vea el loading, que esta muy cool 
), luego voy a consultar al modelo sobre los datos, luego según si obtengo o no resultados y si hay o no erro, devuelvo código HTTP según la situación. La acción DeleteFarmacia (ojo, se debe empezar por Delete, para que podamos accederla correctamente), recibe el id como un string (que fue uno de los cambios que hice), luego le pasamos la responsabilidad al modelo para que borre el registro desde MongoDB.
Métodos en el Modelo FarmaciaModels
public IEnumerable<Farmacia> ListFarmacias()
{
MongoDatabase db = Db();
MongoCollection<Farmacia> farmacias = db.GetCollection<Farmacia>("farmacias");
return farmacias.FindAll().ToList<Farmacia>();
}
public void DeleteFarmacia(string id)
{
MongoDatabase db = Db();
MongoCollection<Farmacia> farmacias =
db.GetCollection<Farmacia> ("farmacias");
db.GetCollection<Farmacia>("farmacias").FindAndRemove(Query.EQ("_id", id),
SortBy.Ascending("id"));
}
Anteriormente ya había comentado que estábamos simplificando al máximo nuestros métodos. El primero de ellos obtiene la colección de farmacias y simplemente la retorna. El segundo método, obtiene la referencia hacia la colección y utilizamos el método FindAndRemove de la API de Mongodb, para buscar y eliminar el elemento a partir de una consulta sobre MongoDB, que es Query.EQ("_id", id), es decir, buscamos y eliminamos por el Id.
Para poder acceder a la acción ListaFarmacias del controlador debemos agregar una nueva mapa en la Ruta:
routes.MapHttpRoute(
name: "AccionesAPI",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new
{
id = UrlParameter.Optional
}
);
Con esto podemos acceder al controlador y la acción, y el parámetro id es opcional.
Ahora el Front End
Nuestro Front End tiene ciertas modificaciones al del ejemplo anterior, los cuales son más que nada , una lista para agregar las farmacias y unas cuantas funciones más de JavaScript, partamos por el código HTML que agregué:
<div id="div_lista">
<h2>Listado de Registros de Farmacias</h2>
<div id="cargando"></div>
<ul id="lista"></ul>
</div>
Funciones Javascript
function listaFarmacias() {
$("#cargando").html("<img src='animated_loader.gif' />");
$.ajax({
url: "http://localhost:51753/Api/Farmacia/ListFarmacias",
type: "GET",
contentType: "application/json;charset=utf-8",
cache:false,
statusCode: {
200: function (farmacia) {
muestraFarmacias(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");
}
}
});
}
La función de listaFarmacias la cual llama a la acción ListaFarmacias y en el caso que la respuesta tenga un statusCode 200, es decir, todo ok, hacemos una llamada a la función muestraFarmacias pasándole la data que fue retornada desde el servidor.
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></li>";
});
$("#lista").append(li);
$("#cargando").empty();
}
Esta función esta encargada de crear los items de lista, cada ítem tiene un botón asociado cuyo id es el Id proveniente del servidor, es decir el Id del registro obtenido desde MongoDB, esto sirve para asociar el botón al registro en particular, además podrás notar que el botón tiene una clase asociada, de manera que podemos atachar a esa clase el evento click:
$(".botonEliminar").live("click", function () {
var id = $(this).attr("id");
$.ajax({
url: "http://localhost:51753/Api/Farmacia",
data: JSON.stringify({ id: id }),
cache: false,
type: "DELETE",
contentType: "application/json;charset=utf-8",
statusCode: {
204: function () {
listaFarmacias();
}
}
});
});
Con este manejo del evento click, hacemos la llamada al eliminar, fíjate que debemos especificar en type Delete para que pueda hacer referencia a la acción DeleteFarmacia del controlador, puedes ver más detalles de la función $.ajax de jQuery en http://api.jquery.com/jQuery.ajax/ , finalmente si recibimos la respuesta 204, volvemos a listar las farmacias.
Eso es todo por ahora, continúo luego con el modificar y el acceso desde dispositivos móviles.
Saludos!
@chalalo