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:
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:
Para atingir o nosso objetivo, vamos realizar as seguintes tarefas:
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.
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:
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:
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:
1 | using System.Linq; |
2 | using System.Web.Mvc; |
3 | using Mvc_Produtos_Ajax.Models; |
4 | namespace 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:
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.