Construindo um List Suggest com ASP.NET Web Services e JQuery

Neste artigo apresento de forma simples e direta como podemos criar um List Suggest para nosso web site buscando a equivalencia do termo digitado no banco de dados utilizando ASP.NET Web Services e JQuery.

por Fabrício Lopes Sanchez

Se você é desenvolvedor web, com certeza possui uma ideia fixa (se não possui, deveria possuir)- os aplicativos web devem prover mecanismos eficientes de busca de conteúdos para os usuários. Para alcançar tal objetivo, desenvolvedores e designers propõem a cada dia novos mecanismos e recursos para tal. Dentre esses recursos, um dos que mais me agrada é o conhecido “List Suggest” (em português, Lista de Sugestões).

Para quem não conhece, uma lista de sugestões é o mecanismo que permite ao usuário buscar um conteúdo por nome ou parte dele e, na medida em que a digitação vai sendo realizada, uma lista de nomes semelhantesseja exibida abaixo do campo de busca, possibilitando assim, que o mesmo selecione a opção desejada sem precisar digitar todo o nome. Este é um recurso bastante interessante e está presente em diversos sites e sistemas pela web, sendo que, o maior exemplo que podemos citar é o Google.

Este artigo apresenta uma forma simples e rápida de programarmos uma lista de sugestões utilizando ASP.NET Web Services, um banco de dados e a biblioteca JQuery UI, que já traz nativamente um recurso de auto complete. O que faremos aqui é criar um WebService que se conectará a um banco de dados e retornará em JSON os dados da tabela e, em seguida, consumiremos este Web Service com a biblioteca JQuery UI.

Muito bem, vamos então criar um novo projeto do tipo “ASP.NET Empty Web Application” e adicionar um arquivo chamado Default.aspx. Após efetuar este processo, sua Solution Explorer deverá estarestar semelhante aquela apresentada na Figura 1.

Figura 1: Solution Explorer após a adição do arquivo Default.aspx

Em seguida abra a página Default.aspx, alterne o modo de visualização para Source e, dentro das Tag’s <form></form> insira o trecho de código apresentado na Listagem 1.

1 2 3 4

<div class="ui-widget">     <label for="tags">Busca de produto: </label>     <input id="tags" /> </div>

Listagem 1: Trecho de código que insere um TextBox

Agora, vamos adicionar um novo arquivo ao nosso projeto. O arquivo que iremos adicionar é um Web Service File (ASMX). Para isso, vá até a Solution Explorer de seu projeto e dê um clique com o botão direito e selecione Add > New Item… > Web (do lado esquerdo) > Web Service. Nomeie o Web Service como WSProducts.asmx e em seguida Add. Muito bem, adicionamos um Web Service a nosso projeto. Ao final deste projeto sua Solution Explorer deverá estar semelhante a Figura 2.

Figura 2: Solution Explorer após a adição do WS ao projeto

Muito bem, este WS (Web Service) será o grande responsável por “ir” até o banco de dados, buscar a palavra que o usuário digitou e retornar as semelhantes em formato JSON (em um artigo futuro falaremos especificamente sobre JSON).

Para que possamos retornar a informação resultante da consulta em JSON, precisamos de uma classe auxiliar que implemente os recursos de “serialização” e “des-serialização”. Vamos então adicionar a referencia desta DLL a nosso projeto.

Baixando e incorporando a extensão JSON

O primeiro passo é realizar o download da biblioteca no codeplex. Para isso, basta clicar no seguinte link: http://json.codeplex.com/. Após o download descompacte o pacote em um diretório de sua preferência. Vamos então adicionar a referência da DLL a nosso projeto. Vá até a Solution Explorer e na opção “References” clique com o botão direito e selecione a opção “Add reference…”. Clique na abra “Browse” e navegue até a pasta onde descompactou o pacote baixado. Neste local, selecione o arquivo com o nome “Newtonsoft.Json.dll” e dê um duplo clique. Sua tela deverá estar semelhante aquela apresentada na Figura 3.

Figura 3: Inserindo a referência da biblioteca JSON

