Ajax en ASP.NET Core MVC: Un ejemplo práctico con jQuery

Ajax (Asynchronous JavaScript and XML) es una técnica que permite a las aplicaciones web actualizar partes de una página sin recargarla completamente. En ASP.NET Core, el uso de Ajax puede mejorar significativamente la experiencia del usuario al hacer las aplicaciones más rápidas y receptivas. En este artículo, explicaremos cómo implementar Ajax en ASP.NET Core utilizando Visual Studio y jQuery.

¿Por qué usar jQuery para Ajax?

jQuery es una biblioteca de JavaScript popular que simplifica muchas tareas comunes de desarrollo web, como la manipulación del DOM, la gestión de eventos y las solicitudes Ajax. Las ventajas de usar jQuery para implementar Ajax incluyen:

1. Simplicidad: jQuery proporciona una sintaxis sencilla y limpia para hacer solicitudes Ajax.
2. Compatibilidad: jQuery maneja las diferencias entre navegadores de manera interna, lo que garantiza que el código funcione de manera consistente en diferentes entornos.
3. Funciones avanzadas: jQuery ofrece características avanzadas como las capacidades de encadenamiento, que facilitan la escritura de código asíncrono.

Configuración inicial en Visual Studio

1. Crear un nuevo proyecto de ASP.NET Core

1. Abre Visual Studio.
2. Selecciona Create a new project.
3. Elige ASP.NET Core Web Application y haz clic en Next.
4. Ponle un nombre al proyecto, por ejemplo, AjaxExample.
5. Selecciona Web Application (Model-View-Controller) y haz clic en Create.

2. Configurar el proyecto

Visual Studio creará una estructura básica del proyecto. A continuación, configuraremos un Modelo, un Controlador, una Vista y agregaremos jQuery para manejar las solicitudes Ajax.

Implementación de Ajax en ASP.NET Core

1. Crear el Modelo

Primero, vamos a crear una clase Person que servirá como modelo para la respuesta JSON.

Crea una clase llamada Person.cs en la carpeta Models:

namespace AjaxExample.Models
{
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Email { get; set; }
    }
}

2. Crear el Controlador 

Luego, crea un nuevo controlador llamado HomeController.cs en la carpeta Controllers:

using Microsoft.AspNetCore.Mvc;
using AjaxExample.Models;

namespace AjaxExample.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult GetPersonData([FromBody] Person person)
        {
            // Aquí puedes manejar los datos recibidos
            // En este ejemplo, simplemente se devolverán los mismos datos recibidos

            var response = new Person
            {
                Name = person.Name,
                Age = person.Age,
                Email = person.Email
            };
            return Json(response);
        }
    }
}

En este ejemplo, el método GetPersonData recibe un objeto Person como parámetro y devuelve una instancia de Person como respuesta JSON.

Nota: El atributo [FromBody] en ASP.NET Core se utiliza para indicar que el valor de un parámetro de acción debe ser enlazado desde el cuerpo de la solicitud HTTP. Esto es especialmente útil para las solicitudes POST que envían datos en formato JSON.

¿Por qué es necesario [FromBody]?

1. Especificar la fuente de datos: [FromBody] le dice al modelo de enlace de ASP.NET Core que los datos para el parámetro person deben provenir del cuerpo de la solicitud, no de la cadena de consulta, la ruta, las cabeceras o las cookies.
2. Formato JSON: Cuando se envía una solicitud con contenido JSON, ASP.NET Core usa el formato especificado en el encabezado Content-Type (application/json en este caso) para deserializar el contenido del cuerpo de la solicitud en un objeto C#.

¿Por qué usar una respuesta JSON?

JSON (JavaScript Object Notation) es un formato de datos liviano que es fácil de leer y escribir tanto para los humanos como para las máquinas. Es el formato preferido para las respuestas de Ajax porque:

1. Facilidad de uso: JSON se puede convertir fácilmente en objetos JavaScript, lo que facilita el trabajo con los datos en el lado del cliente.
2. Eficiencia: JSON es más compacto que XML, lo que reduce el tamaño de la carga útil y mejora el rendimiento.
3. Compatibilidad: La mayoría de los lenguajes de programación, incluidos C# y JavaScript, tienen bibliotecas integradas para trabajar con JSON.

3. Crear La Vista

Crea una nueva vista llamada Index.cshtml en la carpeta Views/Home:

@{
    ViewData["Title"] = "Ajax Example";
}

<h2>Ajax Example</h2>

<input type="text" id="inputName" placeholder="Enter your name" />
<input type="number" id="inputAge" placeholder="Enter your age" />
<input type="email" id="inputEmail" placeholder="Enter your email" />
<button id="sendButton">Send</button>

<div id="responseMessage"></div>

