Often there is a scenario where the user displays a live page that polls the
data from server every few seconds to update some contents on page. In case, the user
leaves for hours without shutting down the browser. As a result, the
page keeps on sending requests, generating a significant—and
useless—workload for the server.
On the server,
there's session timeout, but in AJAX there's also the client session
that matters. To detect the end of a client session, you need to check
whether there was user activity such as clicking and tapping for a given
amount of time.To
detect the end of a session based on a timer, set up a client timer
that expires after a specified number of seconds, stops the ongoing task, and pops up an alert box. If the user
responds to the prompt, processing resumes as usual. This example update the datetime every 3 seconds and then show confirm dialog box every 10 seconds to ask the user.
 | |
| Client Session Timeout |
Put the below script to <head> tag.
<script type="text/javascript">
var timer = null;
function pageLoad() {
if (timer == null) {
timer = setTimeout("stopTask()", 10000);
}
}
function pageUnload() {
if (timer != null)
clearTimeout(timer);
}
function stopTask() {
// Stop the clock
var clock = $find("<%= Timer1.ClientID%>");
clock._stopTimer();
AskIfTheUserWantsToContinue();
}
function AskIfTheUserWantsToContinue() {
// Ask if the user wants to continue
var answer = window.confirm("Is it OK to continue with the clock?");
if (answer) {
// Restart the task
var clock = $find("<%= Timer1.ClientID%>");
clock._startTimer();
// Restart our own timeout engine
if (timer != null)
timer = setTimeout("stopTask()", 10000);
return;
}
}
</script>
Add the following code to <form> tag.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Updatepanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
In code-behind, code snippet is as below:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
Label1.Text = DateTime.Now.ToLongTimeString();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
Label1.Text = DateTime.Now.ToLongTimeString();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
}
The idea is to set up a timer that
periodically asks the user if he really wants to continue with the
clock. The timeout code first stops the clock and then displays the
message box. Based on the user's response, the clock is restarted.
The
code utilizes the $find function to locate an ASP.NET AJAX component. So, we need asp.net ajax ScriptManager.
Single-page Interface and AJAX Patterns
Single-page Interface and AJAX Patterns
No comments:
Post a Comment