TUTORIAL- AutoComplete Extender, Autocompletando desde la Base de datos

Si bien muchas veces hablamos de lo último que viene saliendo, también hay que darse un tiempo de hablar sobre lo que está y se utiliza poco, he visto a varios desarrolladores ASP.NET que no aprovechan este herramienta del Ajax Control Toolkit, de hecho fue por esto que me propuse la tarea de hacer un ScreenCast y un artículo que cada uno de los controles del Ajax Control Toolkit. Pero basta de hablar de mi, hablemos del Control AutoComplete.

Recuerda siempre que puedes ver los demos, y bajar la Suite en el sitio de ASP.NET

Cual es la Idea del Control

La idea es que puedas tener una funcionalidad muy similar a la que tienes en Google, que va completando con sugerencias, a medida que vas escribiendo en la caja de texto.

image 

Nuestro Ejemplo, un buscador de películas

EL primer paso va a ser crear nuestra base de datos de Películas,  voy a agregar unas 15 películas para tener datos, la estructura es la siguiente:

image

Nuestro segundo Paso va a ser la creación de la Interfaz de Usuario. (Los colores son simple casualidad)

image

Nuestro tercer paso , será crear el WebService que nos va a permitir obtener los datos para el autocompletar:

image

Luego, Cuarto Paso va a ser codificar nuestro WebService:

  <WebMethod()> _

Public Function ObtListaPeliculas(ByVal prefixText As String, ByVal count As Integer) As String()

Dim con As New SqlConnection (ConfigurationManager.ConnectionStrings("EjemploConString").ConnectionString)

Dim comando As New SqlCommand("select PeliculaNombre from Peliculas where PeliculaNombre  LIKE ‘%’ + @param + ‘%’ ", con)
comando.Parameters.AddWithValue("param", prefixText)
        Dim dr As SqlDataReader
        comando.Connection.Open()
        dr = comando.ExecuteReader
        Dim lista As New List(Of String)
        While dr.Read
            lista.Add(dr.Item("PeliculaNombre"))
        End While
        comando.Connection.Close()
        Return lista.ToArray
    End Function

Si bien el código no quedo muy ordenado en el post, veamos a grosso modo lo que realiza, los parámetros de entrada son obligatorios, y aunque no los estamos utilizando, como decíamos, deben ir. En el código hacemos una consulta con Like, para ver las coincidencias en cualquier parte del texto del campo PeliculaNombre, luego recorremos estas coincidencias y las vamos guardando en una lista de String, para luego retornarlas, según nuestro ejemplo (y como lo veras abajo) este webservice se va a ejecutar cuando escribamos 2 letras en el Textbox.

Nuestro Quinto Paso , será extender nuestro control TextBox , cabe recordar que yo ya tengo instalado en mi Visual Studio el Ajax Control Toolkit 3.5. Si no lo tienes, debes ir a la página

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

En donde puedes ver una demo del control y además descargar la Suite.

image

Luego, como decíamos , extendemos el control, y seleccionamos la AutoCompleExtender

image

Esta acción nos va a generar el siguiente código declarativo, lo cual no es suficiente, deberemos configurar más opciones para que nuestro ejemplo funcione. También recuerda agregar un control ScripManager en tu página, es indispensable para que nuestro control funcione.

Código Generado:

<cc1:AutoCompleteExtender ID="tx_buscar_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="" TargetControlID="tx_buscar">                    </cc1:AutoCompleteExtender>

Y lo que tenemos que configurar:

<cc1:AutoCompleteExtender ID="tx_buscar_AutoCompleteExtender" runat="server" enabled="True"
servicepath="BuscarPeliculas.asmx" minimumprefixlength="2" servicemethod="ObtListaPeliculas" enablecaching="true" targetcontrolid="tx_buscar" usecontextkey="True" completionsetcount="10"                                completioninterval="200" >
</cc1:AutoCompleteExtender>

