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.
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.
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 thisIn 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.
 |
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
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Sample to Display time in facebook/twitter format like 1 minute ago, 1 hour ago, 1 week ago, 1 month ago</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.timeago.js" type="text/javascript"></script>
<script src="js/test_helpers.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
prepareDynamicDates();
$("label.timeago").timeago();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="RepDetails" runat="server">
<HeaderTemplate>
<table style=" border:1px solid #df5015; width:500px" cellpadding="0">
<tr style="background-color:#df5015; color:White">
<td colspan="2">
<b>Comments</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color:#EBEFF0">
<td>
<table style="background-color:#EBEFF0;border-top:1px dotted #df5015; width:500px" >
<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>
<table style="background-color:#EBEFF0;border-top:1px dotted #df5015;border-bottom:1px solid #df5015; width:500px" >
<tr>
<td>Post By: <asp:Label ID="lblUser" runat="server" Font-Bold="true" Text='<%#Eval("UserName") %>'/></td>
<td>Created Date: <label class="timeago" title="<%#Eval("PostedDate") %>" style=" font-weight:bold"></label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</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
3 comments
commentsfull code and example of time ago its working properly
Replyhttp://codeinaspdotnet.blogspot.in/2017/08/time-ago-in-aspnet-c.html
Really thankful that you have shared very informative information. If you want know custom business card boxes.
ReplyDisplay Time Formats Like Minute Ago, Hour Ago, Week Ago In Asp.Net - Complete .Net Tutorial >>>>> Download Now
Reply>>>>> Download Full
Display Time Formats Like Minute Ago, Hour Ago, Week Ago In Asp.Net - Complete .Net Tutorial >>>>> Download LINK
>>>>> Download Now
Display Time Formats Like Minute Ago, Hour Ago, Week Ago In Asp.Net - Complete .Net Tutorial >>>>> Download Full
>>>>> Download LINK