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.

51 Comments

  • 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

  • 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?

  • 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

  • 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();
    },

  • 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

  • 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?

  • 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!

  • 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 :-)

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

  • 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

  • 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.

  • 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?

  • 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,

  • 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

  • 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

  • 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?

  • 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

  • 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

  • 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!

  • 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


  • 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?

  • 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?

  • 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

  • simply great post !!!

  • 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.

  • 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.

  • 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

  • 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

  • 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?

  • 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.

  • Great script! Thank you

  • 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?

  • 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 :)

  • Hi ,

    Just want to know that , this required a form authentication ?.
    If my application working on windows Int. Authentication will it work properly ?

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

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

  • 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?

  • 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.

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

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

  • 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.

  • 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.

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

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

  • VGkwv9 Awesome blog post.Thanks Again. Awesome.

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

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

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

  • Hey, Just what an fantastic webpage this is

  • 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?

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

Comments have been disabled for this content.