DOTNET POINT: JQuery display time in facebook/ twitter formats like minute ago, hour ago, week ago in asp.net

Introduction:

In this article I will explain how to show time in facebook/ twitter formats like minute ago, hour ago, week ago in asp.net using JQuery.

Description:

In previous posts I explained many articles relating to JQuery. Now I will explain another article relating to JQuery. If we share anything on facebook or twitter we will get time in different format like 1 minute ago, 1 hour ago, 1 week ago etc.

To implement this concept I am using previous post Repeater example in asp.net. After bind data to repeater control our date and time would be like this

We can change date and time format like facebook / twitter style (minute ago, hour ago, month ago etc) by using JQuery timeago plugin. This plugin automatically update our datetime without having any postback of page you can get this JQuery timeago plugin by downloading attached folder.

Before use this plugin I used other methods to change date and time format like facebook/twitter but I got one problem that is now I opened website during that time that is showing 1 minute ago. I stayed on that website upto 5 minutes but still that is showing 1 minute only if I refresh website then datetime value is updating but this JQuery timeago plugin automatically update our datetime without having any postsbacks.

To implement this one check previous post Repeater example in asp.net I am using same concept just adding new logic to change date and time format

After design data table and insert data in database by using above repeater post write the following code in your aspx page to bind data o repeater control

<title>Sample to Display time in facebook/twitter format like 1 minute ago, 1 hour ago, 1 week ago, 1 month ago</title>

jQuery(document).ready(function($) {

prepareDynamicDates();

$("label.timeago").timeago();

});

</script>

</head>

<body>

<div>

<asp:Repeater ID="RepDetails" runat="server">

<b>Comments</b>

</td>

</tr>

</HeaderTemplate>

<td>

<tr>

<td>

Subject:

<asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Subject") %>' Font-Bold="true"/>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblComment" runat="server" Text='<%#Eval("Comment") %>'/>

</td>

</tr>

<tr>

<td>

<tr>

<td>Created Date: <label class="timeago" title="<%#Eval("PostedDate") %>" style=" font-weight:bold"></label></td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</ItemTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</div>

</form>

</body>

</html>

If you observe above code in header section I added some of script files by using those files we can change date and time. To get those files download attached sample code and use it in your application.

Another thing here we need to know is label link

<label class="timeago" title="<%#Eval("PostedDate") %>" style=" font-weight:bold"/>

JQuery timeago plugin automatically change time format for label elements with class="timeago" and title.

After completion of aspx page design add following namespaces in code behind

C# Code

using System;

using System.Data;

using System.Data.SqlClient;

using System.IO;

After add namespace write the following code

private SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindRepeaterData();

}

//Bind Data to Repeater Control

protected void BindRepeaterData()

{

con.Open();

SqlCommand cmd = new SqlCommand("select * from Repeater_Table Order By PostedDate desc", con);

DataSet ds = new DataSet();

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(ds);

if (ds.Tables[0].Rows.Count > 0)

{

RepDetails.Visible = true;

RepDetails.DataSource = ds;

RepDetails.DataBind();

}

else

{

RepDetails.Visible = false;

}

con.Close();

}

VB.NET Code

Imports System.Data

Imports System.Data.SqlClient

Imports System.IO

Partial Class _Default

Inherits System.Web.UI.Page

Private con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then

BindDataList()

End If

End Sub

Protected Sub BindDataList()

con.Open()

'Query to get ImagesName and Description from database

Dim command As New SqlCommand("SELECT ImageName,Description from SlideShowTable", con)

Dim da As New SqlDataAdapter(command)

Dim dt As New DataTable()

da.Fill(dt)

dlImages.DataSource = dt

dlImages.DataBind()

con.Close()

End Sub

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)

'Get Filename from fileupload control

Dim filename As String = Path.GetFileName(fileuploadimages.PostedFile.FileName)

'Save images into SlideImages folder

fileuploadimages.SaveAs(Server.MapPath("SlideImages/" & filename))

'Open the database connection

con.Open()

'Query to insert images name and Description into database

Dim cmd As New SqlCommand("Insert into SlideShowTable(ImageName,Description) values(@ImageName,@Description)", con)

'Passing parameters to query

cmd.Parameters.AddWithValue("@ImageName", filename)

cmd.Parameters.AddWithValue("@Description", txtDesc.Text)

cmd.ExecuteNonQuery()

'Close dbconnection

con.Close()

txtDesc.Text = String.Empty

BindDataList()

End Sub

End Class

Now run your application check the output that would be like this

After open your website stay on that website for 1 or 2 minutes and check your time in website that will be updated automatically.

Download sample code attached

DOTNET POINT

Thursday 23 February 2012

JQuery display time in facebook/ twitter formats like minute ago, hour ago, week ago in asp.net

No comments:

Post a Comment