Travis Collins

AJAX Timeout Server Control

Don't you hate it when you are idle on a web app for just a bit too long, and your membership session gets timed out without warning?  Your users sure do!  Often times the user may not even realize he has been timed out until he finishes completing a form, and clicks the submit button.  At which time not only has the user lost his session, he has lost his data too.

In this post, I will provide a custom control, complete with source code, which will improve this experience for your users by displaying a nice message to inform them that their session is about to expire.  It will do this without any popups or postbacks by using the ASP.NET AJAX frameworkDownload the control, and source code, here.

timeout1

Implementation is easy. Just add the control to your Visual Studio toolbox, and drag it on to your master page wherever you would like the message to appear. Set the properties to your situation and enter markup into the template section as seen here:

<tsc:Timeout 
    ID="Timeout1" 
    runat="server"
    Enabled="true"
    AboutToTimeoutMinutes="28" 
    TimeoutMinutes="30" 
    TimeoutURL="~/Default.aspx?timeout=true"
    CssClass="timeout" 
    DisplayButton="false" 
    ButtonCssClass="btn" 
    ButtonText="Continue My Session!"
    >
    <Template>
        For your safety and protection, your session is about to expire.  If you wish to continue your session, please click here.
    </Template>
</tsc:Timeout>

This control needs the ASP.NET AJAX framework to be included in your project.  It will also require a Script Manager control.  Following is a description of each property

  • Enabled - Whether the control is enabled or not.  I typically place the control on a master page, and set the enabled property in code behind based on whether the user is logged in or not.  If they are not logged in, they can't very well timeout can they?
  • AboutToTimeoutMinutes - Idle minutes until the user is informed that their session is about to time out.
  • TimeoutMinutes - Idle minutes until the membership session will time out.  This should match the forms authentication timeout property in the web.config.
  • TimeoutURL - URL to redirect the user, in the event of a membership session timeout
  • CssClass - CSS class name applied to the control
  • DisplayButton - Whether the button is visible.  If this is false, the entire control is clickable by the user to restore their session.
  • ButtonCssClass - CSS class name applied to the button control
  • ButtonText - The text to be displayed on the button
  • Template - Enter your html or asp.net markup here.  This is the message that will be displayed when the user's membership session is about to timeout.

Enjoy, and please post here if you see any room for improvement in the source.  This is my first attempt at a AJAX enabled custom control.  Download the control, and source code, here.

Comments

schnieds said:

Hey Travis,

Believe it or not I was actually just poking around on the net yesterday looking for something just like this. I had actually resolved to go ahead and write my own, so I was very pleasantly surprised to see your blog post.

I will give it a go and let you know what I think. I will also shoot you back any modifications I add.

Thanks again dude.

Aaron

# February 22, 2008 5:56 PM

Gary said:

I am doing AJAX calls via an MS Ajax Extensions Update Panel.  Is there a way to reset the timer so that it's starts over upon call completion?

# March 6, 2008 3:07 PM

matt said:

Why won't this work in a content page?

I don't want to use it on each and every page - I need to utilise it in 1 or more content pages.

I can't seem to get a handle on the control and set visibility programmatically - nor use it directly on a content page?

Any way to make this happen?

Thanks

# March 7, 2008 12:57 PM

Latish Sehgal said:

To make this control work with asynchronous postbacks, you need to add the below code

   initialize : function()  

   {  

....

       Sys.Application.add_load(Function.createDelegate(this, this._handlePageLoaded));

       .....

},

   _handlePageLoaded: function(sender, e)

   {

       this._resetTimeout();

   },

# August 29, 2008 5:02 PM

Madhava said:

Hi,

thanks a lot for the control.

When I have more than one tab on my browser and I am on a different tab, is there a way to take the user back to the original tab where this timeout message is rendered?

Thanks

Madhava

# October 24, 2008 2:54 PM

stw said:

Can the warning template be fixed in position in the middle of the screen on top of the contents of the page being viewed?  Or does it only appear in the page where you place the control?

# November 6, 2008 10:32 AM

Mark said:

stw, what I did was use positioning and set the z-index within the css definition for the control which does what you want it to. (CssClass="Timeout")  I also wrapped a div around the text in the template with a margin to achieve the look I wanted.

.Timeout

{

   border: thin double Black;

   color: #FFFFFF;

   font-size: medium;

   font-weight: bold;

   margin: 10px;

   background-color: #6699FF;

   position: absolute;

   top: 50px;

   left: 300px;

   z-index: 1000;

   text-align: center;

   font-family: Arial, Helvetica, sans-serif;

}

Travis, thanks for posting a great control!

# November 19, 2008 10:59 AM

Hessner said:

Also a "Great work" from here...

I agree with Mike said:

"Any chance for releasing the .dll with Latish's update? Wasn't sure if it was javascript or not."

Hope you will make the changes and release again soon :-)

