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"
})
@*Ou Assim*@
@Ajax.ActionLink("Carregar Pessoas", "Pessoas", "Default", null, new AjaxOptions()
{
HttpMethod="get",
UpdateTargetId="Conteudo",
InsertionMode=InsertionMode.Replace
})
</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:
O que o Ajax.ActionLink gera:
<a data-ajax="true" data-ajax-method="get" data-ajax-mode="replace" data-ajax-update="#Conteudo" href="/Default/Pessoas">Carregar Pessoas</a>
Com Jquery
<a onclick="Open('/Default/Pessoas');" href="javascript:void(null);">
<i class="fa fa-power-off fa-fw"></i> Logout
</a>
<script>
function Open(url) {
$("#Conteudo").load(url);
}
$(document).ready({
});
</script>