TextBox, AutoComplateExtender y un Web Service ASP.Net

Vamos a crear un control que se autocomplete tomando los datos de un WebService y este a su vez de una base de datos de Sql Server

Primer paso: un TextBox y ligado a un AutoCompleteExtender de AJAX asp.net

<asp:TextBox ID=”TextBoxBuscarTienda” runat=”server”> </asp:TextBox>

<asp:AutoCompleteExtender ID=”TextBoxBuscarTienda_AutoCompleteExtender” runat=”server”
DelimiterCharacters=”” Enabled=”True” CompletionListCssClass=”autocomplete_completionListElement”
CompletionListHighlightedItemCssClass=”autocomplete_highlightedListItem” CompletionListItemCssClass=”autocomplete_listItem”
CompletionSetCount=”10″ MinimumPrefixLength=”3″ ServiceMethod=”ConseguirTiendas”
ServicePath=”~/WebServiceTiendas.asmx” TargetControlID=”TextBoxBuscarTienda”
OnClientPopulated=”selectItem” UseContextKey=”True”>
</asp:AutoCompleteExtender>

Segundo Paso: El Web Service. Agregamos uno a nuestro proyecto de asp.net. Boton derecho a nuestro proyecto en el explorador de soluciones y despues Agregar >> Nuevo Elemento >> Servicio Web. Les dejo completo el código del módulo WebService.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;

namespace SystemDesk
{
///
/// Descripción breve de WebServiceTiendas
///

[WebService(Namespace = “http://tempuri.org/&#8221;)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// Para permitir que se llame a este servicio Web desde un script, usando ASP.NET AJAX, quite la marca de comentario de la línea siguiente.
[System.Web.Script.Services.ScriptService]
public class WebServiceTiendas : System.Web.Services.WebService
{

[WebMethod]
//public string HelloWorld()
//{
// return “Hello World”;
//}
public string[] ConseguirTiendas(string prefixText, int count)
{
string MiConeccion = MiConeccion = System.Configuration.ConfigurationManager.ConnectionStrings[“ConnectionStringExMa”].ConnectionString;
List items = new List(count);
DataSet ds = new DataSet();
string connectionString = MiConeccion;
using (SqlConnection connection = new SqlConnection(connectionString))
{
string sql = “SELECT determinanteGSP, sucursales FROM VisPuntosVentaProy ”
+ “WHERE sucursales LIKE ‘%” + prefixText + “%'”;
SqlDataAdapter adapter = new SqlDataAdapter();
adapter.SelectCommand = new SqlCommand(sql, connection);
adapter.Fill(ds);
}

//Si no encuentra algún dato envía un registro de no existe tienda.
if (ds.Tables[0].Rows.Count > 0)
{

foreach (DataRow dr in ds.Tables[0].Rows)
{
items.Add(dr[“determinanteGSP”].ToString() + “|” + dr[“sucursales”].ToString() + “|”);
//items.SetValue(dr[“TAR_Codigo”].ToString() + “\t” + dr[“TAR_Tipo”].ToString());
}

}
else
{
items.Add(“No existe tienda.” + “|” + “Da clic en: Cliente Nuevo.” + “|”);
}

return items.ToArray();

}

}
}

Paso tres: En mi caso hace falta un script de java para que al seleccionar los registros que se muestran, que son dos columnas me ponga el ID del registro y no la descripción pues es el ID lo que guardo en la base de datos.

   <title>Mi Proyecto</title>
<script type=”text/javascript”>function selectItem() {
var comletionList = $find(“TextBoxBuscarTienda_AutoCompleteExtender”).get_completionList();
for (i = 0; i < comletionList.childNodes.length; i++) {
var _value = comletionList.childNodes[i]._value;
comletionList.childNodes[i]._value = _value.substring(_value.lastIndexOf(‘|’) + 1);
_value = _value.substring(0, _value.lastIndexOf(‘|’));
comletionList.childNodes[i].innerHTML = _value.replace(‘|’, ‘<br/>’);
}
}function tabular(e, obj) {
tecla = (document.all) ? e.keyCode : e.which;
if (tecla != 13) return;
frm = obj.form;
for (i = 0; i < frm.elements.length; i++)
if (frm.elements[i] == obj) {
if (i == frm.elements.length – 1) i = -1;
break
}
frm.elements[i + 1].focus();
frm.elements[i + 1].select();
return false;
}</script>

Con esto creo que quedaría un Texbox con un autocompletar basado en el control de asp AJAX AutoCompleteExtender y al seleccionando un registro tomo el valor no la descripción.

¿Dudas? Ingresalas en el campo “Comment:” y contestare en los comentarios del artículo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s