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 CloseExtendSessionLifeBox(). You have to implement that method. This method needs to retrieve the ExtendSessionLifeBox 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.getElementByID() 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.getElementByID() 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 "ExtendSessionLifeBox". 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 CloseExtendSessionLifeBox() 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 ExtendSessionLifeBox:
- 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 ExtendSessionLifeBox's style to have a position:absoulte. 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 ExtendSessionLifeBox so that you can center the ExtendSessionLifeBox 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 ExtendSessionLifeBox divided by 2 to determine how far down from the top the ExtendSessionLifeBox should be displayed. Likewise, you would take the width of the browser divided by 2 and subtract the width of the ExtendSessionLifeBox divided by 2 to determine how far from the left the ExtendSessionLifeBox should be displayed.
Once you've figured out how far from the top and how far from the left to display the ExtendSessionLifeBox you need to set the ExtendSessionLifeBox's top and left styles.
Please note that you can only figure out how tall and wide the ExtendSessionLifeBox is if the ExtendSessionLifeBox is being displayed (if it has a style of display:none then these values are 0).
Here is the code that will display the ExtendSessionLifeBox 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 ExtendSessionLifeBox in the middle of the web browser. The ExtendSessionLifeBox informs the user that their Session is about to expire and asks them if they want to extend it for another 2 minutes. The ExtendSessionLifeBox 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 ExtendSessionLifeBox.
All we have to do now is call the method that displays the ExtendSessionLifeBox after 115 seconds (5 seconds before the session expires) and call the method that hides the ExtendSessionLifeBox 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 DisplayExtendSessionLifeBox() method after 115 seconds, and will call the HideExtendSessionLifeBox() 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