How to extend Session timeout

[anithaapr05]

Hi,

I am creating a session when user successfully login to the site and user gets a form to input some data into database.

Assume that user entered data into some fileds and let the browser ideal and doing some other work in his/her system.

My requrement is, 2 mins before(after 13 mins) of session timeout(I set session timeout as 15 mins in web.config), user should get an alert as" Your session is about to timeout in 2 mins(at 12:30:20PM), Do you want to extend session timeout?" with OK and Cancel button.

If user clicked on OK button with in session timeout period(within 15th minute), session should expire to one more 15 minutes, but browser should not refresh.(If browser refreshed, all the values entered by the user, will be cleared.)

If user didnot clicked any button with in session timeout or user clicked Cancel button or user clicked on OK button after session timout, session should expire at 15th minute.



Thanks,

Anitha.

[Frinavale]

You can do this using Ajax and JavaScript.

When the page is sent down to the browser the JavaScript should start tracking how much time has passed. When the user has 2 minutes left the JavaScript should display the message.

If the user clicks ok then the JavaScript should make an Ajax Call to the server....it should call a method in the page. When this happens a partial page update will occur (which you can keep hidden) which will reset the time automatically.

The session only times out after 15 minutes of inactivity...th erefore if you have any activity at all (simply calling a method on the server will suffice) then the Session will be reset.

[ybechar]

Can you give an example on how to do it.
It would be great if it is in VB.
Thanks,

[Frinavale]

You can't use VB.NET to do this....

It would probably be easiest if you used DOM objects to do this....by this I mean stay away from the built in JavaScript "confirm" etc.

