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
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.
<asp:ScriptManager ID=»ScriptManager1″ runat=»server»>
</asp:ScriptManager>
<%@ 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»
style=»background-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» style=»border: 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» /> <asp:Label ID=»LblFechaMensajeTwitter» runat=»server»
Text=’<%#Eval(«CreatedDate»)%>‘ ForeColor=»#009933″></asp:Label>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr valign=»middle» style=»border: 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» /> <asp:Label ID=»LblFechaMensajeTwitter» runat=»server»
Text=’<%#Eval(«CreatedDate»)%>‘ ForeColor=»#009933″></asp:Label>
</td>
</tr>
</AlternatingItemTemplate>
</asp:ListView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
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>
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.
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???….
Hola Zonaly, echa un vistazo al siguiente enlace a ver si te ayuda.
http://www.aspsnippets.com/Articles/Clear-contents-of-AsyncFileUpload-Control-after-upload-and-page-revisit.aspx
Un saludo.