ASP.NET - How To Show A Popup Warning Before Session Timeout

Check out this useful Code Central ASP.NET sample that shows you how to use the DevExpress ASP.NET PopupControl to:

1. Display a warning message before a user's session times out and
2. 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!

Free DevExpress Products - Get Your Copy Today