Incorporando ASP.NET AJAX CONTROL TOOLKIT a Webforms

Vamos a usar la librería Open Source  Ajax Control ToolKit que corre sobre el Microsoft ASP.NET AJAX framework para añadir controles con funcionalidad Ajax a nuestro webform.

 

 

 

Primero descargamos el ToolKit de CodePlex: http://www.codeplex.com/wikipage?ProjectName=AjaxControlToolkit

 Para poder utilizarlo en nuestro proyecto tenemos que añadir una referencia al ensamblado del ToolKit que encontraremos en el directorio donde hemos descomprimido el AjaxControlToolkit:

 

 

AjaxControlToolkit.dll

 

Para poder usar los controles añadimos una ficha de componentes en el Toolbox del Visual Studio:

Pulsamos en elegir Items para explorar y buscar el archivo DLL antes mencionado.

Una vez hecho esto ya nos saldrá la ficha con los controles del Ajax ToolKit 2.0.

 Veamos ahora un ejemplo de los pasos que hay que realizar para implementar cualquiera de estos componentes.

 1.- Siempre hay que incluir en el formulario y antes de usar cualquier control un Script Manager o

<asp:ScriptManager ID=»ScriptManager1″ runat=»server»>

    </asp:ScriptManager>

 que va a ser el encargado de manejar las peticiones Ajax.

 Y añadimos la directiva al comienzo de la página (si no se añade cuando arrastremos el nuevo control):

<%@ Register Assembly=»AjaxControlToolkit» Namespace=»AjaxControlToolkit» TagPrefix=»asp» %>

2.-  Para nuestro ejemplo vamos a añadir un Update Panel que se encargue de actualizar alguna parte o contenido del webform, en este caso el ListView del ejemplo del CLIENTE WEB PARA TWITTER:

 

<asp:UpdatePanel ID=»UpdatePanel1″ runat=»server»>

         

            <ContentTemplate>

          <asp:Timer runat=»server» Interval=»10000″ OnTick=»Timer1_Tick» id=»Timer1″>

                </asp:Timer>

         

            <div id=»Twitter» runat=»server»

            stylebackground-color: #000000; font-weight: normal; position: absolute; width: 367px; height: 250px; top: 50px; left: 800px; color: #FFFFFF; overflow: scroll;«>

          

            <asp:ListView ID=»LVTwitter» runat=»server» DataKeyNames=»User»>

                <LayoutTemplate>

                    <table runat=»server» id=»table1″ width=»350px»>

                        <tr runat=»server» id=»itemPlaceholder»></tr>

                    </table>

                </LayoutTemplate>

                <ItemTemplate>

                    <tr valign=»middle» styleborder: thin solid #FF9933″>

                      <td id=»Td1″ valign=»middle»>

                       <strong><asp:Label ID=»LblMensajeTwitter» runat=»server»

                          Text=’<%#Eval(«Text»)%>‘></asp:Label></strong><br />

                          <asp:Image ID=»Image1″ runat=»server» ImageUrl=»images/LOGO.png» Height=»20″ Width=»40″ AlternateText=»date» />&nbsp;<asp:Label ID=»LblFechaMensajeTwitter» runat=»server»

                          Text=’<%#Eval(«CreatedDate»)%> ForeColor=»#009933″></asp:Label>

                      </td>

                    </tr>

                </ItemTemplate>

                <AlternatingItemTemplate>

                 <tr valign=»middle» styleborder: thin solid #FF9933; background-color: #003366; color: #FFFFFF;«>

                      <td id=»Td1″ valign=»middle»>

                       <strong><asp:Label ID=»LblMensajeTwitter» runat=»server» Text=’<%#Eval(«Text»)%>‘></asp:Label></strong><br />

                         <asp:Image ID=»Image1″ runat=»server» ImageUrl=»images/LOGO.png» Height=»20″ Width=»40″ AlternateText=»date» />&nbsp;<asp:Label ID=»LblFechaMensajeTwitter» runat=»server»

                          Text=’<%#Eval(«CreatedDate»)%> ForeColor=»#009933″></asp:Label>

                      </td>

                    </tr>               

                </AlternatingItemTemplate>

 

           

            </asp:ListView>

            </div>

           </ContentTemplate>

        </asp:UpdatePanel>

 

 Veamos un poco el código:

Englobamos todo en el UpdatePanel y encerramos el div en las etiquetas ContentTemplate.

Lo más interesante es que hemos añadido un control Timer:

<asp:Timer runat=»server» Interval=»10000″ OnTick=»Timer1_Tick» id=»Timer1″>

                </asp:Timer>

 que es el que va a controlar cada cuando vamos a refrescar este UpdatePanel.

Podemos actualizar mediante un Timer como este ejemplo o mediante el uso de Triggers. Que ejecutarán una función cuando se produzca un evento sobre un determinado control.

Así, ese Timer al que hemos puesto un intervalo de 10 segundos (10000) va a ejecutar el método llamado Timer1_Tick que  hemos declarado al principio de la página, dentro del HEAD:

<script runat=»server» type=»text/c#»>

  protected void Timer1_Tick(object sender, EventArgs e)

    {

       GetTwitterPosts();

    }

</script>

 

De esta manera cada 10 segundos se actualizará el ListView cargándose en este ejemplo con los estados del Twitter de mi cuenta.

Resumiendo:

1.- Agregar referencia al AjaxControlToolKit.

2.- Añadir el ScriptManager antes de usar el control

3.- Añadir el control y comprobar que se ha incluido la directiva al comienzo de la página.

4.- Particularizar el control.

Podemos ver una explicación y ejemplos de los diferentes controles Ajax del ToolKit en la URL:

http://www.asp.net/ajax/AjaxControlToolkit/Samples/

 

Espero que os haya sido de utilidad.

 

 

2 comentarios sobre “Incorporando ASP.NET AJAX CONTROL TOOLKIT a Webforms”

  1. Buenos días, mi cunsulta es sis e puede limpiar el control AsyncFileUpLoad después de cargar y guardar la data como puedo borrar el contenido???….

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *