.NET

22 set, 2015

Ajax: Usando o método Ajax.ActionLink – Parte 02

Publicidade

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:

Usando Ajax.ActionLink

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.

mvc_ajax28

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:

mvc_ajax29

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:

mvc_ajax2a

Note que temos dois links criados pelo método Ajax.ActionLink.

Clicando no primeiro link, obtemos os clientes do Brasil:

mvc_ajax2b

Clicando no segundo link, obtemos os clientes da Argentina:

mvc_ajax2c

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