This is what I suggest you do (please note that I'm assuming that the session expires in 2 minutes and I am displaying the message 5 seconds before the session expires...you have to modify the code to suit your own needs)

• Place a Panel on the page. You will display this panel using JavaScript after, say 115 seconds has past, giving the user 5 seconds to respond
• Place a Label in the Panel and set the Text property to prompt the user. Have it say something like "Your session is going to expire in 5 seconds. Would you like to extend it?".
• Place an Ok button in the Panel. Set it's text property to "yes". When the user clicks this button it will post back to the server which will extend the Session life.
• Place an HTML input type=button in the Panel next to the Ok button. Set the value of the HTML button to "no". This button will be used to "hide" the Panel if the user clicks "no". It will not postback to the server and so the Session life will not be extended in this case.
• Implement a JavaScript method that displays the Panel in the middle of the page. This will be called after 115 seconds has passed using the JavaScript setTimeout() method.
• Implement a JavaScript method that will hide the Panel. This method will be called when the user clicks the "no" button. This method will also be called when after 2 minutes (120 seconds) has passed to close the window if the user hasn't selected to extend the Session life.

So your ASPX page is going to have something like (please take note of the style that I have set for the Panel):

<asp:Panel ID="ExtendSessionLifeBox" runat="server" style="height:100px; width:250px; background-color:#B0E2FF; border:solid 1px black; display:none; position:absolute;">
  <asp:Label ID="ExtendSessionLifePrompt" runat="server" Text="Your session is going to expire in 5 seconds. Would you like to extend your Session for another 2 minutes?"></asp:Label>
  <asp:Button ID="ExtendSessionLife" runat="server" Text="Yes" />
  <input type="button" id="CancelExtendSessionLife" value="No" onclick="CloseExtendSessionLifeBox(); return false;" />  
</asp:Panel>

Notice how the the "no" button calls a JavaScript method named CloseExtendSess ionLifeBox(). You have to implement that method. This method needs to retrieve the ExtendSessionLi feBox element on the page and set it's style so that it's not displayed (use dispaly:none to hide it).

You can retrieve the element using the JavaScript document.getEle mentByID() method. The only thing is that you have to know the ID of the element. The Panel's ID may not match the ID that is required by the document.getEle mentByID() method.

When an ASP.NET Panel is rendered as HTML it is rendered as a <div> element. This <div> element is given an ID but it may not match the ID of the ASP.NET Panel. The reason is because you may be using MasterPages which can display more than one "aspx" page in one page (or you may be using User Controls). So, in theory, each aspx page (or each User Control) in the MasterPage (or aspx page) can have a Panel with the id "ExtendSessionL ifeBox". In order to differentiate between these Panels ASP.NET changes the ID of the <div>s that represent the Panels so that each <div> has a unique ID in the browser.

You can access the ID that the <div> associated with the Panel using the Panel's ClientID property. This property will return the ID of the <div> element.

So, you need to use the ClientID of the Panel in the JavaScript function that "hides" the Panel asking the user if they want to extend the Session life.

You can write the Panel's ClientID value into the JavaScript function using the Response.Write( ) method. The Response.Write method should never be used in your VB.NET code because it will print the value in some random place in the page. Usually this results in the output being printed before the <html> element which makes the page invalid. However, you can use the Response.Write( ) method in your asp code because you can specify exactly where the stuff should be printed.

To do this you would use the ASP tags <% %>. These tags specify that whatever is in between them should be executed on the server. This means that whatever is in between these tags should be VB.NET code (because you're using VB.NET...but if someone using C# were trying to do the same thing as you, then whatever is in between these tags should be C# code).

So, to print the ClientID of the Panel into the page you would use:

<% Response.Write(ExtendSessionLifeBox.ClientID) %>

An asp short hand version of Response.Write is <%= %>, so in my code I use:

<%= ExtendSessionLifeBox.ClientID %>

Ok, now that we have the basics covered I'll show you what the CloseExtendSess ionLifeBox() JavaScript method should look like:

function CloseExtendSessionLifeBox(){
  var boxElement = document.getElementById("<%= ExtendSessionLifeBox.ClientID %>");
 
  //checking if the element exists before trying to use it
  if(boxElement)
  {
    boxElement.style.display = "none";
  }
}

Wonderful! Now we have a method that hides the box....but that's not really going to help us because by default I have specified that the box has a style of display:none (so it's not showing by default). You use the same technique to display the box only instead of setting the style of the box to display:none you set it to display:block:

The following method display the ExtendSessionLi feBox:

function DisplayExtendSessionLifeBox(){
  var boxElement = document.getElementById("<%= ExtendSessionLifeBox.ClientID %>");
 
  //checking if the element exists before trying to use it
  if(boxElement)
  {
    boxElement.style.display = "block";
  }
}

Please note that I have set the ExtendSessionLi feBox's style to have a position:absoul te. This means that it is going to "float on top of" the rest of the page content.

The thing is that it's going to appear in the top left corner of page....but you probably want this to display in the middle of the page instead.

To do this you need to use JavaScript to determine the height and width of the browser, and the height and width of the ExtendSessionLi feBox so that you can center the ExtendSessionLi feBox in the middle of the browser window.

You need to take the height of the browser divided by 2 and subtract the height of the ExtendSessionLi feBox divided by 2 to determine how far down from the top the ExtendSessionLi feBox should be displayed. Likewise, you would take the width of the browser divided by 2 and subtract the width of the ExtendSessionLi feBox divided by 2 to determine how far from the left the ExtendSessionLi feBox should be displayed.

Once you've figured out how far from the top and how far from the left to display the ExtendSessionLi feBox you need to set the ExtendSessionLi feBox's top and left styles.

Please note that you can only figure out how tall and wide the ExtendSessionLi feBox is if the ExtendSessionLi feBox is being displayed (if it has a style of display:none then these values are 0).

Here is the code that will display the ExtendSessionLi feBox in the middle of the page:

function BrowserWidth() {
    var theWidth;
    if (window.innerWidth) {
        theWidth = window.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
        theWidth = document.documentElement.clientWidth;
    }
    else if (document.body) {
        theWidth = document.body.clientWidth;
    }
    return theWidth;
}
function BrowserHeight() {
    var theHeight;
    if (window.innerHeight) {
        theHeight = window.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
        theHeight = document.documentElement.clientHeight;
    }
    else if (document.body) {
        theHeight = document.body.clientHeight;
    }
   return theHeight;
}
 
function DisplayExtendSessionLifeBox(){
 
  var boxElement = document.getElementById("<%= ExtendSessionLifeBox.ClientID %>");
  if(boxElement){
 
    boxElement.style.display="block";
    var bw = BrowserWidth();
    var bh = BrowserHeight();
    var boxElementWidth = (boxElement.clientWidth)? boxElement.clientWidth : boxElement.offsetWidth;
    var boxElementHeight = (boxElement.clientHeight)? boxElement.clientHeight: boxElement.offsetHeight;
 
    var boxElementTop = (bh/2) - (boxElementHeight/2);
    var boxElementLeft = (bw/2) - (boxElementWidth/2);
    boxElement.style.top = boxElementTop;
    boxElement.style.left = boxElementLeft;
    boxElement.style.position="absolute";
  }
}

Ok, so now we have a method that displays the ExtendSessionLi feBox in the middle of the web browser. The ExtendSessionLi feBox informs the user that their Session is about to expire and asks them if they want to extend it for another 2 minutes. The ExtendSessionLi feBox has 2 buttons: an "ok" button that will submit the page to the server, thereby extending the Session life; and a "close" button that simply closes the ExtendSessionLi feBox.

All we have to do now is call the method that displays the ExtendSessionLi feBox after 115 seconds (5 seconds before the session expires) and call the method that hides the ExtendSessionLi feBox after 2 minutes (120 seconds) because the Session has already expired at that point.

To do this you use the JavaScript setTimeout() method. The setTimeout method will execute a method after a set amount of time has passed. It takes 2 parameters, the name of the method to call, and the amount of time to wait before calling the method (in milliseconds).

The following code will call the DisplayExtendSe ssionLifeBox() method after 115 seconds, and will call the HideExtendSessi onLifeBox() method after 2 minutes:

setTimeout(DisplayExtendSessionLifeBox,115000);
setTimeout(CloseExtendSessionLifeBox,120000);

Now you should have enough information to solve your problem. Normally I don't spoon feed the answer to people but this time I didn't feel like wasting time on you trying something, me responding, you trying something else, and me responding...

Please note that all JavaScript should always be in <script type="text/javascript"></script> tags.

Happy coding,

-Frinny

[ssnaik84]

@Frinny..
how can you give such long reply?? amazing..!!!
keep it up buddy.. :)

