miércoles, 5 de noviembre de 2014

Peticiones Ajax en MVC Parte 2

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 BundleConfig.cs. (Lo comentare en otro tema).

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.

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();
            }
        });
    }


Peticiones Ajax en MVC Parte 1

Hola amigos!

El día de hoy les traigo la forma en como realizar una petición ajax. este ejemplo esta hecho con MVC, Razor y un ApiController, se utiliza Jquery un plugin llamado BlockUI que pueden descargar de aqui


Como les comente utilizaremos un ApiController que procese nuestra solicitud y nos retorne un mensaje.


A continuación les comparto dos métodos dentro de mi ApiController, el primero me regresa un string con un saludo, y el segundo me regreso un objeto con dos propiedades.



   /// <summary>
        /// Metodo de mi ApiController para saludar
        /// </summary>
        /// <param name="nombre">Nombre de a quien saluda</param>
        /// <returns>Regresa string con un saludo</returns>
        public string Saludar(string nombre)
        {
            return string.Format("!Saludos {0}!", nombre);
        }