Abordaremos nesse artigo o plugin auto complete, que é muito útil para não ficarmos cadastrando nada repetido no banco, facilitando o preenchimento do campo de busca e etc.
A Figura 1 mostra um Preview do que nós vamos criar.
Vamos começar criando um novo projeto do tipo ASP.NET Web Application. Em seguida vamos criar uma pasta com nome Scriptonde colocaremos todos os plugins necessários para o funcionamento do nosso projeto auto complete.
Após adicionar os plugins na pasta vamos abrir a página Default.aspx é importa nossos plug-ins. Em seguida começaremos a codificar nosso código jQuery, que é bem simples, como mostra a Listagem 1.
<head>
<title>Autocomplete using jQuery Plugintitle>
<script src="Scripts/jquery-latest.js"
type="text/javascript"></script>
<link rel="stylesheet" href="Scripts/jquery.autocomplete.css"
type="text/css" />
<script type="text/javascript"
src="Scripts/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#frame").autocomplete("AutocompleteData.ashx");
});
</script>
</head>Veja que colocamos o ID do nosso textbox no evento autocomplete do jQuery e depois chamamos a nossa página AutocompleteData.ashx, que é do tipo Generic Handler. Esta recebe o que foi digitado no textbox é passa por QueryString a primeira letra que digitamos. Dentro da página handler nós recuperamos por HTTP.Context.QueryString esse parâmetro que foi passado pelo plugin e o utilizamos no Select.
Vamos agora criar uma página do tipo Generic Handler com o nome AutocompleteData.ash, como mostra o código da Listagem 2.
<%@ WebHandler Language="C#" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
public class AutocompleteData : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string firstname = context.Request.QueryString["q"];
string sql = "SELECT ProductName FROM [Alphabetical list of products]
where ProductName like '" + firstname + "%' ; ";
string conexao = ConfigurationManager
.ConnectionStrings["NorthwindConnectionString"].ToString();
using (SqlConnection connection = new SqlConnection(conexao))
using (SqlCommand command = new SqlCommand(sql, connection))
{
connection.Open();
using (SqlDataReader reader = command.ExecuteReader())
{
List<string> list = new List<string>();
while (reader.Read())
{
context.Response.Write(reader[0].ToString()
+ Environment.NewLine);
}
}
}
}
public bool IsReusable {
get {
return false;
}
}
}Não esqueça de alterar a string de conexão: para o nosso exemplo estamos usando o banco Northwind, mas você pode usar qualquer outro.
