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 framework.  Download 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.

Posted: Feb 22 2008, 07:44 AM by travistx | with 53 comment(s)
Filed under: , , , ,

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

Justin said:

Hey Travis, just wanted to say thanks for the terrific control; it saved me a ton of time and I learned a lot by working with it.  Have you considered trying to get it incorporated with the Ajax Control Toolkit on CodePlex (www.codeplex.com/AjaxControlToolkit)?

I did find I needed to add some code for it to work properly on pages that utilize UpdatePanels.  Without the following code, refreshes of the update panel don't actually reset the timeout, so users can timeout even if they're posting back to the server frequently on the same page.

<script language="javascript" type="text/javascript">

   function ResetTimerHandler(sender, args)

   {    

      if (args.get_error() == undefined)

      {    

           var timeoutControl = $get('<%= TimeoutControl.ClientID %>');

           if (timeoutControl != null)

           {

               timeoutControl.control._resetTimeout();

           }

      }

   }

   function load()

   {    

      var prm = Sys.WebForms.PageRequestManager.getInstance();

      if (prm)

      {

          prm.add_endRequest(ResetTimerHandler);

      }

   }

</script>

<body onload="load();">

I included the code above on the master page with the TimeoutControl and it works like a charm.  

Thanks again,

Justin

# July 4, 2008 9:48 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

Mike said:

Travis great work!

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

Thanks for sharing this control.

# December 10, 2008 4:32 PM

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

Steve K said:

I am using this control on master page with ASP.NET AJAX 3.5. I get session timeout or authentication timeout after using the website for an hour or so.

sessionState mode="InProc" didn't work for me. I am using the below settings with ASP.NET state server running.

<authentication mode="Forms">

<forms name=".ASPXSASDD" loginUrl="~/Login.aspx" timeout="30" />

</authentication>

<sessionState timeout="30" mode="StateServer" />

Time out control has timeout as 30 mins and about to timeout as 28 mins. What am I doing wrong?

# January 19, 2009 3:08 PM

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

Raja said:

Is there any way to save my current page work before it redirect to TimeOurURL Page. What would be event get called ? please any one let me know asap.mail me rajaramsofts@gmail.com

Thanks in advance

# February 12, 2009 3:32 PM

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

Kenneth Scott said:

Travis-

Just wanted to say thanks for sharing the control.  It's extremely useful.

Also wanted to mention I've blogged about modifications I made to use the jQuery UI modal dialog upon timeout instead of/in addition to the original show/hide div design.

If you want to check it out, it's on my blog here:

programmerramblings.blogspot.com/.../aspnet-session-timeout-control-jquery.html

# March 13, 2009 1:43 AM

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

Kenneth Scott said:

Hey Travis-

I'm still lovin' this control.  I've just blogged about more changes I made - this time implementing a visible countdown timer in addition to the jquery ui popup stuff I did awhile back.

If you want to check it out:

programmerramblings.blogspot.com/.../aspnet-session-timeout-control-jquery.html

Thanks again-

Kenneth

# August 4, 2009 1:19 AM

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

Sriman said:

Hi,

First of all I would like to congratulate you for the nice control. But I am unable to add the control to toolbox and it is giving me the error as follows

could not load file or assembly System.web.extensions,Version=1.0.61025.0,Culture=neutral,publickeytoken=31bf3856ad364e35

or one of its dependencies.The system cannot find the file specified.

Please suggets me in this regard.

Thanks in advance

# July 3, 2010 6:06 AM

Sriman said:

Hi,

I have added the control succefully, But it is reaising javascript whenever I run my page containing the control

# July 3, 2010 8:02 AM

Sriman said:

And the error is Microsoft JScript runtime error: 'TSC' is undefined

# July 3, 2010 8:18 AM

Katty Pingtown said:

It was rather interesting for me to read this article. Thank author for it. I like such topics and anything connected to them. I would like to read more soon. BTW, pretty good design you have here, but don’t you think it should be changed once in a few months?

Katty  Pingtown

<a href="www.baccaratgirls.com/">exclusive escorts</a>

# September 7, 2010 3:57 PM

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

Jane Trider said:

Damn, certainly great information. Where can I find this subscription?

Jane  Trider

<a href="www.wirelesscameradetectors.com/">camera scrambler</a>

# November 12, 2010 11:21 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

Khan Salahuddin said:

Great Great Code...Travis

a suggestion for those who want to reset session timeout from client side, specially in case of partial postbacks or Ajax pagemethods calls,

$find('yourControlID')._resetTimeout();

for example

$find('ctl00_Timeout1')._resetTimeout();

thanks again for Brilliant user control.

# December 28, 2010 1:51 AM

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
Leave a Comment

(required) 

(required) 

(optional)

(required)