In this article I will explain with an example, how to display Session Time out (Expire) Warning message using jQuery in ASP.Net with C# and VB.Net.
The concept is to display a Session Timeout (Expire) Counter using jQuery Dialog Modal Popup to inform the User that Session will expire soon.
Web.Config
The Session Timeout has been set to one minute for this article.
<sessionState timeout = "1"/>
HTML Markup
The HTML Markup consists of two HTML SPAN elements for displaying the Timeout Counter and an HTML DIV which will be displayed using jQuery Dialog Modal Popup for displaying the Warning message.
<h3>Session Idle: <span id="secondsIdle"></span> seconds.</h3>
<div id="dialog">
Your Session will expire in <span id="seconds"></span> seconds.<br />
Do you want to reset?
</div>
Namespaces
You will need to import the following namespaces.
C#
using System.Configuration;
using System.Web.Configuration;
VB.Net
Imports System.Configuration
Imports System.Web.Configuration
Determining the Session Timeout from the Web.Config file
The following code gets the value of Session Timeout from the Web.Config file and then passes it to the SessionAlert JavaScript function which is called using the ClientScript.RegisterStartupScript function.
C#
protected void Page_Load(object sender, EventArgs e)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
if (!this.IsPostBack)
{
Session["Reset"] = true;
Configuration config = WebConfigurationManager.OpenWebConfiguration("~/Web.Config");
SessionStateSection section = (SessionStateSection)config.GetSection("system.web/sessionState");
int timeout = (int)section.Timeout.TotalMinutes * 1000 * 60;
ClientScript.RegisterStartupScript(this.GetType(), "SessionAlert", "SessionExpireAlert(" + timeout + ");", true);
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Response.Cache.SetCacheability(HttpCacheability.NoCache)
If Not Me.IsPostBack Then
Session("Reset") = True
Dim config As Configuration = WebConfigurationManager.OpenWebConfiguration("~/Web.Config")
Dim section As SessionStateSection = DirectCast(config.GetSection("system.web/sessionState"), SessionStateSection)
Dim timeout As Integer = CInt(section.Timeout.TotalMinutes) * 1000 * 60
ClientScript.RegisterStartupScript(Me.GetType(), "SessionAlert", "SessionExpireAlert(" & timeout & ");", True)
End If
End Sub
Client Side Scripting
Following is the function which accepts the Session Timeout value from server side and then displays a Session Timeout counter. When there’s 20 seconds left for Session Timeout the jQuery Dialog Modal Popup with the Warning message is displayed.
If the user clicks OK button inside the jQuery Dialog Modal Popup, the page is redirected and the Session is refreshed and if the user clicks Close then the jQuery Dialog Modal Popup closes.
As soon as the Session expires, user is redirected to the Session Expired page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Session Expiring",
buttons: {
Ok: function () {
ResetSession();
},
Close: function () {
$(this).dialog('close');
}
}
});
});
function SessionExpireAlert(timeout) {
var seconds = timeout / 1000;
$("#secondsIdle").html(seconds);
$("#seconds").html(seconds);
setInterval(function () {
seconds--;
$("#secondsIdle").html(seconds);
$("#seconds").html(seconds);
}, 1000);
setTimeout(function () {
//Show Popup before 20 seconds of timeout.
$('#dialog').dialog('open');
}, timeout - 20 * 1000);
setTimeout(function () {
window.location = "Expired.aspx";
}, timeout);
};
function ResetSession() {
//Redirect to refresh Session.
window.location = window.location.href;
};
</script>
Screenshot
The jQuery Modal Popup displaying the Warning message
![Display Session Time out Warning message using jQuery in ASP.Net]()
The Session Expired Page
![Display Session Time out Warning message using jQuery in ASP.Net]()
Demo
Downloads
