Displaying Time Spent on Page in VB.NET


V4 Ajax Tutorials
Server Intellect Cloud Hosting

Displaying Time Spent on Page in VB.NET

In this tutorial, we will be looking at how to use AJAX to dynamically display the time spent on a web page.

This tutorial was written with ASP.NET 3.5 using Visual Studio 2008. If you are using 2005 with ASP.NET 2.0, then you will need to download the AJAX Extensions from Microsoft.

In order to display the time spent on the page, we will have to create an UpdatePanel that updates every second. In order for this to not affect the rest of the page, we will put other functionality in another Update Panel. To programmatically update the time, we will use an AJAX Timer control. But first, let us begin by adding a ScriptManager control to our ASPX page:

<asp:ScriptManager ID="SM1" runat="server" />

The next thing to do is add our UpdatePanel that will display the time spent on the page:

<asp:UpdatePanel ID="UP_Timer" runat="server" RenderMode="Inline" UpdateMode="Always">
<Triggers>

</Triggers>
<ContentTemplate>

</ContentTemplate>
</asp:UpdatePanel>

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

Notice that we have included the triggers tag, as well as the content template. The trigger we are going to use will be an AJAX Timer control. Let's add that in now, as well as set the Trigger attributes:

<asp:UpdatePanel ID="UP_Timer" runat="server" RenderMode="Inline" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000" />
<asp:Literal ID="lit_Timer" runat="server" /><br />
<asp:HiddenField ID="hid_Ticker" runat="server" Value="0" />
</ContentTemplate>
</asp:UpdatePanel>

We add an AsyncPostBackTrigger and set the control ID and Event Name to match our Timer control. We also set the Interval of the Timer's tick event to 1000 milliseconds. We have added a Literal control to display the time spent on the page, and then a HiddenField to store that value. We add code to the code-behind that will run every second, on the Tick event of the Timer control (we can do this by simply adding the code manually, or double-clicking the timer control in Design view):

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
hid_Ticker.Value = New TimeSpan(0, 0, 0).ToString()
End If
End Sub

Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
hid_Ticker.Value = TimeSpan.Parse(hid_Ticker.Value).Add(New TimeSpan(0, 0, 1)).ToString()
lit_Timer.Text = "Time spent on this page: " + hid_Ticker.Value.ToString()
End Sub

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

First, on page load we are assigning a new value to the hidden field, of type TimeSpan. This TimeSpan is 0 hours, 0 minutes, and 0 seconds. Then on each Tick event, we add one second to that value, then display it in the Literal control. If we now run this page, we will see the page programmatically and seamlessly count up the time spent on the page.
To demonstrate that this will not interfere with other functions on the page, let's go ahead and add another Update Panel:

<asp:UpdatePanel ID="UP_Name" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
Add your name: <asp:TextBox ID="fld_Name" runat="server" /><br />
<br />
<asp:Button ID="btn_Submit" runat="server" Text="Submit" /><br />
<asp:Literal ID="lit_Name" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>

Here, we will ask for the name of the visitor and then display it back to them without posting back. We do this with the following code:

Protected Sub btn_Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_Submit.Click
lit_Name.Text = "Thanks. Your name is: " & fld_Name.Text
End Sub

Our ASPX page and code-behind will look something like this:

<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />

<asp:UpdatePanel ID="UP_Timer" runat="server" RenderMode="Inline" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000" />
<asp:Literal ID="lit_Timer" runat="server" /><br />
<asp:HiddenField ID="hid_Ticker" runat="server" Value="0" />
</ContentTemplate>
</asp:UpdatePanel>

<br />

<asp:UpdatePanel ID="UP_Name" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
Add your name: <asp:TextBox ID="fld_Name" runat="server" /><br />
<br />
<asp:Button ID="btn_Submit" runat="server" Text="Submit" /><br />
<asp:Literal ID="lit_Name" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</form>

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
hid_Ticker.Value = New TimeSpan(0, 0, 0).ToString()
End If
End Sub

Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
hid_Ticker.Value = TimeSpan.Parse(hid_Ticker.Value).Add(New TimeSpan(0, 0, 1)).ToString()
lit_Timer.Text = "Time spent on this page: " + hid_Ticker.Value.ToString()
End Sub

Protected Sub btn_Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_Submit.Click
lit_Name.Text = "Thanks. Your name is: " & fld_Name.Text
End Sub
End Class

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!
 


Comments
Instant Host said:

There is a bug in the code, the HTML output is incorrect. This is a working version.

foreach(var tab in tabs) {

if(controller == tab.Controller && action == tab.Action)

menu += “\n\t” + helper.ActionLink(tab.Text, tab.Action,

tab.Controller, null, new { @class = “selected” }) + “”;

else

menu += “\n\t” + helper.ActionLink(tab.Text,

tab.Action, tab.Controller) + “”;

}

www.marblehost.com/.../how-long-does-i

Posted May 18, 2009 4:19 AM
Fritz said:

Thank you for placing the comment, I got really confused until I read this comment

Posted Jun 14, 2009 3:04 PM
Freelance SEO India said:

India’s leading Freelance SEO India services provider with main competency in Search Engine Optimization of websites.

Posted Dec 29, 2010 11:15 AM
www.outlet-louisvuitton.co.uk said:

www.outlet-louisvuitton.co.uk

Posted Aug 6, 2011 3:29 AM

Leave a Comment