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

Learn how to add a friendly 'Session Timeout' warning dialog message to your ASP.NET MVC website using the DevExpress MVC PopupControl extension. This helps you 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 our automatically

This sample is the ASP.NET MVC version of the previous sample I mentioned here.

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 of the best way to notify your end-users 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.

Solution: MVC PopupControl Extension

Now you can have this wonderful feature in your websites using the DevExpress ASP.NET MVC PopupControl extension!

Download the sample ASP.NET MVC solution here:

File: MVCSessionTimeoutPopup.zip

Project Details

Let's break down what's in the project. The slick sample contains 4 key files:

• TimeoutPartial.cshtml - Partial view that contains the Popup warning dialog
• TimeOutPage.cshtml - Simple page to redirect to when session has timed out
• Index.cshtml - Default page that calls the TimeoutPartial view
• HomeController.cs - Controller containing the action methods for routing to TimeOutPartial view

All the Java‍Script magic happens in the TimeoutPartial.cshtml view:

@functions {

    public int PopupShowDelay {
        get { return 60000 * (Session.Timeout - 1); }
    }

}

<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 = "Home/TimeOutPage";
            }            
        };

        var showPopup = function() {
            _timeLeft = 60;
            updateCountDown();
            ClientTimeoutPopup.Show();
        };

        var schedulePopup = function() {
            stopTimers();
            _popupTimer = window.setTimeout(showPopup, @PopupShowDelay);
        };

        var sendKeepAlive = function() {
            stopTimers();
            ClientTimeoutPopup.Hide();
            SessionTimeout.schedulePopup();
        };

        return {
            schedulePopup: schedulePopup,
            sendKeepAlive: sendKeepAlive
        };

    })();    

</script>

@using (Html.BeginForm()) {
    <p>
        A timeout warning popup will be shown every @(Session.Timeout - 1) min.
    </p>   
    @Html.Partial("TimeoutPartial")
}

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