ART: Como cargar vistas parciales en ASP.NET MVC usando Jquery Ajax

En este articulo, hablaremos vistas parciales en ASP.NET MVC y cargalos via Jquery Ajax Podría ver varios escenarios para esto. vamos asumir que tenemos una pagina que contiene múltiples vistas parciales y datos de varias fuentes. Podemos cargar cada vista parcial usan AJAX de forma individual, esto mejora la experiencia de usuario porque los componentes son cargados fácilmente si esperar hasta la carga de todos los componentes. Tan protnto como cada uno de las cargas de control, para el usuario estará disponible ara el usuario en la página.

Paso 1: Creando el proyecto
Yo estoy usando MVC 4 para este artículo; pero no importa si usas MVC 3, MVC 4 o MVC 5. Vamos a crear un proyecto MVC 4 en blanco en visual Studio 2012 y le vamos a llamar PartialView_Jquery.

Paso 2: Agregando clases modelo
Luego agregamos dos clases modelo Cliente y Producto, en la estructura del proyecto tiene que estar dentro de la carpeta Models.

Clase Producto:

Clase Cliente:

Paso 3: Agregando el Controlador
Ahora vamos a crear el controlador Home y los métodos Index, ObtenerProducto y ObtenerCliente.

Paso 5: Cargando de datos al modelo
Ahora vamos a crear una lista de los objetos Cliente y Producto, esto lo realizamos en los métodos del controlador Home creados en los pasos anteriores.

Este código es para el objeto cliente :

Esto es para el objeto Producto:

Paso 5: Creando la Vistas Parciales
Ahora creamos las vistas DetalleCliente.cshtml y DetalleProducto.cshtml relacionados con los métodos creados en el controlador Home Obtener Cliente y ObtenerProducto respectivamente(se puede crear haciendo click derecho sobre el método del controlador y seleccionando la opción crear vista).

Creando la vista parcial DetalleProducto.cshtml

Creando la vista parcial DetalleCliente.cshtml

Paso 6: Creando la Vista principal Index.cshtml
Es en esta vista donde vamos a cargar las dos vistas parciales, utilizando Jquery ajax, para agregar a nuestro proyecto los archivos script de jquery podemos utilizar la consola de administrador de paquetes de visual studio(Herramientas->Administrador de Paquetes de Biblioteca), y digitar install-Package Jquery, entonces se instalará en la carpeta Scripts de nuestro proyecto.

Ahora si podemos trabajar con nuestra vista principal Index.cshtml:

Paso 7: Probando la aplicación.

Ahora se han creado dos botones, cuando se presiona el botón carga la vista correspondiente, esto hará que la carga de la información sea más rápido porque solo esta cargando una porción de la pagina y no toda la 

página.