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

11 July 2011

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

ASP.NET MVC Session Timeout Popup Warning - DevExpress

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:

 Download-button

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. Smile

Thanks!

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions: http://dxpr.es/ov1tQa

Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

Follow MehulHarry on Twitter

13 comment(s)
Maynor Gamarro

Hi Mehul,

Thanks for sharing your ideas and code with us.  This functionality is exactly what I've been looking for for a while.

Is there a chance to make this code work with ASP.NET apps without MVC ?   I don't know anything about MVC and don't have time now to learn some new technology.

Regards,

12 July, 2011
Mehul Harry (DevExpress)

Hi Maynor,

Thanks and yes there is an ASP.NET WebForms version here too, let me know what you think of it by commenting on this post:

ASP.NET - How To Show A Popup Warning Before Session Timeout - Mehul Harry's DevExpress Blog http://dxpr.es/k72TyK

12 July, 2011
Aminur Rouf

Hi Mehul

I have a site which uses both ASP.Net forms and MVC (Razor)  pages.

If I were to use  MVC PopupControl Extension for the  MVC pages and the ASP.net session timeout  popup control for the aspx pages, would they both work together harmoniously or would they interfere with each other in some way.

Regards

31 May, 2012
Mehul Harry (DevExpress)

Aminur,

Honestly, I don't know. I would recommend just experimenting with it.

Thanks.

13 June, 2012
Ryan Bromm

I run MVC sample code and ....

If my session is of 5 minutes and at 3:49 minute I do something on the site the Popup should now appear at 7:49 minute and not at 3:49.

This MVC time out is not prolonging the session.

So have to place sendKeepAlive at every loacation where we are doing any activity on the site so that its count down beging from that point.

Am I correct?

16 October, 2012
Ryan Bromm

Last 3:49 should be 4:00 minute

Now question is

If my session is of 5 minutes and at 3:49 minute I do something on the site the Popup should now appear at 7:49 minute and not at 4:00

Does this sample provide this functionality?

18 October, 2012
Mehul Harry (DevExpress)

Ryan,

Can you please upload a small sample to support so they can have a closer look? www.devexpress.com/.../Create

Thanks.

18 October, 2012
John Malvey

Thanks for posting this. I was able to incorporate this easily into my MVC3 app.

10 May, 2013
Mehul Harry (DevExpress)

John,

Excellent, thanks.

10 May, 2013
apatel

How does timer get reset on user activities (like..callbacks)? The example you have for navigation. How to handle session time out with callbacks?

17 May, 2016
Mehul Harry (DevExpress)

APatel,

Could you please contact our support team and they can help you: www.devexpress.com/.../Create

Thanks.

17 May, 2016
Arun Barupati

Hi Mehul,

After Index get executed it will show a message like 'A timeout warning popup will be shown every @(Session.Timeout - 1) min.' after that it should go  TimeoutPartial.cshtml  and execute button which I kept to show the button for OK. But my coe showing the message that popup will show after 1min but its not showing the alert message and session expiration.

27 May, 2016
Mehul Harry (DevExpress)

Hi Arun,

Please contact our support@devexpress.com team and they can help you. Thanks.

27 May, 2016

Please login or register to post comments.