Consumir web api utilizando jQuery.ajax()

se consumirá un servicio web api desde MVC utilizando jQuery, ya se desarrolló el servicio y se consumió desde MVC utilizando HttpClient en esta entrada.

el servicio webApi se encuentra alojado en IIS Express puerto 55987

esta es la tabla en a que se mostraran los datos obtenidos con el verbo GET

 


 
ID
 
Nombre
 
Departamento
 
Cargo
 

 

MÉTODO GET
Obtener todos los registros código WebApi

[Route("api/Empleados")]
[ResponseType(typeof(List))]
public List Getempleadoes()
{
 var Empleados = (from dato in db.empleadoes
  select new EmpleadoModelApi()
  {
  id = dato.id,
  Nombres = dato.nombre,
  Cargo = dato.Cargo.Cargo1,
  Dpto = dato.Dpto.Dpto1
  }).ToList();
 return Empleados;
}

codigo javascript, como ejemplo se ejecuta al presionar un botón

$("#boton_obtenerTodos").click(function () {
$.ajax({
 type: "GET",
 url: "http://localhost:55987/api/Empleados",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
  $('#Table > tbody').empty();
  $.each(data, function (i, item) {
  var rows = 
  "" +
  "" + item.id + "" +
  "" + item.Nombres + "" +
  "" + item.Cargo + "" +
  "" + item.Dpto + "" +
  "";
  $('#Table > tbody').append(rows);
  });
  console.log(data);
 },
 failure: function (data) {
  alert(data.responseText);
 },
 error: function (data) {
  alert(data.responseText);
 }
});
});

MÉTODO GET/{id}
Obtener un registro especifico según id código Web Api, se muestra solamente el encabezado.

[Route("api/Empleado/{id}")]
[ResponseType(typeof(empleado))]
public IHttpActionResult Getempleado(int id)

código javascript, como ejemplo se ejecuta al presionar un botón

$("#boton_buscar").click(function () {
var id = $("#busqueda").val();
$.ajax({
 type: "GET",
 url: "http://localhost:55987/api/Empleado/"+ id,
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data, textStatus, jqXHR) {
  $("#Table").empty();
   var rows = 
   "" +
   "" + data.id + "" +
   "" + data.Nombres + "" +
   "" + data.Cargo + "" +
   "" + data.Dpto + "" +
   "";
   $('#Table').append(rows);
   console.log(data);
   }      
  },
 failure: function (data) {
   alert(data.responseText);
 },
 error: function (data) {
   alert(data.responseText);
 }
 });
});

MÉTODO POST
Agregar un nuevo registro código Web Api

[Route("api/PostEmpleado")]
[ResponseType(typeof(empleado))]
public IHttpActionResult Postempleado(CrearEmpleadoApi empleado)
{
 try{
 empleado clase = new empleado();
 clase.id = Convert.ToInt32(empleado.id);
 clase.nombre = empleado.Nombres.ToString();
 clase.IdCargo = Convert.ToInt32(empleado.cargo);
 clase.IdDpto = Convert.ToInt32(empleado.Dpto);
 ...
 return Ok(empleado);
 }
 catch (DbUpdateException)
 { ... }
}

código javascript

$("#boton_ingresar").click(function () {
var idValue = 6969;
var NombresValue = "Prueba desde Web Api";
var cargoValue = 2;
var DptoValue = 2;
$.ajax({
  url: "http://localhost:55987/api/PostEmpleado",
  type: "Post",
  data: JSON.stringify({
   id: idValue,
   Nombres: NombresValue,
   cargo: cargoValue,
   Dpto: DptoValue
  }),
  contentType: 'application/json; charset=utf-8',
 success: function (data) {
  alert('Registro aregado exitosamente !!!');
 },
 failure: function (data)
 {
  alert(data.responseText);
 },
 error: function (data)
 {
  alert(data.responseText);
 }
});
});

MÉTODO DELETE
Eliminar registro especifico según id código WebApi

[Route("api/DeleteEmpleado/{id}")]
[ResponseType(typeof(empleado))]
public IHttpActionResult Deleteempleado(int id)

código javascript

$("#boton_borrar").click(function () {
var id = $("#busqueda").val();
$.ajax({
  type: "Delete",
  url: "http://localhost:55987/api/DeleteEmpleado/" + id,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
 success: function (data) {
  alert('Registro Eliminado');
 },
 failure: function (data) {
  alert(data.responseText);
 },
 error: function (data) {
  alert(data.responseText);
 }
});
});