Check out this useful Code Central ASP.NET sample that shows you how to use the DevExpress ASP.NET PopupControl to:
- Display a warning message before a user's session times out and
- Allow the end-user to continue the session or log them out automatically
Session Timeout
Session Timeout is a property that you can set in your web.config file to control when a user session should expire.
Unfortunately, your end-users don't know when their session will expire unless you notify them somehow.
Popup Warning
One one of the best way to notify them is using a popup warning dialog. You may have seen these types of popups on your bank's website.
Say you're checking your bank balance online and need to answer a phone call elsewhere. You've just left the browser open at your bank account details which creates a potential security issue. To put it mildly.
If the ASP.NET Session timeout has been set then it will expire the session but it may not give any useful hints to the end-user. Most banking websites will display a client-side popup dialog to warn and ask the end-users if they would like to continue the session.
The popup could have a one minute timer and an OK button. If the end-user is still there and wants to continue the session then they'll click the 'Ok' button. But if the timer on the popup runs out then they'll automatically be logged out.
ASPxPopupControl To The Rescue
Now you can have this wonderful feature in your websites using the ASPxPopupControl! We've put together a Code Central sample that contains a ready-to-use UserControl that has our ASPxPopupControl embedded within it:
How to control state when the Session is being expired and prolong it on demand
To learn how Code Central works, watch this short video.
Note: You can't run this demo online, even though it's an ASP.NET project, because it uses the session state. However, you can easily download and run it locally.
Break It Down
The slick Code Central sample contains 4 files:
- TimeoutControl.ascx - User Control that contains the Popup warning dialog
- TimeOutPage.aspx - Simple page to redirect to when session has timed out
- Default.aspx - Default page that calls the UserControl
- Default.aspx.cs - Code behind page that sets the TimeOutUrl to point to TimeOutPage.aspx
All the Java Script magic happens in the Timeoutcontrol.ascx UserControl:
<script type="text/javascript">
window.SessionTimeout = (function() {
var _timeLeft, _popupTimer, _countDownTimer;
var stopTimers = function() {
window.clearTimeout(_popupTimer);
window.clearTimeout(_countDownTimer);
};
var updateCountDown = function() {
var min = Math.floor(_timeLeft / 60);
var sec = _timeLeft % 60;
if(sec < 10)
sec = "0" + sec;
document.getElementById("CountDownHolder").innerHTML = min + ":" + sec;
if(_timeLeft > 0) {
_timeLeft--;
_countDownTimer = window.setTimeout(updateCountDown, 1000);
} else {
window.location = <%= QuotedTimeOutUrl %>;
}
};
var showPopup = function() {
_timeLeft = 60;
updateCountDown();
ClientTimeoutPopup.Show();
};
var schedulePopup = function() {
stopTimers();
_popupTimer = window.setTimeout(showPopup, <%= PopupShowDelay %>);
};
var sendKeepAlive = function() {
stopTimers();
ClientTimeoutPopup.Hide();
ClientKeepAliveHelper.PerformCallback();
};
return {
schedulePopup: schedulePopup,
sendKeepAlive: sendKeepAlive
};
})();
</script>
Download the sample and integrate into your websites to give your end-users a friendly reminder that their session is expiring soon and would they like to keep it running. 
Thanks!
DXperience? What's That?
DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/
Free DevExpress Products – Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We’ll be happy to follow-up.