Wednesday, July 28, 2010

Session time out alert box and redirect login page in ASP.net


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>

4 comments:

Anonymous said...

hi, thanks for the usefull code,
what i want is to display the pop-up alert 1 min before the session expires but by no way thats happening it loads on start as i call the startclock() fn on pageload. need some help to get the desired result.

Anonymous said...

hi, thanks for the usefull code,
what i want is to display the pop-up alert 1 min before the session expires but by no way thats happening it loads on start as i call the startclock() fn on pageload. need some help to get the desired result.

Anonymous said...

it worked. Just need to call the sessioncallback function.

mammoth said...

thank you for putting this up such a really great site. Stimulating me to read much more.

www.triciajoy.com