[ASP.NET Web API] Web API III – Consumiendo el servicio

Posted on Actualizado enn


Y seguimos con un nuevo post sobre Web API, ya en los dos pasados revisamos como crear un servicio con ASP.NET Web API y además como crearlo para trabajar un CRUD completo, pero hasta ahora no hemos consumido el servicio, lo cual es el objetivo de este post.

El ejemplo que usaremos será el creado en el post anterior así que dale una mirada: Creando un CRUD

Primero vamos a modificar un poco el HTML de la vista Index del controlador Home, para el ejemplo todas las operaciones las vamos a realizar allí:

<div class="hero-unit">
    <h2>Get All</h2>
    <div>
        <table id="tblList" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Last Name</th>
                    <th>Twitter</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <h2>Get one</h2>
    <div>
        <ul>
            <li>
                <label>Id:</label>
                <input type="text" id="txtIdSearch" />
                <input type="button" id="btnSearch" value="Search" />
            </li>
            <li>
                <label>Name:</label>
                <input type="text" id="txtName" />
            </li>
            <li>
                <label>Last name:</label>
                <input type="text" id="txtLastName" />
            </li>
            <li>
                <label>Twitter:</label>
                <input type="text" id="txtTwitter" />
            </li>
            <li>
                <input type="button" id="btnDelete" value="Delete" />
                <input type="button" id="btnUpdate" value="Update" />
            </li>
        </ul>
    </div>
</div>
@section scripts
{
    <script type="text/javascript" src="@Url.Content("/Scripts/app/person.js")"></script>
}

Listo, ya tenemos el HTML listo, ahora a implementar cada funcionalidad:

Obtener todos

$(document).on("ready", function () {
    GetAll();
})

//Get all persons
function GetAll() {
    var item = "";
    $('#tblList tbody').html('');
    $.getJSON('/api/person', function (data) {
        $.each(data, function (key, value) {
            item += "
" + value.Name + "" + value.LastName + "" + value.Twitter + "
";
        });
        $('#tblList tbody').append(item);
    });
};

Lo primero que hacemos es validar que la página se ha cargado totalmente, luego realizamos un llamado a la función GetAll la cual se encarga de realizar la petición a la acción GetPerson() del controlador que retorna todo el conjunto de resultados, y cómo lo hace?, como estamos usando la función getJSON entonces ya la petición al verbo Get, y como no le estamos enviando parámetros entonces responde la acción que no recibe ninguno…si GetPeron(); luego con el $.each recorremos los elementos y llenamos la tabla.

Obtener un elemento

Ahora si queremos obtener 1 solo elemento, debemos pasarle el id que deseamos buscar, ya que el la acción en el controlador lo recibe GetPerson(Int32 id), entonces añadimos la siguiente función:

function GetPersonById(idPerson) {
    var url = '/api/person/' + idPerson;
    $.getJSON(url)
        .done(function (data) {
            $('#txtName').val(data.Name);
            $('#txtLastName').val(data.LastName);
            $('#txtTwitter').val(data.Twitter);
        })
        .fail(function (erro) {
            ClearForm();
        });
};

y al botón de buscar un manejador para el evento click:

$('#btnSearch').on('click', function () {
	GetPersonById($('#txtIdSearch').val());
})

De nuevo usamos $.getJSON, y en este caso cuando la petición se ejecuta correctamente entra al done donde asignamos valores a los campos de texto con los datos de la persona retornada, en caso que se produzca algún error se va la ejecución por el fail.

Eliminar un elemento por su id

Pasamos ahora a la eliminación, y en este caso vamos a enviarle el id de la persona que deseamos eliminar, por lo que se usará la acción DeletePerson(Int32 id), como antes lo primero es la función que hace el llamado:

function DeletePersonById(idPerson) {
    var url = '/api/person/' + idPerson;
    $.ajax({
        url: url,
        type: 'DELETE',
        contentType: "application/json;chartset=utf-8",
        statusCode: {
            200: function () {
                GetAll();
                ClearForm();
                alert('Person with id: ' + idPerson + ' was deleted');
            },
            404: function () {
                alert('Person with id: ' + idPerson + ' was not found');
            }
        }
    });
}

luego el manejador para el botón y el evento click:

$('#btnDelete').on('click', function () {
	DeletePersonById($('#txtIdSearch').val());
})

