Ajax: Usando o método Ajax.ActionLink – Parte 02
Neste artigo veremos como podemos usar os recursos do Ajax em aplicações ASP .NET MVC. Vou tratar especificamente do método Ajax.ActionLink.
Neste artigo, veremos como podemos usar os recursos do Ajax em aplicações ASP .NET MVC. Vou tratar especificamente do método Ajax.ActionLink.
Na primeira parte do artigo, criamos o projeto, definimos o modelo de entidades, o Model e o Controller do projeto MVC. Agora vamos concluir criando a View que irá usar o método Ajax.ActionLink para acessar as informações do modelo de entidades, exibindo-as na página.
Para continuar, você deve abrir o projeto Mvc_ActionLink criado na primeira parte.
Recursos usados:
-
ASP .NET 4.5
-
SQL Server 2012 Express Edition
-
Banco de dados Northwind.mdf
Criando a View
Agora vamos criar a nossa view para o método Index().
Clique com o botão direito do mouse sobre o método Index() e, a seguir, clique em Add View.
Na janela Add View, aceite o nome Index e o template Empty(without model) e clique no botão Add.
Será criado na pasta /Views/Home o arquivo Index.cshtml. Vamos incluir o código abaixo neste arquivo:
<!DOCTYPE html>
<html>
<head>
<title>Usando Ajax.ActionLink</title>
<!-- referência ao jQuery e jQuery unobtrusive -->
<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
</head>
<body>
<div class="jumbotron">
<h1>Clientes por País</h1>
</div>
<h3>Clientes</h3>
<b>
@Ajax.ActionLink("Clientes do Brasil", // <-- Texto a ser exibido
"Brazil", // <-- Nome do método Action
new AjaxOptions
{
UpdateTargetId = "ListaClientes", // <-- ID do elemento DOM a atualizar
InsertionMode = InsertionMode.Replace, // <-- Substituir o conteúdo do elmento DOM
HttpMethod = "GET" // <-- método HTTP
})
</b> |
<b>
@Ajax.ActionLink("Clientes da Argentina", // <-- Texto a ser exibido
"Argentina", // <-- Nome do método Action
new AjaxOptions
{
UpdateTargetId = "ListaClientes", // <-- ID do elemento DOM a atualizar
InsertionMode = InsertionMode.Replace, // <-- Substituir o conteúdo do elmento DOM
HttpMethod = "GET" // <-- método HTTP
})
</b>
<!-- Elemento DOM a ser atualizado -->
<div id="ListaClientes"></div>
</body>
</html>
Neste código referenciamos as bibliotecas jQuery e jQuery Unobtrusive, definimos dois links usando Ajax.ActionLink exibindo os textos: Clientes do Brasil e Clientes da Argentina e atualizamos o elemento DOM, definido com o ID ListaClientes, efetuando a substituição do conteúdo usando o método GET.
No primeiro ActionLink estamos acessando o método Brazil e no segundo o método Argentina, definidos no controlador HomeController comoPartialView.
Falta agora definir uma view para exibir as informações retornadas pelo controlador HomeController nos métodos Brazil e Argentina. Esse conteúdo será a Partial View Pais.
Clique com o botão direito do mouse sobre a pasta Home contida na pasta Views e, a seguir, clique em Add View.
Na janela Add View, informe o nome Pais, defina o template Empty e o Model Class igual a Customer e o Data context class como igual a NorthwindEntities, conforme figura abaixo:
A seguir, defina o seguinte código na view Pais.cshtml, que foi criada na pasta Views/Home:
@model IEnumerable<Mvc_Produtos_Ajax.Models.Customer>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.ContactName)
</th>
<th>
@Html.DisplayNameFor(model => model.Address)
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ContactName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</td>
</tr>
}
</table>
Este código irá exibir o nome e o endereço do cliente.
Agora podemos executar o projeto. Fazendo isso iremos obter o seguinte resultado:
Note que temos dois links criados pelo método Ajax.ActionLink.
Clicando no primeiro link, obtemos os clientes do Brasil:
Clicando no segundo link, obtemos os clientes da Argentina:
Assim vimos como usar o recurso Ajax.ActionLink em uma aplicação ASP .NET MVC.
Pegue o projeto sem as referências aqui: Mvc_ActionLink.zip
é referência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.
