Click here to Skip to main content
Click here to Skip to main content

Tagged as

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

, 12 Jul 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Learn how to add a friendly 'Session Timeout' warning dialog message to your ASP.NET MVC website using the DevExpress MVC PopupControl extension

Introduction

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

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/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mehul Harry
Web Developer
United States United States
.Net, C#, SQL, Delphi

Comments and Discussions

 
QuestionProject not opening? PinmemberShemeemsha RA15-Sep-14 21:30 
QuestionSession restore [modified] PinmemberMember 1011572016-Jul-14 15:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 12 Jul 2013
Article Copyright 2013 by Mehul Harry
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid