Neste artigo veremos como podemos usar os recursos do Ajax em aplicações ASP .NET MVC. Vou tratar especificamente do métodoAjax.ActionLink.

Conceitos

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:

Propriedade	Descrição
Confirm	Exibe uma caixa de confirmação antes de postar as informações
HttpMetod	Define o tipo de operação
InsertionMode	Define como a resposta será incluída na página
LoadignElementId	Define o Id do elemento HTML executado
LoadingElementDuration	Determina o tempo que o elemento definido na propriedade LoadingElementIdpermanece visível.
OnBegin	Defina ou retorna a função javascript executada antes da página ser atualizada
OnComplete	Define ou retorna a função javascript executada quando assíncrona completar
OnFailure	Define ou retorna a função javascript executada quando assíncrona falhar
OnSuccess	Define ou retorna a função javascript executada quando assíncrona é encerrada com sucesso
UpdateTargetId	Define o Id do elemento HTML usado para exibir a resposta enviada ao servidor
Url	Define 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:

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

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

Recursos usados:

• Visual Studio Community 2013;
• ASP .NET 4.5;
• SQL Server 2012 Express Edition;
• Banco de dados Northwind.mdf.

Usando Ajax.ActionLink

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

• Definindo o objetivo;
• Criar um projeto ASP .NET MVC vazio;
• Definir o Model usando o Entity Data Model usando o Entity Framework (fonte de dados: Northwind.mdf);
• Definir os controladores;
• Definir as Views;
• Definir a partial view.

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.

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

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.

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:

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:

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:

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:

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:

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:

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:

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:

using System.Linq;
using System.Web.Mvc;
using Mvc_Produtos_Ajax.Models;
namespace Mvc_Produtos_Ajax.Controllers
{
    public class HomeController : Controller
    {
        private NorthwindEntities ctx = new NorthwindEntities();
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
      public PartialViewResult Brazil()
        {
            var resultado = from r in ctx.Customers
                                   where r.Country == "Brazil"
                                   select r;
            return PartialView("Pais", resultado);
        }
        public PartialViewResult Argentina()
        {
            var resultado = from r in ctx.Customers
                                   where r.Country == "Argentina"
                                   select r;
            return PartialView("Pais", resultado);
        }
    }
}

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.