Uso de Ajax en MVC
En el desarrollo de aplicaciones web con C# MVC, una de las tareas comunes es realizar peticiones al controlador sin tener que recargar la página. Para lograr esto, se necesita utilizar técnicas como AJAX, que permiten actualizar partes específicas de la página sin tener que hacer una carga completa de la misma.
El problema que se presenta es que, para muchos desarrolladores, puede resultar un poco confuso implementar AJAX en su proyecto. Además, existen varios enfoques y herramientas que pueden utilizarse para lograr este objetivo, lo que puede llevar a decisiones equivocadas y a una mayor complejidad del código.
Por lo tanto, en este proyecto se busca abordar el problema de cómo hacer peticiones al controlador de C# MVC sin recargar la página utilizando AJAX de una manera clara y sencilla. Para ello, se utilizarán ejemplos prácticos y se presentarán las mejores prácticas para la implementación de esta técnica. El objetivo final es permitir que los desarrolladores puedan mejorar la experiencia de usuario en sus aplicaciones web y hacerlas más eficientes en términos de tiempo de respuesta.
Primeros Pasos
Lo en primer lugar debemos crearnos un proyecto MVC en .NET
Una vez creado el proyecto vamos a crear un controlador que va a manejar todas estas peticiones.
Con el controlador ya creado vamos a crear de ejemplo una serie de métodos.
Vamos a comenzar por un método que calcula el doble de un numero enviado como parámetro.
El siguiente método simplemente retornara datos. Realmente es igual que el post, pero no necesitamos mandar ningún parámetro
Crearemos las vistas necesarias para acceder al get y al post
Vista POST:
Vista GET:
Crearemos un menú en Index para poder acceder al post y al get de Ajax.
Codigo:
Añadimos en el menú general un elemento que nos lleve a la vista en la que estamos trabajando
POST:
Para hacer toda la estructura del script vamos a usar Jquery, por lo tanto debemos importarlo.
Debemos obtener el valor del input para mandarlo a la acción del controller.
El siguiente paso es construir el objeto data con todos los datos que necesite el controller
Crearemos la variable url en la que haremos referencia al método del controlador y al propio controlador.
Por ultimo realizamos la petición con $.post y capturamos los datos que retorna, en este caso el doble del número.
Resultado:
GET:
Para hacer la petición GET también usaremos Jquery.
Codigo de la view:
El código es prácticamente el mismo, la única diferencia es que no necesitamos enviar datos, solo capturar los recibidos.
Resultado:
Autor: Álvaro Gutiérrez Carnicero
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2022-2023
GitHub: https://github.com/BURNI80/ProyectoAjaxMVC
LinkedIn: https://www.linkedin.com/in/alvaro-gutierrez-carnicero/