Realiza una request al servidor y carga el html devuelto en el elemento que se indique:
$.load
( url,
[data],
[complete(responsEnlaceeText, textStatus,XMLHttpRequest)]
)
url: Cadena de caracteres que contiene la URL del archivo que se envía.
data: Cadena de caracteres que contiene la respuesta del servidor.
complete: (responseText, textStatus, XMLHttpRequest) Funcion que se ejecuta cuando la solicitud se completó.
Ejemplo:
$("#divContenedor").load("pagina2.html");
vamos a demostrar como funciona en una pequeña aplicación con MVC
Click derecho en la carpeta Models
Seleccionar la opción Agregar
Seleccionar Clase
cambiar el nombre por Usuarios.cs
namespace Prueba_MVC3.Models
{
public class Usuarios
{
public string Apellido { get; set; }
public string Nombre { get; set; }
}
}
Agregar un nuevo controlador en la carpeta: Controllers. Llamamos a este: UserController
Agregamos en nuestro controlador el siguiente Action:
public ActionResult ListarUsuarios()
{
var usuario1 = new Usuarios { Apellido = "Marchetti", Nombre = "Javier" };
var usuario2 = new Usuarios { Apellido = "Perez", Nombre = "Juan" };
var usuario3 = new Usuarios { Apellido = "Diehl", Nombre = "Russell" };
var listaUsuarios = new List<Usuarios> { usuario1, usuario2, usuario3 };
return PartialView();
}
Agregar una vista parcial, haciendo click derecho sobre PartialView y seleccionando la opción agregar vista, como muestra la imagen siguiente:

Chequear la opción Crear como vista parcial

cambiar el nombre de la vista por: ListarUsuarios y presionar Agregar
pasar como parámetros al método PartialView:
El nombre de la vista parcial: «ListarUsuarios»
y la lista: listaUsuarios
el action quedaría de la siguiente manera:
public ActionResult ListarUsuarios()
{
var usuario1 = new Usuarios { Apellido = "Marchetti", Nombre = "Javier" };
var usuario2 = new Usuarios { Apellido = "Perez", Nombre = "Juan" };
var usuario3 = new Usuarios { Apellido = "Diehl", Nombre = "Russell" };
var listaUsuarios = new List<Usuarios> { usuario1, usuario2, usuario3 };
return PartialView("ListarUsuarios",listaUsuarios);
}
el controlador completo:
using System.Web.Mvc;
using Prueba_MVC3.Models;
using System.Collections.Generic;
namespace Prueba_MVC3.Controllers
{
public class UserController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult ListarUsuarios()
{
var usuario1 = new Usuarios
{
Apellido = "Marchetti", Nombre = "Javier"
};
var usuario2 = new Usuarios
{
Apellido = "Perez", Nombre = "Juan"
};
var usuario3 = new Usuarios
{
Apellido = "Diehl", Nombre = "Russell"
};
var listaUsuarios = new List<Usuarios>
{
usuario1, usuario2, usuario3
};
return PartialView("ListarUsuarios",listaUsuarios);
}
}
modificar la vista parcial de la siguiente manera:
@using System.Collections
@model IEnumerable<Prueba_MVC3.Models.Usuarios>
@foreach (var usuario in Model)
{
<div>
<p>@usuario.Apellido</p>
<p>@usuario.Nombre</p>
</div>
}
en la vista: Index agregar un enlace:
<a id="Listar" href="#" onclick="Listar()">Listar</a>
un div llamado: «divContenedor»
<div id="divContenedor"></div>
y en la sección de scripts la función Listar:
<script type="text/javascript">
function Listar() {
$("#divContenedor").load("../User/ListarUsuarios");
}
</script>
quedaría de la siguiente manera:
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<a id="Listar" href="#" onclick="Listar()">Listar</a>
<br/>
<div id="divContenedor"></div>
<script type="text/javascript">
function Listar() {
$("#divContenedor").load("../User/ListarUsuarios");
}
</script>
en esta función es donde usaremos nuestro $.Load()
$("#divContenedor").load("../User/ListarUsuarios");
esta cargará el contenido html de la respuesta del servidor a la petición (que es controlada por el Action: ListarUsuarios del Controlador: User) en el divContenedor
vamos a probar…
Ejecutamos nuestra aplicación (F5)
en la barra de direcciones colocamos la url correspondiente: http://localhost:xxxx/User/Index

presionamos sobre nuestro enlace Listar