# January 5, 2009 8:04 AM

Sankar said:

Is there any way to show the template message on a confirm box?

# February 4, 2009 10:51 AM

Allan said:

2  limitations that I have run into unless I am not using the control correctly. Please help:

a) The timer does not reset on server events. Just continues to count dowm. E.g selecting somethig new on a dropdown with autopost back = true.

b) Client side mouse movements (e.g. clicking on a calendar that uses Ajax or typing into a text box) is not detected and the timer continues to count down.

Any help is appreciated.

thanks

# February 4, 2009 6:13 PM

Mark said:

Is there any way to watch clentside event as well?.Since when writing some text on edotor. or else like moving mouse without server interaction the page is getting timeout.

# February 5, 2009 11:17 AM

Mac said:

Is there a way to have only one instance of this control per session.

I have many popups in the page that uses the master page. So if i put this control on master page than on the timeout it shows on opener page as well as popup.

Secondly is there a way to close the popup when it times out?

# March 6, 2009 5:04 PM

Oleg Vaynshtok said:

I downloaded the zip with control, extracted it on my desktop and tried to add it as dll to my solution. When I add it through choose item on the toolbar, it returns error. Should anything be done before it to prevent the error? Also, can you please display how do you add the control to solution step by step? Thanks,

# March 24, 2009 3:47 PM

Karthi said:

First of all thanks for this article. I need a help here. Is there a way to set the amount of time to display message. eg.,if the session timeout is 30 mins, and AboutToTimeoutMinutes = 25, at 25th minute the alert will appear, now I want the user to respond for the alert in 2 mins, if not then it has to timeout. Need not wait till 30 mins to get timeut. Can any one help in this.

Thanks in advance

# May 7, 2009 10:03 PM

Roger said:

Travis,

Great article!  Excellent work on the code.  The dev community appreciate this. Being a newbie to webdesign, you've saved me tons of head aches and coding time.

Similiar to Karthi's question.  I'd like to display  the remaining time in the browser's status bar.  In my case window.status property.  

Thanks again.

-Roger

# May 28, 2009 2:25 PM

Troy said:

I'm trying to use this in a .master under Microsoft MVC.  I have run into an error:

Microsoft JScript runtime error: 'TSC' is undefined

when calling:

Sys.Application.add_init(function() {

   $create(TSC.Timeout.Timeout, {"aboutToTimeoutMinutes":28,"clientId":"ctl00_Timeout1","displayButton":false,"timeoutMinutes":30,"timeoutURL":"../Default.aspx?timeout=true"}, null, null, $get("ctl00_Timeout1"));

Any Ideas what could be going on?

# July 8, 2009 4:57 PM

Brad Crandell said:

Travis,

I'm getting the following error after adding the control to my masterpage.

Type 'System.Web.UI.ScriptManager' does not have a public property named 'Timeout'.

thanks,

Brad

# July 13, 2009 6:28 PM

Paulzy said:

Travis -

I am new to C# and have only been working with Visual Studio for a few months. I am not sure how to add this to my toolbox and/or getting it to work in my master page. Forgive me but I am more of a designer than a developer. Thanks in advance for any assistance you can give me 'cause I think the idea is cool!

Thanks

Paulzy

# August 5, 2009 8:59 PM

Paulzy said:

Travis -

Thanks again. I was able to figure it out. I just needed to build the project with diferent references to a later framework version of .NET. Works like a charm!

# August 6, 2009 8:53 AM

edcon said:

Do you know how to implement this on a page with  master and submaster pages? i got a scriptmanager error.

I appreciate your help.

edcon

# September 21, 2009 10:03 AM

John said:

I have a problem with this control in that if the main page has the exteneder loaded and the user opens a modal popup (window with iframe) and works in that (for example the details of an item) the main page continues its countdown even though the user is actively on the site and making postbacks/call backs.

Any way you see around this, perhaps having the control do a callback to verify the session is indeed expired before redirecting?

# October 22, 2009 1:54 PM

Tony said:

I have the log out control keep popin up on my log in page, is there a way to disable the control on the login page?

# November 23, 2009 12:04 PM

Scott said:

I was wondering if anyone had tried to add in a session refresh function (with a max refresh variable of course), that would allow for the session to be refreshed in the background, extending timeout?  I am working on it with this control, but I am new to ASP.NET.

Thanks,

Scott

# January 22, 2010 1:34 PM

Noman said:

simply great post !!!

# February 2, 2010 2:34 AM

supageek said:

Travis,

Thanks so much for this post! I am using this control and for the most part it works. I am having an issue for some users though. Every so often I get a 302 Found in the post and it fails to log the user off. I am using prototype on the page as well. Prototype is performing the autosave feature. If the auto save feature isn't called first and the warning comes up the page doesn't call the autosave and the 302 Found issue comes up. Is there a way around this? Is there an issue with the use of the "$" function? Is there a noConflict for AJAX.net? Any help would be great.

# June 7, 2010 6:19 PM

Pall said:

hi,

Anybody found out how to verify session when user has many windows/popups open?  Is there some way to let all controls instences reset timouts when you do a postback on any of the sites you have open.

# June 11, 2010 4:40 AM

Sisyphus said:

Hi,

I configured as below for testing

   AboutToTimeoutMinutes="2"

   TimeoutMinutes="3"

Although I clicked the link to continue my session, the session time was not increased. It redirected to configured url at 3 minutes.

Please help

# June 21, 2010 2:32 AM

Sriman said:

Hi,

First of all I would like to congratulate for the nice control. I have a problem with control .When I amtrying to add the control to toolbox it giving some error and control is not adding to the toolbox

Any help asap is appreciated

# July 3, 2010 6:01 AM

Harsh said:

If I want to have warning message as pop up alert window in my application, How should I do that with this control. Do you have sample code for that?

# October 7, 2010 2:05 PM

sarathi125 said:

Hi,

I'm trying to use the control in the master page and when I start my web site from the content page. It throws a javascript runtime error as

Microsoft JScritp runtime error: 'Timeout' is undefined.

Please tell me how to use this control with master and content page.

Thanks for your time.

# November 11, 2010 7:19 AM

Michael Arnold said:

Great script! Thank you

# November 15, 2010 1:14 PM

Elba Hernandez said:

Travis,

Great control!!, It's working like a charm. Just one question: Is there a way to center the pop up window, which notifies the user about the timeout?

# December 7, 2010 12:52 PM

Amy said:

Finally !!!! Been looking for something like this for months upon months.. Havent tried it yet but I have faith due to the positive feedback/comments.. Fingers Crossed, then I can sign off this project :)

# May 3, 2011 11:13 AM

Nandakumar menon said:

Hi ,

Just want to know that , this required a form authentication ?.

If my application working on windows Int. Authentication will it work properly ?

# May 27, 2011 7:59 AM

raju said:

Is there any way to show the template message on a confirm box?

# June 2, 2011 6:06 AM

Nandakumar.Menon said:

How can i change the buttontext value dynamically. I mean when I use this with a multilinqual application?

# August 8, 2011 8:26 AM

Jabber601 said:

I noticed that ther is a System.Web.Extensions dll in the zip file. Why is this present.Does this not work with the newer one location in the Global Assembly Cache?

# October 15, 2011 6:36 PM

Jabber601 said:

Disregard my last question. I did not notice that the project was set to use .Net 2.0. I changeed it to 3.5 and it compiled.

# October 15, 2011 7:00 PM

guy said:

Previous timeing are not clearing after a asynchronous call in updatepanel.Redirecting is coming before the session end.

# November 5, 2011 9:51 AM

guy said:

im getting irritating with this control.its not working in update panels.

# November 5, 2011 10:50 AM

Just Another Guy said:

Folks (like Guy)

Read the replies here, lots of info about how folks fixed the asynch calls and update panel issues.

For those of you getting TSC undefined msgs, you probably have not put TSC.Timeout.dll into your bin folder....

Great control Travis, has always worked well for me.

# December 22, 2011 2:02 PM

GB said:

Kenneth,

I have it working in my Master Page just fine.  However, I have some links that open a new window.  Now the timeout is working independently in each window.

Any thoughts?

Thanks.

# March 2, 2012 12:19 PM

teach in Korea programs said:

I really enjoy the blog article.Really looking forward to read more. Fantastic.

# June 18, 2012 2:21 PM

teaching in asia without a degree said:

Thanks for the post.Much thanks again. Will read on...

# June 19, 2012 12:55 PM

breast actives said:

ao4kXM Great, thanks for sharing this post. Really Cool.

# June 29, 2012 5:13 PM

breast actives said:

VGkwv9 Awesome blog post.Thanks Again. Awesome.

# June 30, 2012 9:00 AM

Albertha Anders said:

Just read up about the Online Trading Academy Education program, sounds pretty intriguing

# July 1, 2012 4:24 AM

Article Submission said:

HIUqdn Really enjoyed this blog article.Thanks Again. Will read on...

# July 9, 2012 11:33 AM

what is plr articles said:

Im thankful for the article post.Really looking forward to read more. Want more.

# July 27, 2012 6:52 AM

mogkkyjpc@yahoo.co.uk said:

Hey, Just what an fantastic webpage this is

# April 1, 2013 8:38 PM

Numbers said:

I am curious to find out what blog system you're utilizing? I'm experiencing some small security

problems with my latest blog and I would like to find something more secure.

Do you have any recommendations?

# April 16, 2013 1:38 AM

zlsgevokgmail.com said:

hello.thanks for your posted,i really love your site,thanks

# May 22, 2013 4:10 PM