@section Scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#sendButton').click(function() {
                // Obtiene los valores de los campos de texto
                var person = {
                    Name: $('#inputName').val(),
                    Age: $('#inputAge').val(),
                    Email: $('#inputEmail').val()
                };
                
                // Realiza la solicitud Ajax
                $.ajax({
                    type: 'POST', // El tipo de solicitud HTTP
                    url: '@Url.Action("GetPersonData", "Home")', // La URL a la que se envía la solicitud
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: JSON.stringify(person), // Los datos que se envían al servidor
                    success: function(response) {
                        // Maneja la respuesta exitosa
                        $('#responseMessage').html(
                            `<p>Name: ${response.name}</p>
                             <p>Age: ${response.age}</p>
                             <p>Email: ${response.email}</p>`
                        );
                    },
                    error: function(xhr, status, error) {
                        // Maneja los errores
                        $('#responseMessage').html("An error occurred: " + error);
                    }
                });
            });
        });
    </script>
}

Explicación detallada de la vista y jQuery Ajax

HTML básico:

<input type="text" id="inputName" placeholder="Enter your name" />
<input type="number" id="inputAge" placeholder="Enter your age" />
<input type="email" id="inputEmail" placeholder="Enter your email" />
<button id="sendButton">Send</button>
<div id="responseMessage"></div>

• Campos de texto para que el usuario ingrese su nombre, edad y correo electrónico.
• Un botón que, al hacer clic, enviará los datos al servidor.
• Un div donde se mostrará la respuesta del servidor.

Sección de Scripts:

@section Scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#sendButton').click(function() {
                var person = {
                    Name: $('#inputName').val(),
                    Age: $('#inputAge').val(),
                    Email: $('#inputEmail').val()
                };
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetPersonData", "Home")',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: JSON.stringify(person),
                    success: function(response) {
                        $('#responseMessage').html(
                            `<p>Name: ${response.name}</p>
                             <p>Age: ${response.age}</p>
                             <p>Email: ${response.email}</p>`
                        );
                    },
                    error: function(xhr, status, error) {
                        $('#responseMessage').html("An error occurred: " + error);
                    }
                });
            });
        });
    </script>
}

Nota: Un CDN (Content Delivery Network) es una red de servidores distribuidos geográficamente que trabajan juntos para entregar contenido de Internet de manera rápida y eficiente. Los CDNs se utilizan para distribuir archivos estáticos como imágenes, archivos CSS, archivos JavaScript, y otros recursos de sitios web.

Nota: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. Esta línea de código carga jQuery desde el CDN de Google. Especifica la versión específica de jQuery que deseas utilizar (en este caso, la versión 3.5.1). Este CDN es ampliamente utilizado y es una forma eficiente de incluir jQuery en tu proyecto, asegurando que se cargue rápidamente para los usuarios de todo el mundo.

