HOME AJAX VALIDATION EMAIL ADO.NET SILVERLIGHT CONTACT US |
This tutorial will show you how to use AJAX to record and display time spent on a page, whilst doing other Async postbacks without disturbing the counter. C#.
In this tutorial, we will explore a way to continuously display the time spent on the page. We will do this with ASP.NET AJAX in version 3.5
We will be using two separate UpdatePanels to demonstrate how we can keep the timer going whilst doing other partial postbacks, without interrupting the timer counting. This tutorial is written with Visual Studio.NET 2008. If you are using 2005 with ASP.NET 2.0, you can still achieve the timer function. You can download the AJAX extensions directly from the Official Microsoft website here. However, this tutorial is directed at 2008 users.
We will be using two separate UpdatePanels to demonstrate how we can keep the timer going whilst doing other partial postbacks, without interrupting the timer counting. This tutorial is written with Visual Studio.NET 2008. If you are using 2005 with ASP.NET 2.0, you can still achieve the timer function. You can download the AJAX extensions directly from the Official Microsoft website here. However, this tutorial is directed at 2008 users.
To start, we will create a new web application in Visual Studio. We will work on the Default.aspx page, and first add a ScriptManager to the page. The ScriptManager will handle all of our Asynchronous PostBacks behind the scenes.
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
In order to have the Timer count up regardless of whatever else is happening on the page, we will need to set areas for these Async Postbacks to happen. To do this, we will use UpdatePanel controls. Using UpdatePanels will allow the controls within them to update without affecting the rest of the page. First, let's add the UpdatePanel for the Timer, which will update continuously:
| <asp:UpdatePanel ID="up_Timer" runat="server" RenderMode="Inline" UpdateMode="Always">
<Triggers>
</asp:UpdatePanel>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers><ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick" />
</ContentTemplate><asp:Literal ID="lit_Timer" runat="server" /><br /> <asp:HiddenField ID="hid_Ticker" runat="server" Value="0" /> |
Notice here we add several controls within the UpdatePanel. We also specify the UpdateMode of the UpdatePanel as Always. The Trigger is the Timer control, which will 'trigger' or cause the Async PostBack. The Timer control will 'Tick' once every interval, which we set to 1000ms (1 second). Notice we also attach an event handler to the Tick event, we will get to the logic of this in a moment, in the code-behind. Finally we add a Literal control to display the current amount of time spent on the page, and also a HiddenField as a container to hold the current time.
Now in the code-behind, we will initiate the timer at zero on page load, and then create the Timer1_Tick method which will be called every second. We set the HiddenField value to zero in the format of a TimeSpan type:
| if (! IsPostBack) {
hid_Ticker.Value = new TimeSpan(0, 0, 0).ToString();
} |
Next, we create the Tick handler, which will retrieve the current time from the HiddenField, add one second to it, and display it in the Literal field, then it will save the new value to the HiddenField to be used again in a second:
| protected void Timer1_Tick(object sender, EventArgs e) {
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(); |
Because AJAX is native to ASP.NET 3.5, we do not need to add anything extra or reference any other namespaces. All we simply need to do is include the ScriptManager and UpdatePanel controls, ASP.NET takes care of everything else for you behind the scenes.
If we run this now the timer will begin counting up as soon as the page is loaded. It is already fully-functional. But to test it, let's add a textbox and a button so that we can postback the page and demonstrate how to keep the timer counting up regardless.
If we run this now the timer will begin counting up as soon as the page is loaded. It is already fully-functional. But to test it, let's add a textbox and a button so that we can postback the page and demonstrate how to keep the timer counting up regardless.
Going back to the ASPX page, let's add a second UpdatePanel:
| <asp:UpdatePanel ID="up_Main" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
</asp:UpdatePanel>
Add your name: <asp:TextBox ID="fld_Name" runat="server" /><br />
</ContentTemplate><br /> <asp:Button ID="btn_Submit" runat="server" Text="Submit" onclick="btn_Submit_Click" /><br /> <asp:Literal ID="lit_Name" runat="server" /> |
Notice for this UpdatePanel we set the UpdateMode to Conditional, and we do not set a trigger. This is because we only want it to update when the button is clicked - and because a button posts back by default, the UpdatePanel will detect this and force an Async PostBack. We have added a textbox, a button and a literal control. We ask for the user's name and when they hit submit, we can display it in the literal. This is a simple way to show how async postbacks do not have to affect other elements on the page.
Finally, we add the logic to the code-behind that will handle the button click event:
| protected void btn_Submit_Click(object sender, EventArgs e) {
lit_Name.Text = "Thanks. Your name is: " + fld_Name.Text;
} |
Now when we run this, you will see that we're able to submit our name without the timer stopping or pausing or restarting.
Our ASPX page looks like this:
| <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</form><asp:UpdatePanel ID="up_Timer" runat="server" RenderMode="Inline" UpdateMode="Always">
<Triggers>
</asp:UpdatePanel>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers><ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick" />
</ContentTemplate><asp:Literal ID="lit_Timer" runat="server" /><br /> <asp:HiddenField ID="hid_Ticker" runat="server" Value="0" /> <asp:UpdatePanel ID="up_Main" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
</asp:UpdatePanel>
Add your name: <asp:TextBox ID="fld_Name" runat="server" /><br />
</ContentTemplate><br /> <asp:Button ID="btn_Submit" runat="server" Text="Submit" onclick="btn_Submit_Click" /><br /> <asp:Literal ID="lit_Name" runat="server" /> |
The entire code-behind will look something like this:
| using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e)
}{
if (! IsPostBack)
}{
hid_Ticker.Value = new TimeSpan(0, 0, 0).ToString();
}protected void Timer1_Tick(object sender, EventArgs e) {
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(); protected void btn_Submit_Click(object sender, EventArgs e) {
lit_Name.Text = "Thanks. Your name is: " + fld_Name.Text;
} |
No comments:
Post a Comment