Ajax: Usando o método Ajax.ActionLink

12/01/2017

AJAX é um acrônimo para Asynchronous JavaScript and XML e é constituído por um conjunto de tecnologias como JavaScript, HTML, CSS, DHTML e DOM. A tecnologia AJAX é uma avanço na tentativa de se construir uma ponte entre a funcionalidade e a interatividade de uma aplicação desktop e uma aplicação web.

Quando usamos jQuery, a forma básica para se comunicra de forma assíncrona com o servidor é usar o método $.ajax.

Dentre os diversos métodos disponíveis, veremos o método Ajax Helper Ajax.ActionLink, que é muito parecido com o método Html.ActionLink (veja abaixo) e, dessa forma, ele também cria o hiperlink <a href=””> Clique aqui </a>mas quando o usuário clica no link, possui o JavaScript habilitado e o método Ajax.ActionLink envia uma solicitação assíncrona, em vez de navegar para uma nova URL.

Com Ajax.ActionLink especificamos qual o método Action do controlador será invocado e também especificamos o que fazer com a resposta retornada pelo método Action.

Se você consultar a API jQuery, verá que a sintaxe usada neste método é: @Ajax.ActionLInk(TextoDoLink, MétodoControlador, parâmetros, AjaxOptions).

A classe AjaxOptions contém as seguintes propriedades:

PropriedadeDescrição
ConfirmExibe uma caixa de confirmação antes de postar as informações
HttpMetodDefine o tipo de operação
InsertionModeDefine como a resposta será incluída na página
LoadignElementIdDefine o Id do elemento HTML executado
LoadingElementDurationDetermina o tempo que o elemento definido na propriedade LoadingElementIdpermanece visível.
OnBeginDefina ou retorna a função javascript executada antes da página ser atualizada
OnCompleteDefine ou retorna a função javascript executada quando assíncrona completar
OnFailureDefine ou retorna a função javascript executada quando assíncrona falhar
OnSuccessDefine ou retorna a função javascript executada quando assíncrona é encerrada com sucesso
UpdateTargetIdDefine o Id do elemento HTML usado para exibir a resposta enviada ao servidor
UrlDefine ou retorna uma URL para usar com a requisição

Nota: Apenas a título de recordação, a sintaxe do método Html.ActionLink é dada abaixo:

1@Html.ActionLink("Clique Aqui",    // <-- Texto do Link
2                            "About",            // <-- Nome do método Action
3                            "Home",            // <-- Nome do controlador
4                             null,                // <-- valor da Rota
5                             null                 // <-- htmlArguments
6                        )

No exemplo o método é renderizado como o seguinte HTML: <a href=”/Home/About”>Clique Aqui</a>

Recursos usados:

Usando Ajax.ActionLink

Para atingir o nosso objetivo, vamos realizar as seguintes tarefas:

1. Definindo o objetivo

Nosso objetivo será criar um projeto ASP .NET MVC. Cada um dos links irá invocar um método definido no controlador da aplicação MVC.

Os métodos Action irão acessar o nosso modelo de entidades (NorthwindEntities) e exibirão informações da tabela Customers para um determinado país.

No nosso exemplo iremos criar dois métodos Action para exibir os clientes do Brasil e da Argentina quando o cliente clicar nos links da view Index.

Dessa forma, veremos como usar o recurso Ajax.ActionLink de forma prática.

2. Criando o projeto ASP .NET MVC

Abra o VS Community 2013 clique em New Project e selecione o Visual Basic (ou Visual C#) -> web e o template ASP .NET Web Application e informe o nome Mvc_ActionLink e clique no botão OK.

mvc_ajax21

A seguir, selecione o template Empty e marque a opção MVC e clique no botão OK.

mvc_ajax2

Vamos incluir em nosso projeto o pacote jQuery Unobtrusive clicando no menu TOOLS e, a seguir, em Nuget Package Manager -> Manage Nuget Package for Solution.

Selecione o pacote Microsoft jQuery Unobtrusive AJax e clique em Install.

mvc_ajax5

Os arquivos do jQuery Unobtrusive serão copiados na pasta Scripts. Ao final desta etapa teremos o projeto criado com a seguinte estrutura vista na janela Solution Explorer:

mvc_ajax22

3. Definindo o Model

Neste projeto iremos definir na pasta Models o nosso modelo de domínio usando como fonte de informações o banco de dados Northwind.mdf.

Este banco de dados é muito usado para testes e pode ser obtido gratuitamente neste link. Então, baixe o banco de dados e restaure-o em seu servidor SQL Server Local usando o SQL Server Management Studio.

Com o banco de dados Northwind.mdf devidamente instalado, clique com o botão direito sobre a pasta Models do projeto MVC e a seguir clique em Add -> New Item. Clique na guia Data e depois em ADO .NET Entity Data Model.

Informe o nome Northwind e clique no botão Add:

mvc_ajax23

Na janela do assistente, selecione a opção EF Designer from database, pois vamos usar um banco de dados já existente para criar o nosso  modelo de entidades:

mvc_ajax24

Na próxima janela do assistente, selecione a conexão com o banco de dados Northwind.mdf e aceite o valores definidos pelo assistente conforme figura abaixo:

mvc_ajax33

Nota: Se não possuir uma conexão com o banco de dados Northwind.mdf, clique em New Connection e informe o nome do seu servidor SQL Server e selecione o banco de dados.

Clicando em Next, teremos a janela onde você deverá selecionar as tabelas do banco de dados a partir das quais as entidades serão geradas.

Selecione as tabelas Categories, Products, Customers, Orders e Order_Detail e marque as opções conforme a figura abaixo:

mvc_ajax26

Clicando no botão Finish, o modelo de entidades será gerado sendo identificado pelo contexto NorthwindEntities, sendo visualizado ao clicar no arquivoNorthwind.edmx na pasta Models:

mvc_ajax34

4. Definindo o Controlador

Precisamos definir na pasta Controllers o controlador para o nosso projeto MVC, afinal, os eles são o coração do MVC e nele estão as ações que darão vida a nossa aplicação. Para isso, clique com o botão direito do mouse sobre a pasta Controllers e, a seguir, em Add -> Controller. Selecione a opção – MVC 5 Controller Empty – e clique no botão Add:

mvc_ajax3

A seguir, na janela Add Controler informe o nome : HomeController e clique no botão Add. Será criado o controlador HomeController com o método Index().

Vamos criar neste controlador uma referência ao nosso modelo de entidades para poder acessar os dados da tabela Customers que precisamos exibir em nossa aplicação.

Para isso, vamos definir o código abaixo em nosso controlador HomeController:

1using System.Linq;
2using System.Web.Mvc;
3using Mvc_Produtos_Ajax.Models;
4namespace Mvc_Produtos_Ajax.Controllers
5{
6    public class HomeController : Controller
7    {
8        private NorthwindEntities ctx = new NorthwindEntities();
9        // GET: Home
10        public ActionResult Index()
11        {
12            return View();
13        }
14      public PartialViewResult Brazil()
15        {
16            var resultado = from r in ctx.Customers
17                                   where r.Country == "Brazil"
18                                   select r;
19            return PartialView("Pais", resultado);
20        }
21        public PartialViewResult Argentina()
22        {
23            var resultado = from r in ctx.Customers
24                                   where r.Country == "Argentina"
25                                   select r;
26            return PartialView("Pais", resultado);
27        }
28    }
29}

Entendendo o código:

  1. Criamos uma instância do modelo de entidades para podermos acessar suas informações : private NorthwindEntities ctx = new NorthwindEntities();
  2. Aqui temos o método Action Index() que irá chamar a nossa View que será criada logo mais;
  3. Criamos dois métodos do tipo PartialViewResult, que retornam uma PartialView chamada Pais, contendo o resultado da consulta LINQ, que filtra os clientes pelo país Brasil e Argentina.

Partial Views – Ao utilizar a tecnologia ASP .NET MVC, a medida que você se familiariza com seus recursos, você vai querer poder criar componentes reutilizáveis, evitando assim código duplicado. No Web Forms, você podia fazer isso usando um controle de usuário ou Users Control. Ao usar o modelo ASP .NET MVC, você pode obter o mesmo resultado usando as Partial Views – é uma opção. Então, sem entrar em detalhes mais técnicos, podemos dizer que Users Control e Partial Views te levam ao mesmo resultado final: reaproveitamento e encapsulamento de código. É bom lembrar que embora as Partial Views possam se comportar de forma semelhante aos Users Controls, existem diferenças importantes. Os Users Controls usados nos Web Forms utilizam ViewState, Postbacks e Eventos enquanto que as Partials Views não usam nenhuma dessas técnicas para gerenciar estado.

Na segunda parte do artigo iremos criar a PartialView Pais e a view Index() usando o Ajax.ActionLink para acessar e exibir informações dos clientes na nossa aplicação.