• Incluir jQuery: Se incluye jQuery desde un CDN.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• Documento listo: Se asegura de que el DOM esté completamente cargado antes de ejecutar cualquier código.

  $(document).ready(function() {

• Manejador de eventos: Se añade un manejador de eventos para el clic en el botón sendButton.

  $('#sendButton').click(function() {

• Obtener los valores del input: Se obtiene el valor de los campos de texto inputName, inputAge e inputEmail.

  var person = { Name: $('#inputName').val(), Age: $('#inputAge').val(), Email: $('#inputEmail').val() };

• Llamada Ajax: Se realiza una solicitud Ajax utilizando el método $.ajax.

  $.ajax({ type: 'POST', // Especifica que la solicitud es POST url: '@Url.Action("GetPersonData", "Home")', // La URL a la que se envía la solicitud. '@Url.Action("GetPersonData", "Home")' genera la URL de la acción GetPersonData en el controlador Home. contentType: 'application/json; charset=utf-8', // Especifica que el contenido de la solicitud es JSON dataType: 'json', // Espera una respuesta JSON data: JSON.stringify(person), // Los datos que se envían al servidor success: function(response) { // Qué hacer si la solicitud tiene éxito. 'response' contiene los datos devueltos por el servidor. $('#responseMessage').html( `<p>Name: ${response.name}</p> <p>Age: ${response.age}</p> <p>Email: ${response.email}</p>` ); // Muestra los datos de la persona en el div responseMessage. }, error: function(xhr, status, error) { // Qué hacer si hay un error $('#responseMessage').html("An error occurred: " + error); // Muestra el error en el div responseMessage. } });

Ejecución del proyecto

1. Ejecuta el proyecto presionando F5 o seleccionando Debug > Start Debugging.
2. Visual Studio abrirá el navegador con la dirección https://localhost:5001.
3. Ingresa un nombre, edad y correo electrónico en los campos de texto y haz clic en el botón "Send". Deberías ver los datos de la persona mostrados en la página sin que esta se recargue.

Manejo de errores

El manejo de errores es una parte crucial de cualquier aplicación web, especialmente cuando se trabaja con solicitudes Ajax, ya que los errores pueden ocurrir en diferentes niveles (cliente, servidor, red). En el ejemplo anterior, hemos añadido un manejador de errores básico. Ahora, ampliaremos la explicación sobre cómo manejar errores de manera efectiva.

Tipos de errores comunes

1. Errores del cliente: Errores que ocurren en el lado del cliente, como problemas de red, errores de sintaxis en JavaScript, o fallos al construir la solicitud Ajax.
2. Errores del servidor: Errores que ocurren en el servidor, como excepciones no controladas, problemas de validación de datos, o errores de base de datos.
3. Errores de red: Problemas de conectividad o tiempos de espera que impiden que la solicitud llegue al servidor.

Manejo de errores en la llamada Ajax

En la solicitud Ajax, se puede especificar una función error que se ejecutará si la solicitud falla. La función recibe tres parámetros:

1. xhr: El objeto XMLHttpRequest que contiene información detallada sobre la solicitud fallida.
2. status: Una cadena que describe el tipo de error que ocurrió. Los valores comunes son "timeout", "error", "abort" y "parsererror".
3. error: Una cadena que contiene el mensaje de error textual, si está disponible.

Ejemplo detallado de manejo de errores en la vista

Actualicemos el script en Index.cshtml para manejar estos tipos de errores de manera más detallada:

@section Scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#sendButton').click(function() {
                var person = {
                    Name: $('#inputName').val(),
                    Age: $('#inputAge').val(),
                    Email: $('#inputEmail').val()
                };
                
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetPersonData", "Home")',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: JSON.stringify(person),
                    success: function(response) {
                        $('#responseMessage').html(
                            `<p>Name: ${response.name}</p>
                             <p>Age: ${response.age}</p>
                             <p>Email: ${response.email}</p>`
                        );
                    },
                    error: function(xhr, status, error) {
                        // Maneja los errores
                        var errorMessage = '';

                        if (xhr.status === 0) {
                            errorMessage = 'Not connected. Verify Network.';
                        } else if (xhr.status === 404) {
                            errorMessage = 'Requested page not found. [404]';
                        } else if (xhr.status === 500) {
                            errorMessage = 'Internal Server Error [500].';
                        } else if (status === 'parsererror') {
                            errorMessage = 'Requested JSON parse failed.';
                        } else if (status === 'timeout') {
                            errorMessage = 'Time out error.';
                        } else if (status === 'abort') {
                            errorMessage = 'Ajax request aborted.';
                        } else {
                            errorMessage = 'Uncaught Error: ' + xhr.responseText;
                        }

                        $('#responseMessage').html('<p>' + errorMessage + '</p>');
                    }
                });
            });
        });
    </script>
}

En este script mejorado:

• Error de conexión:

  if (xhr.status === 0) { errorMessage = 'Not connected. Verify Network.'; }

  Esto maneja situaciones donde la solicitud no puede ser enviada debido a problemas de conexión a la red.

• Página no encontrada (404):

  else if (xhr.status === 404) { errorMessage = 'Requested page not found. [404]'; }

  Esto ocurre cuando la URL solicitada no se encuentra en el servidor.

• Error interno del servidor (500):

  else if (xhr.status === 500) { errorMessage = 'Internal Server Error [500].'; }

  Esto indica un problema en el servidor.

• Error de parseo de JSON:

  else if (status === 'parsererror') { errorMessage = 'Requested JSON parse failed.'; }

  Esto ocurre si la respuesta no se puede analizar como JSON.

• Tiempo de espera agotado:

  else if (status === 'timeout') { errorMessage = 'Time out error.'; }

  Esto maneja los tiempos de espera agotados en la solicitud.

• Solicitud abortada:

  else if (status === 'abort') { errorMessage = 'Ajax request aborted.'; }

  Esto ocurre cuando la solicitud es abortada.

• Error no controlado:

  else { errorMessage = 'Uncaught Error: ' + xhr.responseText; }

  Esto captura cualquier otro error no especificado.

Las buenas prácticas: Consideraciones finales 

El uso de Ajax en ASP.NET Core permite crear aplicaciones web más dinámicas e interactivas. Al intercambiar datos de manera asíncrona entre el cliente y el servidor, es posible mejorar la experiencia del usuario y optimizar el rendimiento de la aplicación. Utilizar jQuery para manejar las solicitudes Ajax simplifica el proceso y asegura la compatibilidad entre diferentes navegadores. Además, un manejo adecuado de errores garantiza que tu aplicación sea robusta y capaz de gestionar diferentes tipos de problemas de manera eficiente.