Monday, May 14, 2012

AJAX - Twitter Control

The Twitter control is an ASP.NET AJAX control that enables you to display Twitter status messages (tweets) from Twitter.com. This control has two modes: Profile and Search. In Profile mode, you can display the tweets from a particular user by supplying the user's Twitter screen name. In Search mode, you can display all tweets which match a search query.

We can display recent tweets by using Timer Control and AsyncPostBackTrigger.

Lets see how to use twitter control in asp.net.

Step 1
First you need to download latest AJAX control toolkit(May 2012 Release) from the following Link.

Step 2
Create a web application and give solution name as SolTwitter.

Step 3
Add Ajax control toolkit on Toolbox tab.

Step 4
Add a ToolkitScriptManager control from Ajax toolkit inside the Div Tag,it is look like this

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

This control allows you to replace the default <asp:scriptmanager> control behavior, and supports the ability to dynamically merge multiple client-side Javascript scripts into a single file that is downloaded to the client at runtime. 

Step 5
Drag and drop an Update Panel on the page.it's look like this 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" >
     <ContentTemplate>
     </ContentTemplate>
</asp:UpdatePanel>


Step 6
Drag and Drop two twitter control on page inside the Updatepanel content template.Twitter Control has 2 modes: Profile and Search. By setting this property we can display tweets accordingly.in first twitter control we have to set profile mode property and another one we have to set Search mode property,it is look like this 
<table border="0" cellpadding="2" cellspacing="2" width="70%" align="center">
                                <tr>
                                    <td><h2>Profile</h2></td>
                                    <td><h2>Search</h2></td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Twitter ID="TwitterProfile" runat="server" Mode="Profile"  
                                            ScreenName="billgates" IsLiveContentOnDesignMode="True" Count="5">
                                        </asp:Twitter>
                                    </td>
                
                                    <td>
                                        <asp:Twitter ID="TwitterSearch" runat="server" Mode="Search" 
                                            Search="JQuery" Caption="JQuery" Title="JQuery" 
                                            IsLiveContentOnDesignMode="True" Count="5" CacheDuration="1">
                                        </asp:Twitter>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <asp:Label ID="lblTime" runat="server"></asp:Label>
                                    </td>
                                </tr>

                                 
                            </table>


Twitter Properties

  • Mode - either Profile or Search mode.
  • ScreenName - required in Profile mode. The Twitter user to display.
  • Search - required in Search mode. The search to perform. You can build complex queries with search operators
  • Count - number of status messages (tweets) to display. The default value is 5.
  • CacheDuration - amount of time to cache results from Twitter in seconds. The default value is 300 seconds.Twitter limits the number of times that you can interact with their API in an hour.the Twitter control caches results on the server a duration of 5 minutes. You can modify the cache duration by assigning a value (in seconds) to the Twitter control's CacheDuration property.
  • Title - enables you to display title text in the header. In Profile mode, the default value is the full user name.
  • Caption - enables you to display caption text in the header. In Profile mode, the default value is the user screen name.


Step 7
Now use timer control to refresh whole page at certain intervals with each postback.Only the contents of the UpdatePanel control will be updated.Add a timer control below the toolscriptmanager and set timer interval as 1. 


<asp:Timer ID="TimerTweet" runat="server" Interval="1" ontick="TimerTweet_Tick">
</asp:Timer>

Step 8
Add AsyncPostBackTrigger in Update Panel Control to invoke timer control,it is look like this
<Triggers>
                        <asp:AsyncPostBackTrigger ControlID="TimerTweet" EventName="Tick" />
                    </Triggers>

Step 9
Add a below code in Timer_Tick Event,it display current time on page,it is look like this


protected void TimerTweet_Tick(object sender, EventArgs e)
    {
        try
        {
            lblTime.Text = DateTime.Now.ToLongTimeString();
        }
        catch (Exception)
        {
            
        }
    }


Full .Aspx Code
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>

        <asp:Timer ID="TimerTweet" runat="server" Interval="1" ontick="TimerTweet_Tick">
        </asp:Timer>


                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" >
                    <ContentTemplate>
                          <table border="0" cellpadding="2" cellspacing="2" width="70%" align="center">
                                <tr>
                                    <td><h2>Profile</h2></td>
                                    <td><h2>Search</h2></td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Twitter ID="TwitterProfile" runat="server" Mode="Profile"  
                                            ScreenName="billgates" IsLiveContentOnDesignMode="True" Count="5">
                                        </asp:Twitter>
                                    </td>
                
                                    <td>
                                        <asp:Twitter ID="TwitterSearch" runat="server" Mode="Search" 
                                            Search="JQuery" Caption="JQuery" Title="JQuery" 
                                            IsLiveContentOnDesignMode="True" Count="5" CacheDuration="1">
                                        </asp:Twitter>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <asp:Label ID="lblTime" runat="server"></asp:Label>
                                    </td>
                                </tr>

                                 
                            </table>

                    </ContentTemplate>

                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="TimerTweet" EventName="Tick" />
                    </Triggers>
                   
                </asp:UpdatePanel>

      
        

    </div>
    </form>
</body>
</html>


Output


Download
Download Source Code

No comments:

Post a Comment