December 2009 - Artículos
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.
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:
Nuestro segundo Paso va a ser la creación de la Interfaz de Usuario. (Los colores son simple casualidad)
Nuestro tercer paso , será crear el WebService que nos va a permitir obtener los datos para el autocompletar:
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.
Luego, como decíamos , extendemos el control, y seleccionamos la AutoCompleExtender
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:
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
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
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
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.
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.
Índice de Experiencia de Usuario con Windows 7, creo que es muy bueno para un portátil de menos de 2000 dólares no?
Un chekeo de performance rápido con Everest 4.60
Velocidad Lectura de Memoria:
Velocidad de Escritura de Memoria:
Velocidad de Copia en Memoria:
Latencia:
CPU Queen (aca ya bajamos, pero lo estamos comparando con equipos de escritorio)
CPU PhotoWorxx
CPU Zlib
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
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
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:
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
El cual va cambiando con un efecto de FADE, además si apretamos [-]Banner se oculta con un efecto de slideUp.
Te dejo entonces el Ejemplo (con base y todo) para que lo pruebes.
DESCARGALO ACÁ
Espero que te haya servido,
Saludos,
Gonzalo
Hola!, estaba navegando para encontrar unos script de Jquery, y me encontré con este, JQuery Ribbon, esta bastante fácil de usar, quería compartirlo con ustedes, miren que bueno esta:
Con posibilidad de cambiar los tags:
Bájalo desde acá:
http://jqueryribbon.codeplex.com/
Saludos!
Gonzalo.