Baixe e coloque no seu projeto o jQuery e jQuery Unobtrusive Ajax (pelo Nuget) ou Package Manage Consoler.
PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.1.2
Controller
Esse controler vai funcionar assim: a Index será a página com o links Ajax.ActionLink e o Pessoas será o PartialView que será carregado na hora do click.
public class DefaultController : Controller
{
private readonly ModelDb db;
public DefaultController()
{
db = new ModelDb();
}
// GET: Default
public ActionResult Index()
{
return View();
}
[HttpGet]
public PartialViewResult Pessoas()
{
return PartialView(db.Pessoas.OrderBy(x => x.Nome).AsEnumerable());
}
}
View: Index
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
<div>
@Ajax.ActionLink("Carregar Pessoas", "Pessoas", new AjaxOptions()
{
HttpMethod="get",
UpdateTargetId="Conteudo",
InsertionMode=InsertionMode.Replace,
Url="/Default/Pessoas"
})
</div>
<div id="Conteudo"></div>
</body>
</html>
AjaxOptions
HttpMethod: pode ser Get,Post, etc.
UpdateTargetId: coloque a div que vai receber o contéudo produzido pela requisição Ajax.
InsertionMode: coloque Replace, para sempre atualizar a sua div.
Url: seu Controler e sua ActionResult
Obs: tem mais configurações, mas, essas são as triviais para o funcionamento
View: Partial Pessoas
@model IEnumerable<WebApp.Models.Pessoas>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Nome)
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Nome)
</td>
</tr>
}
</table>
Página Index Renderizada
Ao clicar no link: