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

        }

        /// <summary>

        /// Metodo de mi ApiController para saludar

        /// </summary>

        /// <param name="nombre">Nombre de a quien saluda</param>

        /// <returns>Regresa un objeto con dos propiedades</returns>

        public object Saludar2(string nombre)

        {

            return new

            {

                Saludo = string.Format("!Saludos {0}!", nombre),

                Desde = "Tu portal de Programación!"

            };

        }

Para poder utilizar las llamadas api en un proyecto MVC existe un archivo de configuración llamado WebApiConfig.cs donde esta el tipo de rutas que manejara nuestro proyecto.

El siguiente codigo tiene la configuración por default de este archivo.

Esto en el caso de que solo tengamos un método dentro de nuestro ApiController:

public static void Register(HttpConfiguration config)

        {

            config.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "api/{controller}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

        }

En mi caso editare esta configuración ya que mi ApiController tiene mas de un método, y realizare llamadas a diferentes métodos.

public static void Register(HttpConfiguration config)

        {

            config.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "api/{controller}/{action}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

        }

Como ejemplo en mi vista creare dos botones con sus eventos onclick como se muestra a continuacion:

<button type="button" onclick="saludar();"> Saludar</button>

<button type="button" onclick="saludar2();"> Saludar Con Mensaje</button>

En esta segunda parte veremos la petición Ajax.

Saludos Cordiales!