Muito bem, após clicar em OK estamos aptos a utilizar os recursos implementados na biblioteca. Vamos então a implementação de nosso WS. Se já não estiver aberto, abra o Web Service e implemente código apresentado na Listagem 2.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Data; using System.Data.Sql; using System.Data.SqlClient; using Newtonsoft.Json; using System.Web.Script.Services; namespace ListSuggest {     [WebService(Namespace = "ListSuggest")]     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]     [System.Web.Script.Services.ScriptService]     public class WSProducts : System.Web.Services.WebService     {         [WebMethod]         [ScriptMethod(ResponseFormat = ResponseFormat.Json)]         public string retornaProdutos(string _criterio)         {             string stringConexao = @"Data Source=Fabricio-PC;Initial Catalog=Northwind;User ID=sa;Password=shell";             SqlConnection conexao = new SqlConnection(stringConexao);             SqlCommand cmd = new SqlCommand("SELECT ProductName FROM Products WHERE ProductName LIKE ‘”+ _criterio +”’ ORDER BY ProductName ASC", conexao);             conexao.Open();             List<string> lstProdutos = new List<string>();             SqlDataReader registro = cmd.ExecuteReader();             while (registro.Read())             {                 lstProdutos.Add((string)registro["ProductName"]);             }             return JsonConvert.SerializeObject(lstProdutos, Formatting.Indented);         }     } }

Listagem 2: Web Service a ser consumido pelo JQuery

O código da Listagem 2 é bastante simples, entretanto requer um pouco de conhecimento da linguagem C#. Em linhas gerais, o que este método está fazendo é: comunicando-se com a tabela de produtos da base Northwind (este banco de dados pode ser baixado clicando aqui, retornanando os nomes de produtos para um DataReader, adicionando cada elemento do DataReader a um nó da lista e, em seguida retornando esta lista como uma string no formato JSON. Uma observação importante é o fato de incorporarmos a nosso WS a referência para o namespace “Newtonsoft.Json”.

Vamos então a verificação de nosso WS, ou seja, vamos verificar se o mesmo está se comportando da forma como esperamos. Para isso, vá a Solution Explorer e, em cima do WS clique com o botão direito do mouse e selecione a opção “View in browser” . Se tudo correu bem, sua tela deve estar semelhante aquela visualizada na Figura 4.

Figura 4: WS executado corretamente

Bom, se nosso WS está funcionando corretamente, só nos resta então consumir esse WS em nossa página ASPX com o JQuery. Como mencionado anteriormente, iremos criar um List Suggest utilizando uma biblioteca chamada JQuery UI. Você pode efetuar o download da biblioteca gratuitamente clicando aqui.

Como iremos efetuar uma chamada assíncrona, ou seja, com postback assíncrono e iremos utilizar ajax, precisamos de um controlador de ajax em nosso ASPX. Vamos então adicionar o componente Script Manager a nossa página e dizer ao gerenciador que ele trabalhará com o WSProducts. Ao adicionar o Script Manager na página, temos o código apresentado na Listagem 3.

1 2 3 4 5

<asp:ScriptManager ID="ScriptManager1" runat="server">         <Services>             <asp:ServiceReference Path="~/WSProducts.asmx" />         </Services> </asp:ScriptManager>

Listagem 3: Script Manager adicionado na página

Estamos terminando. Nos resta agora consumir o WS de fato para que possamos exibir o List Suggest. Vamos primeiro criar um diretório em nosso projeto. Chamaremos esse diretório de UI. Dentro dele adicionaremos os arquivos da biblioteca de auto complete. Após este processo sua Solution Explorer deve estar parecida com aquela aquela apresentada na Figura 5.

Figura 5: Solution Explorer com o JQuery adicionado

Vamos agora referenciar os arquivos adicionados à página ASPX onde consumiremos o WS. O código para a referência ao JQuery é aquele apresentado na Listagem 4.

<link href="UI/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

<script src="UI/jquery-1.4.2.js" type="text/javascript"></script>

<script src="UI/ui/jquery.ui.core.js" type="text/javascript"></script>

<script src="UI/ui/jquery.ui.widget.js" type="text/javascript"></script>

<script src="UI/ui/jquery.ui.position.js" type="text/javascript"></script>

<script src="UI/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>

Listagem 4: Refencias para a biblioteca JavaScript

Só nos resta agora consumir o WS com o JQuery. Para isso, adicione o código apresentado na Listagem 5 entre as tags head de nosso Web Form.

1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript">         $(function () {             $("#tags").autocomplete({                 source: function (request, response) {                     ListSuggest.WSProducts.retornaProdutos(request.term, function (data) {                         var json = eval(data);                         response($.map(json, function (item) { return { label: item } }));                     });                 }             });         });     </script>

Listagem 5: Consumindo o WS com o JQuery

O código da chamada é extremamente simples. Chamamos a função autocomplete() do JQuery e, dentro dela, fazemos a chamada ao método que consome o Web Service. Simples e direto. Ao executarmos o projeto, se tudo correu bem, o resultado deverá ser semelhante aquele apresentado na Figura 6.

Figura 6: Resultado final do List Suggest

Bom pessoal, espero que este artigo o tenha ajudado na tarefa de criar sites com recursos avançados e que possam ajudar os usuários a encontrarem de forma otimizada os conteúdos.