[Frinavale]

Hehe like I said I don't normally like to "spoon feed" answers. I like it when people take their own initiative and learn for themselves...be cause when the come back here with questions later they are more likely to have a more interesting question that I might actually learn from :)

But this time I didn't feel like spending several days going back and forth with the OP over the course of days when it could take me less time to just type the answer out.



-Frinny

[Milan Gurung]

Hi Frinavale,

Many thanks for your solution. It works only when the session time out period is less than time to close the warning panel(window).

e.g.

setTimeout(DisplayExtendSessionLifeBox,115000); //display after 115 seconds
setTimeout(CloseExtendSessionLifeBox,120000);//Close after 120 seconds
 

but
if we have

setTimeout(DisplayExtendSessionLifeBox,120000);//display after 120 seconds
setTimeout(CloseExtendSessionLifeBox,1150000);//Close adter 115 seconds
 

It does not hide the warning window in the second scenario. Pretty simple because "CloseExtendSes sionLifeBox()" method is already invoked before warning message box being displayed!

The solution would be to modify your code - calling
CloseExtendSess ionLifeBox() infinitely. So adding this statement within the "CloseExtendSes sionLifeBox()" will resolve the problem.
....

function CloseExtendSessionLifeBox(){
  var boxElement = document.getElementById("<%= ExtendSessionLifeBox.ClientID %>");
 
  //checking if the element exists before trying to use it
  if(boxElement)
  {
    boxElement.style.display = "none";
  }
  setTimeout(CloseExtendSessionLifeBox,1150000);
}
 

Thanks a lot again for your cool solution.

Cheers,
Milan Gurung

[Frinavale]

Thanks for the info Milan Gurung :)

I just read over what I wrote... I must have had time on my hands.

I have edited my original post to include your code in the CloseExtendSess ionLifeBox() method.

-Frinny