En este caso hacemos uso de $.ajax, definimos la url y le adicionamos el id de la persona a eliminar, definimos el type (verbo Http a usar) en DELETE, y manejamos entonces el código Http como respuesta de consumir el servicio (statusCode), ya que si revisan la acción esta retorna un HttpResponseMessage, en donde se tiene un código 200 (HttpStatusCode.OK) cuando la eliminación es correcta o un 404 (HttpStatusCode.NotFound) cuando no se encuentra una persona con el id enviado o la eliminación falla.

Actualizar un elemento

Solo nos resta la actualización, así que primero la función:

function UpdatePerson(idPerson,person) {
    var url = '/api/person/' + idPerson;
    $.ajax({
        url: url,
        type: 'PUT',
        data: person,
        contentType: "application/json;chartset=utf-8",
        statusCode: {
            200: function () {
                GetAll();
                ClearForm();
                alert('Person with id: ' + idPerson + ' was updated');
            },
            404: function () {
                ClearForm();
                alert('Person with id: ' + idPerson + ' was not found');
            },
            400: function () {
                ClearForm();
                alert('Error');
            }
        }
    });
}

luego el manejador para el botón y el evento click:

$('#btnUpdate').on('click', function () {
	var person = new Object();
	person.id = $('#txtIdSearch').val();
	person.name = $('#txtName').val();
	person.lastname = $('#txtLastName').val();
	person.twitter = $('#txtTwitter').val();
	UpdatePerson(person.id, JSON.stringify(person));
})

Al igual que para la eliminación usamos $.ajax pero en este caso el type lo definimos con el verbo PUT, en la url le pasamos el id de la persona y en el parámetro data le enviamos el objeto person y finalmente de nuevo validamos la respuesta usando los códigos Http, 200 (HttpStatusCode.OK), 404 (HttpStatusCode.NotFound) y 400 (HttpStatusCode.BadRequest).

En el llamado a la función creamos un nuevo objeto al cual le definimos los propiedades y sus correspondientes valores (mismos nombres que las propiedades en la clase C#) y la serializamos con JSON.stringify.

Insertar un nuevo elemento

Como última acción a implementar, ahora vamos a crear una nueva persona, primero entonces la función que hace el llamado:

function CreatePerson(person) {
    var url = '/api/person/';
    $.ajax({
        url: url,
        type: 'POST',
        data: person,
        contentType: "application/json;chartset=utf-8",
        statusCode: {
            201: function () {
                GetAll();
                ClearForm();
                alert('Person with id: ' + idPerson + ' was updated');
            },
            400: function () {
                ClearForm();
                alert('Error');
            }
        }
    });
}

El manejador para el botón y el evento click:

$('#btnCreate').on('click', function () {
	var person = new Object();
	person.name = $('#txtName').val();
	person.lastname = $('#txtLastName').val();
	person.twitter = $('#txtTwitter').val();
	CreatePerson(JSON.stringify(person));
})

Y de nuevo aparece en escena $.ajax en esta ocasión con el type POST, y manejamos la respuesta de nuevo con códigos Http, el 201 (HttpStatusCode.Created) que indica que se creo el elemento y el 400 para el error.

Finalmente la sencilla aplicación se verá como:

crud

Y hasta llegamos por esta vez, espero les guste el post y les ayude a seguir con Web API, en el próximo post haremos un refactoring en el lado de cliente para usar Knockoutjs y su facilidad para implementar propiedades observables.

Saludos!

Descarga el ejemplo!

9 comentarios sobre “[ASP.NET Web API] Web API III – Consumiendo el servicio

    […] anterior vimos como podemos consumir nuestro servicio REST de Web API utilizando jQuery y AJAX (míralo acá), creamos un archivo JavaScript para mantener separado el contenido (HTML) del comportamiento de la […]

    Yury Waldner Hoyos Vise escribió:
    07/18/2013 en 10:32

    Genial, te felicito…. me hace recordar cuando empezaba con los primeros pasos en PHP creando CRUD

    […] [ASP.NET Web API] Web API III – Consumiendo el servicio […]

    […] Consumir un servicio con ASP.NET Web API […]

    rodri escribió:
    08/11/2013 en 07:02

    Hola, primero que nada gracias por el código, pero es que lo estoy intentando hacer y cuando ejecuto la aplicación me da una excepción en el fichero personDBInitializer en esta línea

    persons.ForEach(c => context.Person.Add(c));
    y la excepción es: NullReferenceException

    Me podrías ayudar a saber por que es??
    Un saludo

      Julio Avellaneda respondido:
      08/11/2013 en 10:34

      Hola rodri, según parece tu error tiene relación con la BD, revisate la cadena de conexión, la BD no importa que no exista, pero si el servidor y los datos de usuario.

      Cualquier cosa me cuentas.

      Saludos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s