Saludos, en este ejemplo veremos como implementar una solución que involucre la utilizacion del Control de AJAX llamado AutoCompleteExtender. La idea es que el control sea vinculado con un TextBox común, luego en segundo plano deberá hacerse una llamada a una web service residente en la aplicación, la cual a su vez incluirá un método que se conecta con la base de datos Northwind, de la cual obtenemos los datos que requerimos para mostrar el cuadro de autocompletar apenas el usuario comience a digitar uinformación en el TextBox Común. Cabe señalar que para efectos de este ejercicio trabajaremos con la tabla Customers de la mencionada base de Datos.
Requisitos para el ejemplo:
- Visual Studio / Visual Web Developer Express Edition 2005
- AJAX Extensions instaladas
- AJAX Control Toolkit instalado
- SQL Server 2005 Express Edition con la base de datos Northwind
1. Abra Visual Studio o Visual Web developer, asegúrese de utilizar la plantilla, tal como se muestra en la figura, coloque el nombre que desee para este ejemplo.
2. En la página Default.aspx no requerimos de demasiado diseño, lo único que involucra el diseño representa la inclusión de un TextBox común y del control de AJAX AutoCompleteExtender. Diseñe según la imagen:
3. Por ahora vamos a dejar asi el diseño de la página Default.aspx, necesitamos crear nuestra web service, para lo cual vamos al menú webSite y hacemos click en "Add New Item", de las plantillas disponibles hacemos click en "web service", como nombre de nuestra web service simplemente colocamos "MyWebService", note que los archivos de web service son de extensión "asmx".
4. Una vez agregada la webservice, note que el Solution Explorer incluye un archivo asmx, y un archivo de código bajo una carpeta llamada App_Code, el archivo tiene la extensión "vb", (en este caso). Hacemos doble click en este archivo para codificar nuestra web service. haga click sobre la imagen para verla en tamaño normal:
5. Verifique que haya escrito el código como en la imagen, ahora necesitamos probar si la web service devuelve los resultados esperados.En el Solution Explorer haga click con el botón derecho sobre el archivo "MyWebService.asmx" y escoja la opción "View in Browser". Debe mostrarse una página como la que se ve en la imagen:
Ahora haga click en elnombre del método "GetCustomer", la pantalla debe actualizarse como sigue:
Escriba los valores que se observa en la figura, (son datos de ejemplo), luego haga click en "Invocar", de no mediar errores, el resultado debe ser como sigue:
6. Ahora que ya comprobamos que la web service funiona, regresamos a la página Default.aspx y configuramos lo siguiente:
- El ScriptManager debe conocer de nuestra web service
- Modificamos las propiedades fundamentales del control AutoCompleteExtender
Visualizando la vista "Source", debe quedar como sigue:
7. Una vez comprobadas las propiedades y la codificación anterior necesitamos probar si tanto esfuerzo valió la pena. En el Solution Explorer haga click con el botón derecho sobre la página "Default.aspx" y luego en "View in Browser" . El Resultado debe ser como sigue:
8. Listo, ya tenemos el resultado, como dato adicional y de acuerdo a sus gustos Ud. puede (y debe) crear un archivo StyleSheet.css y referenciarlo en la página aspx, como se ha mostrado en el punto 6. Puede usar como referencia el presentado a continuación:
Finalmente, traten de adecuar este ejemplo para sus aplicaciones de la manera que consideren conveniente.
no funciona
ResponderEliminar