Introduction
Most of the websites dealing with dynamic content store date information of
various pieces of content that are managed by the system. Blog engines, micro-blogging
applications, content management systems and social networking sites are a few
such examples. Though these applications store dates in database-specific formats while displaying dates to the end user, such applications often
format it differently. One such popular format is "time ago" wherein the time span
elapsed since the content was published is displayed. Some examples of how Facebook displays
time ago stamps are — "5 hours ago", "Yesterday at 6:10 am" and
"October 10 at 6:20 am". In this article you will learn how to
display such "time ago" stamps using ASP.NET and AJAX.
Example Scenario
Let's assume that you have a simple Guestbook on your blog or website where
readers can post feedback and comments. The Guestbook page
allows the readers to submit their name, email, subject and message. Upon
submission the message is displayed with the "time ago" stamp along with the
previously submitted entries.
Software Needed
In order to work through the example that follows you need to have ASP.NET
3.5 or later. Though the example is developed using Visual Studio 2008, you can
use Visual Studio 2010 or Visual Web Developer Express Edition. Additionally,
you need SQL Server 2005 / 2008 database as our data will be stored there.
Creating a Database Table
To begin, create a database table in SQL Server named Guestbook. The
structure of Guestbook table is shown in Figure 1.
Figure 1
The Guestbook table consists of six columns named Id, FullName, Email,
Subject, Message and PostedOn. Notice that the Id column is an identity column.
Creating a Website
Now create a new website in Microsoft Visual Studio. Name the site TimeAgoDemo
(Figure 2).
Figure 2
Open the default Web form and place two SQL Data Source (SDS) controls on it.
Configure one of the SDS to INSERT records into the Guestbook table. Figure 3
shows the relevant configuration of SDS.
Figure 3
Configuring SDS this way will generate the following SDS markup in the .aspx
file (unnecessary markup has been omitted for the sake of clarity).
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:TestDbConnectionString %>"
InsertCommand="INSERT INTO [Posts] ([FullName], [Email], [Subject], [Message], [PostedOn])
VALUES (@FullName, @Email, @Subject, @Message, @PostedOn)"
<InsertParameters>
<asp:Parameter Name="FullName" Type="String" />
<asp:Parameter Name="Email" Type="String" />
<asp:Parameter Name="Subject" Type="String" />
<asp:Parameter Name="Message" Type="String" />
<asp:Parameter Name="PostedOn" Type="DateTime" />
</InsertParameters>
</asp:SqlDataSource>
Similarly, configure the other SDS to select all records from the Guestbook
table and also add an ORDER BY clause, as shown in Figure 4. This way, the latest entries
will be displayed on top.
Figure 4
The following markup shows the markup of a second SDS.
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:TestDbConnectionString %>"
SelectCommand="SELECT * FROM [Posts] ORDER BY [PostedOn] DESC">
</asp:SqlDataSource>
Notice how the database connection string is referred from the web.config file.