AJAX + MVC Navegación entres vistas de manera fluida

Para empezar esta serie de tutoriales, en este post aprenderemos a utilizar la tecnología AJAX en nuestras aplicaciones web ASP.NET MVC de Visual Studio 2015. Existen multitud de usos de la tecnología AJAX, en este post nos centraremos, por ejemplo, en cómo crear un sistema con el que ir cargando las vistas de manera fluida, sin recargar el navegador de una vista a otra, dando una sensación agradable de navegación continua y sin interrupciones.

En primer lugar, crearemos nuestra aplicación de la manera habitual, haciendo click en “File”, “New” y seleccionando “ASP.NET Web Application”.

A continuación, crearemos una zona (por ejemplo “Home”) y dentro de ella, una vista “Index”. Esta será la página de bienvenida en nuestro sitio web. No hay que olvidar que, por cada vista que creemos, tenemos que crear su método correspondiente en su controlador (en nuestro ejemplo sería “HomeController.cs”). Esto lo veremos en la última parte de este post.

A partir de este momento, todas las vistas que creemos (cada una de las secciones de nuestra página web) deberán ser vistas parciales.

Lo siguiente que tendremos que hacer será modificar la plantilla “_Layout” que se crea por defecto en cada proyecto MVC dentro de la carpeta “Views/Shared”. Esta plantilla es la encargada de dibujar todas nuestras vistas.

<div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
          <li>@Html.ActionLink("Galería", "_VistaB", "Home", null, new { @class = "enlace-ajax" })</li>
          <li>@Html.ActionLink("Ver datos", "_VistaA", "Home", null, new { @class = "enlace-ajax" })</li>
          <li>@Html.ActionLink("Contacto", "_VistaC", "Home", null, new { @class = "enlace-ajax" })</li>
          <li>@Html.ActionLink("Enlace", "_VistaD", "Home", null, new { @class = "enlace-ajax" })</li>
     </ul>
</div>

Primero, modificamos los enlaces a cada una de nuestras vistas (vistas parciales) simplemente añadiendo a éstos la clase “enlace-ajax”.

<div class="container body-content">
     <div id="cont-ajax1" class="contenedor-ajax">
          @RenderBody()
     </div>
     <div id="cont-ajax2" class="contenedor-ajax cerrado">
     </div>
</div>

Es importante no olvidar incluir la función “RenderBody()” dentro del div que no contenga la clase “cerrado”. Ahí es donde la aplicación va a dibujar el cuerpo de nuestra vista inicial “Index”.

Eliminamos la sección “footer” (que irá incluida en cada vista parcial que creemos) y creamos dos contenedores “div” con la misma clase y uno de ellos, además, con la clase “cerrado”. Tendrán también dos atributos “id” que los identifique.

También incluiremos una sección llamada, por ejemplo, “scripts” después de que se carguen los archivos “js” correspondientes a las librerías jQuery y bootstrap. El parámetro “false” indica que no será obligatorio incluirlo en todas las vistas.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@RenderSection("scripts", false)

Funcionamiento del script

Ahora ya podemos editar nuestra vista “Index”. Las dos partes principales que debe incluir son: el script que haga posible que se carguen (mediante “Ajax”) las vistas y, aunque no es totalmente necesario, la sección “footer” que habíamos eliminado de la plantilla “_Layout”.

@section scripts{
     <script>
          var contAjax = 2;
          $(document).ready(function () {
               $(".enlace-ajax").click(function (e) {
                    e.preventDefault();
                    var ruta = $(this).attr("href");
                    $("#cont-ajax" + contAjax).load(ruta, function () {
                         $(this).removeClass("cerrado");
                         contAjax > 1 ? contAjax = 1 : contAjax = 2;
                         $("#cont-ajax" + contAjax).empty().addClass("cerrado");
                         history.pushState(null, null, ruta);
                    });
               });
          });
     </script>
}

// Aquí podemos incluir nuestro código HTML para la página de bienvenida

<footer>
     <p>&copy; @DateTime.Now.Year - Juan Romero</p>
</footer>

Básicamente, la función de este script es alternar la clase “cerrado” entre los dos divs que creamos en la plantilla.

En nuestro script inicializamos una variable “contAjax” con el valor “2”, que será el número de div que “se abrirá” en primer lugar.

Cuando se hace click en cualquier enlace (del menú de navegación) con la clase “enlace-ajax” se ejecuta la función “e.preventDefault()” que detiene al navegador y evita que éste ejecute su función predeterminada, esto es, cargar la nueva página.

Lo siguiente que hará será guardar en una variable llamada “ruta” la dirección de la vista asignada a ese enlace.

Después, carga mediante la función “.load()” el contenido de la variable ruta. Para ello, se añade la variable “contAjax” a la cadena de texto del selector de jQuery con el fin de diferenciar entre un div y otro de manera secuencial. Como resultado, este valor cambiará siempre de “1” a “2” gracias a la sentencia if “contAjax > 1 ? contAjax = 1 : contAjax = 2;”, y por lo tanto siempre seleccionará (alternativamente) “contAjax1” y “contAjax2”.

Para concluir, se elimina la clase “cerrado” al div que se va a mostrar a continuación y la añade al que se va a ocultar.

Y finalmente, se ejecuta «history.pushState()«. Por consiguiente, se escribe en la barra de direcciones del navegador la ruta actual, para mostrar al usuario en qué vista de la aplicación web se encuentra en cada momento.

Añadiendo efectos CSS3 a nuestras vistas

A continuación veremos qué funcionalidades de hojas de estilo se han aplicado. Para empezar, la clase “cerrado” es la clave para animar la aparición de una vista u otra. Como resultado, contiene unas sencillas propiedades en la hoja de estilo “Site.css” (situada dentro de la carpeta “Content”) de nuestro proyecto.

.contenedor-ajax {
     position: absolute;
     transition: 1s;
     transform: rotateX(0deg);
     opacity: 1;
     pointer-events: initial;
}

.contenedor-ajax.cerrado {
     transform: rotateX(90deg);
     opacity: 0;
     pointer-events: none;
}

Para empezar, la propiedad “position: absolute” es lo que hace que los dos divs estén en todo momento superpuestos uno encima del otro. Además, mediante “transition” indicamos la duración que queramos que tenga el efecto.

Por otra parte, las dos propiedades “transform” y “opacity” son dos efectos opcionales que harán que el contenido aparezca de una manera suave y elegante, se pueden conseguir varios efectos jugando con estas propiedades, desde rotaciones, movimientos laterales tipo “persiana” etc.

Ya por último, la propiedad “pointer-events” es importante, evita que el div invisible pueda ser interactuado por el usuario, lo cual generaría confusión al permitir seleccionar texto oculto en la web.

Generando vistas

Como ya indicamos al principio de este post, es importante que a la hora de generar las vistas de nuestro sitio web (las distintas secciones que queremos que contenga), se generen con la opción marcada “Create as a partial view”.

Finalmente, en nuestro controlador, los métodos que llamen a estas vistas deberán devolver el método “PartialView()” en lugar del “View()” que solemos utilizar. Solamente el método por defecto “Index()” devolverá “View()” en su sentencia “return”.

---

Descripción: cómo utilizar tecnología AJAX en una aplicación web dinánica que navegue entre sus vistas de manera fluida y cargue datos en segundo plano
Autor: Juan Romero Ramos
Curso: Microsoft MCSD Web Applications + SharePoint Apps
Centro: Tajamar
Año académico: 2016-2017