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”

            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” />&nbsp;<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” />&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.

 

 

Haciendo un cliente web para Twitter

En estos momentos están en auge las redes sociales y la interrelación entre ellas. Yo puedo tener mi cuenta de Facebook enlazada con la de Twitter, LikedIn y viceversa. En este artículo vamos a ver cómo hacer un cliente web para Twitter utilizando ASP.NET 3.5 y una librería llamada TweetSharp o tweet#  (http://tweetsharp.com/).

Este ejemplo consiste en un textbox con un botón para enviar mensajes a mi cuenta de Twitter y un control ListView para ver mi lista de estados en Twitter.

El uso de esta librería facilita de manera extraordinaria la intercomunicación con Twitter.

Lo primero es descargarla desde su página: http://code.google.com/p/tweetsharp/downloads/list

En ella tenemos bastante y muy clara documentación (en inglés).

 

Comencemos a programar:

1.- Creamos un nuevo proyecto de Visual Studio de Aplicación Web:

Nos fijamos que el framework que utilizamos es el 3.5.

 Ahora en el webform insertamos los siguientes controles:

 Los controles que interesan para probar la aplicación son el cuadro de texto, al cual le he realizado validación para que sea requerido y su longitud no exceda de 140 caracteres (twitter) y el botón de enviar.

Nos fijamos como a mano derecha he puesto un ListView en el que se mostraran mis estados desde ahora (DateTime.Now) hasta la fecha anterior que deseemos.

2.- Añadimos las referencias necesarias a la librería tweet#.

 

La vista de código del ListView del formulario quedaría:

 

<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”>

                      <%–<asp:Label ID=”LblUsuarioTwitter” runat=”server”

                          Text='<%#Eval(“User.Name”)%>’></asp:Label> —%>

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

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

                          <asp:Image ID=”Image1″ runat=”server” ImageUrl=”images/snug_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” style=”border: thin solid #FF9933; background-color: #003366; color: #FFFFFF;”>

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

                      <%–<asp:Label ID=”LblUsuarioTwitter” runat=”server”

                          Text='<%#Eval(“User.Name”)%>’></asp:Label> —%>

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

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

                         <asp:Image ID=”Image1″ runat=”server” ImageUrl=”images/snug_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>

 

 

Donde vemos que los textos de los labels son “Text”, “CreatedDate” que son los campos que recuperamos de cada estado.

Hacemos clic en Add Reference… y la buscamos (Browse)

 

Entonces añadimos esas dos referencias.

 

3.- Ahora es el momento de dotar al formulario de su funcionalidad. Abrimos el codebehind del formulario, o sea el archivo Default.aspx.cs.

Importamos los Namespaces que vamos a utilizar:

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

// Provides access to the fluent API; required

using Dimebrain.TweetSharp.Fluent;

 

// Provides access to the data classes that represent Twitter results

using Dimebrain.TweetSharp.Model;

 

// Provides access to features like relative time, and casting from XML/JSON to

// Twitter data classes

using Dimebrain.TweetSharp.Extensions;

 

como podemos ver los tres últimos son los que vamos a utilizar para utilizar la tweet# API.

 

Dentro de la clase tenemos una variable del tipo indicado que es la que nos va a almacenar la colección de nuestras entradas (estados) en Twitter. Va a contener diversos campos que podemos ver en la documentación como nombre del usuario, fecha de creación del post, texto del mensaje…

 

protected System.Collections.Generic.IEnumerable<Dimebrain.TweetSharp.Model.TwitterStatus> statuses;

 

y ahora pasamos a ver el código del botón. Para generar el evento Click, hacemos doble clic sobre el botón en modo diseño:

protected void BtnEnviarTwitter_Click(object sender, EventArgs e)

    {

        var twitter = FluentTwitter.CreateRequest()

            .AuthenticateAs(“joaquin_sosa”, “password”)

            .Statuses().Update(TxtMsgTwitter.Text)

            .AsJson();

 

        var response = twitter.Request();

        bool resultado = response.IsTwitterError;

    }

 

Como vemos en este método definimos la variable twitter que nos va a permitir insertar un nuevo estado en Twitter.  Crea la petición, se autentica con el usuario y contraseña y luego ejecuta una actualización del estado pasándole lo que escribamos en el cuadro de texto y el resultado lo envía siguiendo JSON.

En la documentación podemos ver diferentes métodos de formato del mensaje XML, JSON, RSS, ATOM…

var response = twitter.Request();

      bool resultado = response.IsTwitterError;

 

Con estas sentencias puedo comprobar si ha ocurrido algún error en la actualización del estado.

 

Perfecto. Ya hemos insertado un nuevo estado en Twitter desde nuestra aplicación.

Pero quiero comprobar que efectivamente se están insertando. Para ello utilizamos el FormView y lo que hacemos es que en el Page_Load cargamos este control.

Defino un método para clarificar el código:

 

private void GetTwitterPosts()

    {

     

        var twitter = FluentTwitter.CreateRequest()

            .AuthenticateAs(“joaquin_sosa”, “password”)

            .Statuses().OnUserTimeline().AsJson();

 

        // llamada secuencial a los datos

        var response = twitter.Request();

 

        // convertimos la respuesta a clases de datos  

        statuses = response.AsStatuses();

 

 

        if (LVTwitter != null)

        {

            LVTwitter.DataSource = statuses.Since((DateTime.Now).AddDays(-15));

            LVTwitter.DataBind();

        }

 

    }

Nos fijamos primero que después de autenticarnos pedimos los estados en la línea de tiempo del usuario (OnUserTimeline) y los formateamos en JSON. Podemos ver en la documentación todo lo que podemos obtener a partir del Statuses (OnHome, OnList, OnPublic…).

 

Obtenemos los datos y los convertimos y finalmente le decimos el orígen de datos al ListView.

Yo he añadido la extensión Since que me permita especificar desde cuando quiero recibir los estados.

Y hacemos el DataBind del control.

Finalmente en el Page_Load hacemos

if(!IsPostBack)

            GetTwitterPosts();

 

Y listo, ya podemos ver nuestros estados a partir de una determinada fecha en el ListView de la derecha. Ahora podríamos añadir funcionalidad AJAX a este control, para la próxima.

 

Por fin en Geeks

Después de tanto visitar la comunidad y de enriquecerme con sus contenidos, ha llegado la hora de formar parte de ella y de aportar mi granito de arena a esta inmensa playa kilométrica de conocimiento y evolución continua.

Este sitio es el mejor canal de comunicación para poder escribir contenidos relacionados con nuestro mundo cotidiano y nuestras vivencias profesionales.

Espero estar a la altura de la comunidad y contribuir con mis conocimientos a aumentar los tuyos. Tengo un blog personal alternativo en el que iré publicando también diversos contenidos:  http://www.joaquinsosa.com y por supuesto nos vemos en Second Nug. (http://www.secondnug.com)

Gracias a todos por dejarme un hueco aquí y en especial a Toni y a Rodrigo por todo ello. Gracias a todos los Second Nug Boys.