Y Veamos los parámetros importantes:

  • servicepath : Corresponde al nombre del Webservice.

  • ServiceMethod : Corresponde al nombre del WebMethod del WebService
  • minimumprefixlength: corresponde a la cantidad mínima de caracteres antes de que se llame al WebService, esto es importante, ya que si dejas la cantidad mínima para un gran conjunto de datos, por la naturaleza del filtro, puede que tu consulta se demore un buen resto antes de entregar los datos.

  • targetcontrolid: Corresponde al control textbox en el que se va a ingresar el texto.

  • CompletionSetCount: Corresponde a la cantidad de resultados que quieres que se muestren en el autocomplete.
  • CompletionInterval : Corresponde a la cantidad de milisegundos antes de que se muestre la lista.

Para ver más detalles puedes ir a:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx

Sexto Paso: Ahora a probarlo!

Al escribir Los  por la naturaleza de la Query (La sentencia Like que va a buscar la coincidencia de la cadena de texto en cualquier parte del campo a consultar) vamos a obtener:

image

Ahora veámoslo en Acción, con un Video 🙂

DESCARGA TODO EL EJEMPLO ACA

Espero que te sirva, cualquier duda o comentario, no dudes en consultar 🙂
Saludos y Feliz Año nuevo 2010!

Gonzalo

WebCast para UOC DotNetClub – Novedades de ASP.NET 4

Club.Net UOC : Conoce las novedades de ASP.NET 4.0

Hola , tengo el honor de poder dar un Webcast sobre ASP.NET 4.0 para la gente de UOC DotNetClub  ,  le agradezco mucho a Jesus Bosh quien hizo las gestiones. (visiten su blog, esta muy bueno!). Es el 19 de febrero, a las 19:00 horas (Hora Madrid).

El link de Registro es:
http://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032439032&EventCategory=4&culture=es-ES&CountryCode=ES

Información general del Evento
Idiomas:
Español.

Audiencia(s):
Programador/desarrollador de programas.

Duración:
90 Minutos

Fecha de Inicio:
viernes, 19 de febrero de 2010 19:00 Madrid, París

Club.Net UOC : Conoce las novedades de ASP.NET 4.0
Descripción:
Conoce las principales novedades en el nuevo release de ASP.NET, en su versión 4.0, revisaremos nuevas características que nos permiten aumentar nuestra productividad al momento de desarrollar WebSites, veremos demos del nuevo manejo del ClientID, mejoras en el manejo del Viewstate, Routing, Microsoft Ajax Library, Client Templates, Dyinamic Data WebSite y más”
Ponente: Gonzalo Pérez

PD: Si estas en Chile, es GMT(-4) por que puedes ver este Webcast a las 15:00 horas.

Si estas en otras país y quieres ver a que hora corresponde en tu zona te recomiendo:
http://www.recursosvoip.com/comun/worldtime.htm

Los Espero!
Saludos,
Gonzalo

Por si te lo perdiste, la recopilación de ScreenCast de Fin de Año

Hola! quería hacer una recopilación de los principales screencast que hice durante el año MVP, jejejej, espero que te sean de ayuda, por si no viste alguno. Sobre el control gauget lo tengo algo abandonado, pero ahora retomo funciones. El RoadMap es :

  1. Conectar el control con PHP (ejemplos con Jquery ,Mysql y PHP)
  2. Migrar el control a Silverlight 4

Por mientras te dejo los Screencast de los que hablaba.

Silverlight 3
http://geeks.ms/blogs/gperez/archive/2009/10/18/screencast-mi-primer-desarrollo-con-silverlight-3.aspx

Ajax Control Toolkit – Sea Dragon
http://geeks.ms/blogs/gperez/archive/2009/10/04/screencast-utilizando-el-nuevo-control-seadragon-del-ajax-controltoolkit.aspx

Jquery- Filtar una grilla al presionar una tecla (muy bueno!)
http://geeks.ms/blogs/gperez/archive/2009/05/22/tips-filtrar-un-gridview-con-jquery-al-presionar-una-tecla.aspx

Patrones de Diseño
Prototype:
http://geeks.ms/blogs/gperez/archive/2009/09/01/patrones-de-dise-241-o-screencast-capitulo-4-patr-243-n-prototype.aspx

Builder
http://geeks.ms/blogs/gperez/archive/2009/08/28/patrones-de-dise-241-o-screencast-capitulo-3-patr-243-n-builder.aspx

Factory
http://geeks.ms/blogs/gperez/archive/2009/08/24/patrones-de-dise-241-o-screencast-capitulo-2-patr-243-n-factory.aspx

Singleton
http://geeks.ms/blogs/gperez/archive/2009/08/22/patrones-de-dise-241-o-screencast-capitulo-1-patr-243-n-singleton.aspx

Mi Súper Control ChalaGauget (Me dio varias satisfacciones saber que gente ya lo estaba ocupando, es totalmente gratis, y si necesitas ayuda para configurarlo, solo me escribes y yo participo en ello)
http://geeks.ms/blogs/gperez/archive/2009/07/13/gauge-mi-control-gauge-silverlight-versi-243-n-beta1-liberada-para-siempre-gratis.aspx

Gadget en Windows 7
http://geeks.ms/blogs/gperez/archive/2009/06/25/screencast-de-desarrollo-de-gadgets-en-windows-7.aspx

Saludos,
Gonzalo

[Off-Topic] Recomendable DELL Studio 1557 con Intel Core i7

Hola, no soy el más tuerca en esto del Hw, sin embargo ya tenia que cambiar mi Notebook Toshiba M105-sp381, es un Centrino duo que se ha portado de maravillas, esta un poco “enchulado” con 4Gb de RAM y disco de 320Gb de 7200 rpm, es un equipo que tiene un poco más de tres años, por lo que tiene mucho código que ha pasado por él , así como también muchas presentaciones (y caídas y todo eso).

Foto del siempre noble Toshiba , junto a Diablo de Blizzard

100_1841

Elegí dentro de mis posibilidades el excelente DELL Studio 15, con procesador Intel i7, de hecho cuando lo compre vía fono, no estaba esta opción, a los dos días hubo vi una publicidad, y yo, que casi me kag…!, llamé de inmediato a Dell y sin mayor costo cambiaron el procesador (lo que incluye varias mejores, como placa, memorias, etc) , de hecho el valor con un core 2 duo era de 660.000 pesos chilenos y con i7 era de 680.000clp, lo que le incluí , fue una pantalla Full HD, ya saben el código es todo, y los IDE están cada vez más llenos de barras, ejejjee.

Kratos junto al Dell Studio 15.

 

 

100_1842

Ahora un par de índices de performance:

Lo primero que me sorprendió fue el administrador de tareas, los 8 núcleos, (4 físicos) de la máquina, para ser un notebook, ufff, llama la atención.

image

Índice de Experiencia de Usuario con Windows 7, creo que es muy bueno para un portátil de menos de 2000 dólares no?

image image

Un chekeo de performance rápido con Everest 4.60 

Velocidad Lectura de Memoria:
image

Velocidad de Escritura de Memoria:
image

Velocidad de Copia en Memoria:
image

Latencia:
image

CPU Queen (aca ya bajamos, pero lo estamos comparando con equipos de escritorio)

image

 

CPU PhotoWorxx

image

CPU Zlib
image

Bueno, luego vi que en Everest podemos sacar un reporte en donde puedes ver en detalle el HW, lo otro que me gusto es que tiene teclado Retro-Iluminado (muy útil!) Batería de 9 celdas (hasta 3 horas y 45 minutos de autonomía) y Tarjeta Gráfica ATI Radeon HD 4570, con 512 Mb Independientes de la RAM Principal.

Baja el Informe de Everest

Tengo que destacar que el vendedor de DELL se portó excelente y me ofreció promociones, que resultaron en un portátil excelente y menor precio, de hecho al final de la compra te piden que los recomiendes, yo lo voy a hacer por la buena onda que tuvo.

Asesor de Ventas: Carlos Cardona
Dirección de Correo Electrónico: carlos_cardona (a_r_r_o_b_a) dell.com
Teléfono: 685-6800 ext: 5086369

No te aburro más :P, que estén bien!
Saludos,
Gonzalo

[Tips] Banner Rotativo con ASP.NET y JQuery

Hola que tal, acá va un pequeño tips de como hacer un banner que vaya cambiando de manera cíclica, si bien hay controles del lado del server que hacen esto, o la posibilidad de que con el control timer,más un updatepanel podamos realizar esto, creo que es mejor simplificar y no sobrecargar nuestra página con scripts generados.(No digo que sean malas técnicas, de hecho Microsoft Ajax me parece excelente, pero para un banner rotativo, simplifiquemos el asunto)

Primero: La Tabla que contiene los datos de los Banners

image

En donde vamos a tener el id, el texto alt, la url de la imagen y en link a donde nos vamos a dirigir cuando hagamos click.

Segundo: El script Jquery  y Net  para el Banner

Vamos a utilizar un plugin para Jquery que lo puedes descargar y ver las demos en http://malsup.com/jquery/cycle/ , tiene muy buenos efectos, en particular esta vez utilizaremos el efecto de Fade.

– Código JavaScript
<script src=”js/jquery-1.3.2.min.js” type=”text/javascript”></script>

<
script src=”js/jquery.cycle.all.min.js” type=”text/javascript”></script
<script type=”text/javascript”>
    $(document).ready(function() {
         $(‘.slideshow’).cycle({
             fx: ‘fade’ 
          });
     });
</script>

-Código Declarativo

<
div id=”banner”>
<div class=”slideshow”>
    <asp:Literal ID=”literal_banner” runat=”server”></asp:Literal>
</div>
</div> 

– CSS para el Ejemplo

.slideshow
{ height: 130px; width: 792px; }
.slideshow img { padding: 0px; }

– Código NET

Voy a utilizar un Dataset  más su TableAdapter para que rápidamente tenga acceso a los datos de los banners a mostrar:

image

Y el código a utilizar:

Dim ta As New MiBannerDSTableAdapters.bannersTableAdapter
   For Each img As MiBannerDS.bannersRow In ta.GetData
     literal_banner.Text &= “<a href='” & img.banner_link & “‘><img src='” & img.banner_imgUrl & “‘ alt='” & img.banner_alt & “‘ width=””792px”” height=””130px”” /></a>”
   Next
End Sub

Como vez, lo que estoy haciendo simplemente es escribir en el literal el código HTML recorriendo la colección de DataRows que son devueltos por el tableAdapter, obviamente lo puedes hacer también con DataReades, Linq, EF,etc.

Cuarto : Configurar para ocultarlo, puede que el usuario quiera tener toda la pantalla disponible para su uso.

Hay veces que el banner puede molestar al usuario, el cual desea más área de trabajo en la pantalla, entonces sería bueno poder darle esta opción al usuario, por lo que vamos a tener un link de Mostrar y Ocultar Pantalla. La idea es que pinche sobre una etiqueta y se oculte el banner, luego se pinche sobre la misma etiqueta y aparezca nuevamente el Banner.

Código JavaScript

$(“#msg”).click(function() {
     if ($(“#msg”).html() == ‘[-]Banner’) {
         $(“#msg”).html(‘[+]Banner’);
         $(“#banner”).slideUp(1500);
    
} else {
        
$(“#msg”).html(‘[-]Banner’);
         $(“#banner”).slideDown(1500);
     }
});

– Etiqueta HTML

<span id=”msg”>[-]Banner</span>

Resultado Final 

image 

El cual va cambiando con un efecto de FADE, además si apretamos [-]Banner se oculta con un efecto de slideUp.

 image

Te dejo entonces el Ejemplo (con base y todo) para que lo pruebes.

DESCARGALO ACÁ

Espero que te haya servido,
Saludos,
Gonzalo