Se você é desenhttps://fabriciosanchez.com.br//wp-admin/post.php?post=690&action=edit&message=1volvedor web, com certeza possui uma idéia 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 designer’s 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 que a digitação vai sendo realizada, uma lista de nomes semelhantes seja 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 implementarmos uma lista de sugestões utilizando ASP.NET WebServices, um banco de dados e a biblioteca JQuery UI, que já traz nativamente um recurso de autocomplete. 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á estar estar 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.
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 We bService File (ASMX). Para isso, vá até a Solution Explorer, no seu projeto 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.
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 ORDER BY ProductName ASC", conexao);
conexao.Open();
List lstProdutos = new List();
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.
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.
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.
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. Quaisquer dúvidas favor entrar em contato através da sessão “Fale Conosco” do site.
Você pode baixar o projeto completo utilizado na construção do artigo clicando AQUI.
Por favor, não esqueçam de deixar seus comentários ao final da leitura. Esta é a nossa motivação e o pagamento pela geração de conteúdo. 🙂
Facebook
Twitter
Instagram
LinkedIn
RSS