Skip to main content
2 de 4
adicionou 378 caracteres ao conteúdo
user avatar
user avatar

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

inserir a descrição da imagem aqui

Ao clicar no link:

inserir a descrição da imagem aqui

user6026