Now I am going to explain how to show alert message to user before extending the session expiration.
Example:
If you left the website without using it for quite some time and when you used it back, it is redirected to the login page.
This will happen because of session expire or cookies expire. And if it is session expired, you want to show the alert box and redirect to the login page. And one more thing is that if the user keeps on using the website, you want to extend the session expire time. You can achieve this way
Add the css and javascript in header tag
<style type="text/css">
.style
{
border-color: Black;
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-collapse: separate;
background-color: #AAC9FC;
font-family: Verdana;
font-size: 10px;
}
style>
<script language="javascript" type="text/javascript">
var checkTimerID;
var clockID = 0;
function UpdateClock() {
var lblValue;
if (clockID) {
clearTimeout(clockID);
clockID = 0;
}
if (document.getElementById('divSessionExpirationPopUp').style.display == 'inline') {
if (navigator.appName == 'Netscape') {
document.getElementById('lblTime').innerHTML = document.getElementById('lblTime').innerHTML - 1;
lblValue = document.getElementById('lblTime').innerHTML;
}
else {
document.getElementById('lblTime').innerText = document.getElementById('lblTime').innerText - 1;
lblValue = document.getElementById('lblTime').innerText;
}
}
if ((lblValue == -1) && (document.getElementById('divSessionExpirationPopUp').style.display == 'inline')) {
document.getElementById('divSessionExpirationPopUp').style.display = 'none';
var urlString = unescape(window.location);
window.location = urlString
}
clockID = setTimeout('UpdateClock()', 1000);
}
function StartClock() {
document.getElementById('divOpacity').style.display = 'inline';
document.getElementById('divSessionExpirationPopUp').style.display = 'inline';
clockID = setTimeout('UpdateClock()', 0);
}
function SignOut() {
window.location = 'Index.aspx';
}
function GetExtendedSessionMessageUsingCallBack()
{
document.getElementById('divOpacity').style.display = 'none';
document.getElementById('divSessionExpirationPopUp').style.display = 'none';
document.getElementById('lblTime').innerHTML = 10;
var checkTimerID;
checkTimerID = setTimeout('StartClock()', (60000)); //60 minutes
}
script>
<script language="javascript" type="text/javascript">
var http;
try {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
http = new XMLHttpRequest();
}
function updateData()
{
var myurl = "http://localhost:61484/Pages/Dummy.aspx";
http.open("GET", myurl, true);
http.onreadystatechange = useHttpResponse;
http.send(null);
}
function useHttpResponse() {
if (http.readyState == 4) {
var textout = http.responseText;
GetExtendedSessionMessageUsingCallBack();
}
}
script>
Copy and paste this code in body tag .
<div id='divSessionExpirationPopUp' style='position: absolute; z-index: 10000; height: 300px;
width: 100%; left: 70px; top: 250px; display: none;'>
<br />
<table class='style' align='center' valign='middle' width='30%'>
<tr align='center' valign='middle'>
<td align='center' valign='top'>
<img src='Alert1.jpg' />
td>
<td align='left' valign='middle'>
<br />
<span><b>Your Session will expireb><br />
span><span><b>inb>span> <span id='lblTime'>12span> <span><b>sec and you will
be b>
<br />
span><span><b>logged out.b>span>
<br />
<br />
<a href="javascript:void('0');" onclick="javascript:updateData();">Click here to stay
logged in.a>
<br />
<br />
<a href='#' onclick='javascript:SignOut();'>Click here to Sign Out.a>
<br />
<br />
td>
tr>
table>
div>
<div id='divOpacity' style='position: absolute; top: 0; left: 0; z-index: 90; width: 100%;
height: 1000px; background-color: #A3A5A9; filter: alpha(opacity=60); -moz-opacity: 0.6;
opacity: 0.6; display: none'>
div>
