Usar ajax com ActionLink

Quero mudar os ActionLink e o URL para funcionar com Ajax, porém não sei como fazer isso. Segue meu código com ActionLink e URL.

=================

=================

3 Respostas
3

=================

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; }




Index



@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
})


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

@foreach (var item in Model) {

}

@Html.DisplayNameFor(model => model.Nome)
@Html.DisplayFor(modelItem => item.Nome)

Página Index Renderizada

Ao clicar no link:

O que o Ajax.ActionLink gera:

Carregar Pessoas

Com Jquery


Logout

  

 

Eu poderia remover o URL, e colocar assim? @Ajax.ActionLink(“Carregar Pessoas”, “Pessoas”, “Controller, new…
– Diego Zanardo
12/06/14 às 13:48

  

 

@DiegoZanardo, pode sim, existem várias sobrecargas esse método então pode adequar dessa maneira que terá o mesmo resultado, fiz uma edição com tal dúvida.
– user6026
12/06/14 às 14:11

  

 

eu consigo gerar algo assim (Para que o seja mantido: Logout
– Diego Zanardo
12/06/14 às 14:27

  

 

@DiegoZanardo, utilize nesse caso jQuery, com está na resposta editada. Eu também tem esses links, então eu prefiro usar puramente jQuery.
– user6026
12/06/14 às 14:40

Crie um id para seus ActionLink com jquery busca pelo id podendo fazer post/get

Segue um exemplo que uso em meu site:

Razor

@page.Html.DropDownList(“UF”, page.ViewBag.Estados as SelectList, new { onchange = “vmCadInicial.GetCidades(this.value)”)

Javascript

this.GetCidades = function (uf, callback) {
$.getJSON(“/site/apiCidades/AccountMVVM/GetCidades/” + uf + “?callback=?”)
.success(function (data) {
if (callback) callback(data);
})
.complete(function (jqXhr, textStatus, error) { })
.error(function (jqXhr, textStatus, error) { });
}