title: Session Timing in multiple Tabs ASP.NET
body: <p>I am controlling my session time in my ASP.NET Application by the following setting in web.config.</p>
  
  <pre><code> &lt;configuration&gt;
    &lt;system.web&gt;
      &lt;sessionState timeout="20" /&gt;
    &lt;/system.web&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p>I am displaying an alert box before 2 mins of user's Session end time using JQuery and JQueryUI on client side</p>
  
  <p>Since, ASP.NET shares session in multiple tabs, if the user opens multiple copies of the same page in different tabs, they will count as same session but displays session timeout alert at different times as it is more of client side leaving false info with User.</p>
  
  <p>for example, if user opens first tab then session starts, he opens second tab @ 10 mins and another at 18 mins. By the time he is in third tab first tab displays alert of session timeout. But second and third tabs will not as its time is still counting for 20 mins.  Since user will be on most recent tab, he thinks session is still on while it expired on first open tab.</p>
  
  <p>I don't wanna make a separate session for each tab.</p>
  
  <p>Not sure on how to deal with this but sure some one might have an answer. Any Inputs will be of great help.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  var diag = createNewDialog();
  
  var msecPageLoad;
  var msecTimeOut;
  var msecWarning;
  
  SessionTimerInit();
  
  function SessionTimerInit() {
    SetPageTimes();
    setTimeout("ShowPendingTimeoutDialog()", msecWarning);
  }
  
  function createNewDialog() {
    return $('&lt;div&gt;&lt;/div&gt;');
  }
  
  function SetPageTimes() {
    msecPageLoad = new Date().getTime();
    msecTimeOut = ( &lt;%= Session.Timeout %&gt; * 60 * 1000);
    msecWarning = ( &lt;%= Session.Timeout %&gt; * 60 * 1000 * .75); // .75 = 75% of total timeout variable. i.e. if timeout is set for 20 minutes, the dialog should pop up after 15 minutes
    //msecWarning = 0;
  }
  
  function ShowPendingTimeoutDialog() {
    diag.dialog({
      autoOpen: false,
      title: "Session About to Expire",
      position: {
        my: "center center",
        at: "center center",
        of: "#pagecontainer"
      },
      closeText: "hide",
      resizable: false,
      draggable: false,
      modal: true,
      buttons: {
        Continue: function() {
          ResetTimeout();
        }
      }
    });
  
    UpdateTimeoutMessage();
    diag.dialog("open");
  }
  
  function ResetTimeout() {
    diag.dialog("close");
    $.ajax({
      url: 'KeepAlive.ashx'
    });
    SessionTimerInit();
  }
  
  function UpdateTimeoutMessage() {
  
    var msecElapsed = (new Date().getTime()) - msecPageLoad;
    var timeLeft = msecTimeOut - msecElapsed; //time left in miliseconds
  
    if (timeLeft &lt;= 0) {
      RedirectToWelcomePage();
    } else {
      var minutesLeft = Math.floor(timeLeft / 60000);
      var secondsLeft = Math.floor((timeLeft % 60000) / 1000);
      var sMinutesLeft = ("00" + (minutesLeft).toString()).slice(-2) + ":";
      var sSecondsLeft = ("00" + (secondsLeft).toString()).slice(-2);
  
      diag.html("&lt;p&gt;Your session is about to expire. Please click 'Continue' to continue working.&lt;br /&gt;&lt;br /&gt;Time Remaining: " + sMinutesLeft + sSecondsLeft + "&lt;/p&gt;");
      setTimeout("UpdateTimeoutMessage()", 50);
    }
  }
  
  function RedirectToWelcomePage() {
    var diagRedirect = createNewDialog();
  
    diag.dialog("close");
    diagRedirect.dialog({
      autoOpen: false,
      title: "Session Expired",
      position: {
        my: "center center",
        at: "center center",
        of: "#pagecontainer"
      },
      closeText: "hide",
      resizable: false,
      draggable: false,
      modal: true,
      buttons: {
        OK: function() {
          window.location = "../Account/Login.aspx";
          diagRedirect.dialog("close");
        }
      }
    });
    diagRedirect.html("&lt;p&gt;Your session has expired. Click 'OK' to be redirected to the login page.&lt;/p&gt;");
    diagRedirect.dialog("open");
  }
  &lt;/script&gt;
  </code></pre>