RSS FEED
TWITTER
12:02 a. m.
Omar Frometa
Muchas veces nosotros como desarrolladores de Aplicaciones para la Web, queremos enriquecer cada dia mas nuestros aplicativos, una de las formas para lograr esto es brindar la mayor información que podamos al usuario en una primera vista, AJAX cuenta con un control muy versatil el cual puede ir a la base de datos y desplegarnos la informacion en cuestion de segundos, este es el AUTOCOMPLETE, en este articulo mostrare como podemos utilizarlo, paso a paso:
Para esto solo necesitaremos, crear un WebSite con Visual Studio, como siempre, utilizare de ejemplo la base de datos AdventureWorks que provee SQL para ejemplos.
- Aqui luego de crear el WebSite, arrastro un TextBox de la barra de Herramientas de Visual Studio
- Procedo a darle click Derecho sobre el TextBox y preciono Add Extender
- Dentro de los Controles a elegir selecciono AutoComplete
- Procedo Agregar un Folder ASPNET
- Luego de Agregar el Folder ASPNET AppCode, Agrego un Nuevo Elemento
- El Nuevo elemento que voy agregar sera una Clase que Nombrare AutoComplete.vb
- Le Escribire el Siguiente Codigo, que lo que hace es buscar en la Tabla donde los campos contengan las variables que le estoy enviando desde mi aplicativo web
- Procedo agregar una nueva carpeta llamada WebServices
- Luego Agrego mi Script Manager (Componente AJAX) desde mi ToolBox, y completo el codigo necesario en mi control para que funcione lo que acabe de programar
- Le doy un Click Derecho a la pagina donde he insertado mi TextBox y mi Control AJAX, y le doy Visualizar en mi Navegador
- Tendremos la siguiente Interfaz
- Buscamos en Nuestra Base de Datos para confirmar y probar que los datos estan filtrandose correctamente
- Luego procedemos a escribir en nuestro TexBox y el Resultado Seria el Siguiente
Siempre y cuando se cumpla la condicion que pusimos en nuestra Clase AutoComplete.vb, podremos visualizar los datos extraidos en cuestiones de segundos desde nuestra base de datos.
CODIGO DE EJEMPLO:
DEFAULT.ASPX
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
AUTO COMPLETAR DESDE LA BASE DE DATOS CON AJAX AUTOCOMPLETE<br />
<br />
<asp:TextBox ID="TextBox1" runat="server" Width="400px"></asp:TextBox>
<cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" TargetControlID="TextBox1"
ServicePath="~/WebServices/AutoComplete.asmx"
ServiceMethod="GetCompletionList"
MinimumPrefixLength="2"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="12">
</cc1:AutoCompleteExtender>
AUTOCOMPLETE.VB
Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports System.Collections.Generic
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class AutoComplete
Inherits System.Web.Services.WebService
Dim myConn As New SqlConnection(ConfigurationManager.ConnectionStrings("fvConn").ConnectionString)
Dim myComm As New SqlCommand
<WebMethod()> _
Public Function GetCompletionList(ByVal prefixText As String, ByVal count As Integer) As String()
Dim read As SqlDataReader
myComm = New SqlCommand("SELECT FirstName + ' ' + LastName AS NombreCompleto FROM Person.Contact" _
+ " WHERE FirstName Like '" & prefixText & "%' Or LastName Like '" & prefixText & "%' ", myConn)
myConn.Open()
read = myComm.ExecuteReader()
Dim items As New List(Of String)
While (read.Read())
items.Add(read("NombreCompleto"))
End While
myConn.Close()
Return items.ToArray
End Function
End Class
Posted in 
Entradas
No Response to "Autocompletar con AJAX Utilizando un WebServices (Autocomplete)"
Publicar un comentario