Bueno amigos Continuo con
esta entrega de peticiones Ajax en MVC.
Lo
que prosigue es crear nuestras peticiones Ajax para cada Botón, a lo cual
tenemos dos opciones, crear un archivo .JS y agregar la referencia al
archivo de configuración
Para
este ejemplo lo are de forma directa en mi vista agregando el script y creando
dos funciones una para cada petición de mi ApiController.
A continuación el código con su respectivo comentario:
<script>
function saludar() {
$.ajax({
type: "POST",//Tipo
de petición
url: 'api/SaludarApi/Saludar?nombre=Gustavo',//Url
a la que se hará la petición, en este caso pasamos un parámetro directo en la
ruta
contentType: "application/json;
charset=utf-8",//Tipo en que irán nuestros datos
dataType: "json", //Se
define el tipo de dato que nos regresara nuestra petición
beforeSend: function ()
{
//Se ocupa para mostrar
un loading o cualquier otra función, este se ejecutara mientras se realiza la
petición. Aquí ocupo el plugin mencionado con anterioridad
//Instrucion para
indicar que muestre el loading
$.blockUI();
},
success: function
(result) {
//Resultado de nuestra
petición, dependiente de nuestro tipo de dato que regrese puede ser un objeto
de tipo json, html, etc., donde el json puede ser un Array, un Objeto simple o
un dato.
alert(result); //En
este caso mi método saludar concatena mi nombre con otra frase por lo tanto es
un dato directo y lo muestro en un aler
//Resultado: "¡Saludos Gustavo!"
//Instrucion para
indicar que oculte el loading
$.unblockUI();
},
error: function
(xhr, textStatus, errorThrown) {//Función que cacha los errores ocurrido en nuestra
petición
//Este parámetro es el
que cacha el error ocurrido es nuestra petición
alert(errorThrown);
//Instrucion para
indicar que oculte el loading
$.unblockUI();
}
});
}
function saludar2() {
$.ajax({
type: "POST",//Tipo
de petición
url: 'api/SaludarApi/Saludar2?nombre=Gustavo',//Url
a la que se hará la petición, en este caso pasamos un parámetro directo en la
ruta
contentType: "application/json;
charset=utf-8",//Tipo en que irán nuestros datos
dataType: "json", //Se
define el tipo de dato que nos regresara nuestra petición
beforeSend: function ()
{
//Se ocupa para mostrar un loading o cualquier otra función, este se ejecutara mientras se realiza la petición. Aquí ocupo el plugin mencionado con anterioridad
//Instrucion para
indicar que muestre el loading
$.blockUI();
},
success: function
(result) {
//Resultado de nuestra
petición, dependiente de nuestro tipo de dato que regrese puede ser un objeto
de tipo json, html, etc., donde el json puede ser un Array, un Objeto simple o
un dato.
alert(result.Saludo + '\n
Desde: ' + result.Desde);//En esta petición nos regresa un objeto con los
propiedades y puedo acceder directos, aquí tendremos que conocer el nombre de nuestra propiedad
//Resultado: "¡Saludos Gustavo! Desde tu Portal de
Programación!"
//Instrucion para
indicar que oculte el loading
$.unblockUI();
},
error: function
(xhr, textStatus, errorThrown) {//Función que cacha los errores ocurrido en nuestra
petición
//Este parámetro es el
que cacha el error ocurrido es nuestra petición
//Instrucion para
indicar que oculte el loading
$.unblockUI();
}
});
}
</script>
Les comparto el código de este pequeño ejemplo, lo puedes descargar dando click aquí.
Y ya saben si tienen alguna duda no duden en comentar.
Saludos Cordiales!
No hay comentarios:
Publicar un comentario