Session Time Out Warning Message Using jQuery in ASP.Net

In this article I have used the jQuery plug-in, timeout-dialog.js, to provide a session timeout warning message in ASP.NET.

This article will cover the following topics:

  1. Show the alert message before the session timeout.
  2. The user will have an option to extend or continue with the current session or he can log out from the site.

For this article I have used the jQuery plug-in, timeout-dialog.js.

Example: Timeout-Dialog.js Example

Documentation: timeout-dialog.js

Well I simply have the necessary code and I am not explaining the code here. I am mainly focusing on the example and you can download the attachment for that.

Features

  1. This is free and you have right to change this code.
  2. You can use this with a master page and Ajax update panel as well.
  3. You can customize all the messages and logs.
  4. You can apply the styles and themes to the confirm window.

confirm window 

confirm window 
CODE

Web.Config File

You need to set the session timeout in the web.config file as below:
 
Session timeout

Default.aspx file

Now you need to add the jQuery code to the page. See the following one:
 
JQuery code in you page

Here setTimeout() will run in the background and $.timeoutDialog() will show the popup box.

Default.aspx.cs file

Here I am calling the Timer() function from my .cs file using ScriptManager. See the following code:
 
Timer function

$.timeoutDialog() method parameters

You can see the following link:

Timeout-Dialog.js

EXAMPLE

When you run the project, it will show the “new Session”.
 
new Session
After 2 minutes, it will display the confirm window as below:
 
After 2 min display confirm window

When you click on “Yes, Keep me signed in”, then it will not reset the session. It will use the same session.
 
session

Again after 2 min, it will again show the same message.
 
message

If you click on “No, Sign me out”, then it will automatically redirect to another page and your session will be destroyed.
 
destroyed session
New theme to confirm window:
 
New theme to confirm window

Please provide your feedback.