Vistas parciales con Ajax en MVC .NET

En este post se dará una breve descripción de qué es una vista parcial y como incluirlas en nuestro proyecto utilizando Ajax.

¿Qué son las vistas parciales?

Una vista parcial es una vista que se representa dentro de otra vista. El HTML generado al ejecutar la vista parcial se representa en la vista que realiza la llamada (o principal). Al igual que las vistas, las vistas parciales usan la extensión de archivo .cshtml.

¿Cómo uso las vistas parciales con AJAX?

Para usar las vistas parciales con AJAX debemos hacer lo siguiente:

1. Crear una nueva vista, en la carpeta que queramos, seleccionando la opción de vista parcial.

Una vez que tengamos la vista, ponemos el código que queramos que se vea. En mi ejemplo, tendremos un garaje con coches, los cuales tendrán los siguientes datos: IdCoche, Marca, Modelo y Propietario.

2. En el controlador de nuestra vista donde queremos llamar a la vista parcial, añadimos un método, que devolverá un ActionResult, al igual que hacemos con las vistas normales. Debemos devolver un View, pasando por parámetro el nombre de la vista parcial y, opcionalmente, los datos que queramos pasar a la vista.

3. En nuestra página principal, donde queremos que se muestre la vista parcial, añadimos un botón para que al pulsarlo, sea el que cargue nuestra vista parcial. Debemos también añadir un elemento, como un div, para que cargue el HTML de nuestra vista parcial.

4. Debemos incluir en la sección “scripts” que viene por defecto en _Layout un código JQuery que, obteniendo el botón y programando el método click, obtendrá el div o elemento sobre el que cargaremos el código HTML. Sobre este elemento debemos usar el método .load, al que pasaremos por parámetro: el nombre del método que hemos creado en el controlador, opcionalmente, los datos que queramos pasar y opcionalmente, podremos crear una función que nos permitirá hacer algo cuando se complete la petición. En este caso solo usaremos el primer parámetro, el método del controlador.

Nuestra vista principal debe de quedar parecido a esto:

Y nuestra vista parcial algo así:

Finalmente, nuestra web ejecutándose debería ser algo similar a esto

 

Autor: Fernando Vado Marín

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2017-2018