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>