Session Expired Redirect / Session Refresher Using RadWindowManager and jQuery

Thread is closed for posting
32 posts, 0 answers
  1. 82C90372-04F0-47B7-9A5B-DD4EEB4BFF1F
    82C90372-04F0-47B7-9A5B-DD4EEB4BFF1F avatar
    25 posts
    Member since:
    Jan 2007

    Posted 15 Oct 2009 Link to this post

    Requirements

    RadControls version Q1 2009
    .NET version

    2.0
    Visual Studio version

    2005
    programming language

    VB.NET (C# available on request)
    browser support

    all browsers supported by RadControls

     Additional Requirements
     jQuery 1.3.2

    PROJECT DESCRIPTION
    This control solves two problems. In a custom CMS we wrote, users were losing data when their sessions were expiring during editing of a page. We wanted to be able reset the users session countdown without having to refresh the page. The second problem is auto-redirecting a user to the login screen if they have been logged out due to session inactivity. This control displays a RadWindow confirm popup when there is 90 seconds left on a users session. If the user does not click the prompt within 90 seconds, they are redirected to a login page. Otherwise, the user will silently have their session timer refreshed.

    To implement the control, simply add it to a page whenever the user is logged in. If a user is not logged in, you can either not add the control to the page (optimal), or set it Visible = false.

     For more information about the control or help implementing it, respond to this thread.

    LogoutTimer.ascx

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="LogoutTimer.ascx.vb" 
        Inherits="ScreenMatter.Admin.Web.LogoutTimer" %> 
    <%@ Register Namespace="Telerik.Web.UI" TagPrefix="telerik" Assembly="Telerik.Web.UI" %> 
     
    <script type="text/javascript"
        function sm_timer(sessionLength, redirectUrl) { 
            var timeleft = sessionLength
            var prm = Sys.WebForms.PageRequestManager.getInstance(); 
            if (prm != null) { 
                prm.add_endRequest(function() { 
                timeleft = sessionLength
                }); 
            } 
            var modalVisible = false
            var displayElements = $('.sm_logoutTimer'); 
            function updateDisplay() { 
                if (displayElements != null) { 
                    var m = Math.floor(timeleft / 60); 
                    var s = timeleft % 60; 
                    displayElements.attr('innerHTML', m.toString() + ':' + (s <= 9 ? '0' : '') + s.toString()); 
                } 
            } 
            function logout_callback(arg) { 
                $.get(location.href); 
                modalVisible = false
                timeleft = sessionLength
            } 
            function checkPrompt() { 
                if (timeleft <= 120 && !modalVisible) { 
                    modalVisible = true
                    radconfirm('', logout_callback, 280, 140); 
                    displayElements = $('.sm_logoutTimer'); 
                } 
            } 
            function logout() { 
                document.location.href = redirectUrl
            } 
            function tick() { 
                if (timeleft <= 0) { 
                    logout(); 
                } else { 
                    updateDisplay(); 
                    checkPrompt(); 
                    setTimeout(tick, 1000); 
                } 
                timeleft--; 
            } 
            setTimeout(tick, 1000); 
        } 
    </script> 
     
    <telerik:RadWindowManager runat="server" ID="windowManager" Behaviors="Move" style="z-index:8000"
        <AlertTemplate></AlertTemplate
        <PromptTemplate></PromptTemplate
        <ConfirmTemplate> 
            <div class="rwDialogPopup radconfirm"
                <div class="rwDialogText"
                   You will be logged out due to inactivity soon.<br />Time until logged out: <span class="sm_logoutTimer"></span> 
                </div> 
                <div> 
                    <onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);"
                        <span class="rwOuterSpan"><span class="rwInnerSpan">Stay Logged In</span></span></a> 
                </div> 
            </div> 
        </ConfirmTemplate> 
    </telerik:RadWindowManager> 
     

    LogoutTimer.ascx.vb
    Public Partial Class LogoutTimer 
        Inherits System.Web.UI.UserControl 
     
        Private Shared SessionDurationInSeconds As Integer = System.Web.HttpContext.Current.Session.Timeout * 60 
        Private _logoutUrl As String 
     
        ''' <summary> 
        ''' When the user is logged out they will be redirected here. 
        ''' </summary> 
        Public Property LogoutUrl() As String 
            Get 
                Return _logoutUrl 
            End Get 
            Set(ByVal value As String
                _logoutUrl = value 
            End Set 
        End Property 
     
        Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load 
            Dim timeoutStartScript As String = String.Format("sm_timer({0},""{1}"");", SessionDurationInSeconds, LogoutUrl) 
            Page.ClientScript.RegisterStartupScript(GetType(LogoutTimer), "TimeoutStartScript", timeoutStartScript, True
        End Sub 
     
    End Class 

    Example implementation:

        Protected Sub OnLoad(ByVal e As System.EventArgs) 
            If Current.User.Identity.IsAuthenticated Then 
                Dim loginControl As Control = LoadControl("~/auth/controls/LogoutTimer.ascx"
                LoggedInPanel.Controls.Add(loginControl) 
            End If 
        End Sub 
     
      

  2. 000585EE-7DFC-4C10-B6EB-448F2DA3AFB4
    000585EE-7DFC-4C10-B6EB-448F2DA3AFB4 avatar
    7207 posts
    Member since:
    Jul 2016

    Posted 16 Oct 2009 Link to this post

    Hello dlamprey,

    Thank you for the sample. Your points were updated.


    Kind regards,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. 9A4B6811-0411-4FBC-BDED-F5A5E5933ED9
    9A4B6811-0411-4FBC-BDED-F5A5E5933ED9 avatar
    11 posts
    Member since:
    Nov 2006

    Posted 21 Oct 2009 Link to this post

    Hi. I really thank you for sharing this code. I find it's very useful and try to use it in my project.

    I found a problem when I loaded this code in Masterpage so that all the child page inherited can get the message when session timeout. I found a problem when a child page already default with a timer control, this code will not work correctly. For example, if a child page with a timer control set to 1 minute refresh a AJAX control, then this code run up to 1min and auto reset to session.timeout period. I'd like your help to show me how to get around with this?

    One more thing, if we never post back after click on the "stay Login" button in the RadConfirm, I found that session will really expired? Is the code correct for this area? No need post back?
  4. A8CC7FC9-F9F4-4766-A986-8D7A7277368B
    A8CC7FC9-F9F4-4766-A986-8D7A7277368B avatar
    31 posts
    Member since:
    Oct 2009

    Posted 06 Nov 2009 Link to this post

    dlamprey,

    Thank you so much! This is a great help!

    I made one change, though: I used "Page_PreRender" as opposed to "OnLoad" to check user authentication and load the control, since using OnLoad meant I had to override the original method--actually, I tried, but the page did not render anything.

    Ivan
  5. A8CC7FC9-F9F4-4766-A986-8D7A7277368B
    A8CC7FC9-F9F4-4766-A986-8D7A7277368B avatar
    31 posts
    Member since:
    Oct 2009

    Posted 06 Nov 2009 Link to this post

    dlamprey,

    I found one issue: if a ModalPopupExtender is active, the RadWindow shows behind the ModalPopupExtender. I played with the z-index a little, but couldn't get it to show on top of the modal popup. Any ideas?

    Thanks again!

    Ivan
  6. 000585EE-7DFC-4C10-B6EB-448F2DA3AFB4
    000585EE-7DFC-4C10-B6EB-448F2DA3AFB4 avatar
    7207 posts
    Member since:
    Jul 2016

    Posted 09 Nov 2009 Link to this post

    Hi Ivan,

    The ModalPopupExtend has a very hight z-Index value. I suggest using IE Dev toolbar, Firebug or a similar tool to see what it is and then to set a higher z-Index to the RadWindowManager by using the style property.


    Regards,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. 82C90372-04F0-47B7-9A5B-DD4EEB4BFF1F
    82C90372-04F0-47B7-9A5B-DD4EEB4BFF1F avatar
    25 posts
    Member since:
    Jan 2007

    Posted 09 Nov 2009 Link to this post

    leesam,
    A timer control keeps the session active, so this control would have to be modified to support it. I guess you would want to remove this bit:

     var prm = Sys.WebForms.PageRequestManager.getInstance();  
     if (prm != null) {  
         prm.add_endRequest(function() {  
         timeleft = sessionLength;  
         });  
    }  

    We are posting back when clicking the stay logged in button. The line is:

     $.get(location.href);  
  8. 82C90372-04F0-47B7-9A5B-DD4EEB4BFF1F
    82C90372-04F0-47B7-9A5B-DD4EEB4BFF1F avatar
    25 posts
    Member since:
    Jan 2007

    Posted 09 Nov 2009 Link to this post

    I have updated this control with some new functionality and I should be reposting it soon. : )
  9. 000585EE-7DFC-4C10-B6EB-448F2DA3AFB4
    000585EE-7DFC-4C10-B6EB-448F2DA3AFB4 avatar
    7207 posts
    Member since:
    Jul 2016

    Posted 10 Nov 2009 Link to this post

    That's great to hear, dlamprey :)

    Send me a ticket with the new update when you are ready and I will upload it here right away.


    Best wishes,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. A8CC7FC9-F9F4-4766-A986-8D7A7277368B
    A8CC7FC9-F9F4-4766-A986-8D7A7277368B avatar
    31 posts
    Member since:
    Oct 2009

    Posted 10 Nov 2009 Link to this post

    Thanks Georgi,

    The ModalPopupExtend z-index is 100001. I set the RadWindowManager to 200001, and it is fine now.

    Ivan
  11. A8CC7FC9-F9F4-4766-A986-8D7A7277368B
    A8CC7FC9-F9F4-4766-A986-8D7A7277368B avatar
    31 posts
    Member since:
    Oct 2009

    Posted 10 Nov 2009 Link to this post

    dlamprey, as you are working on this, may I make a suggestion?

    Suppose that someone is entering a long text. The user is active, but no request is sent to the server, so the warning window comes up a few minutes before the session expires. That is fine, except that the user may get confused—as far as they are concerned, they are active.

    So, what do you think about having keyboard events triggering the logout timer for the above specific situation? The logic would be the same as you have now, except that the warning window would not come up (you’d also need to have some type of property to let the script know whether to monitor keyboard events). Does this make sense? Maybe it could be as easy as adding some type of querystring to the redirect so that the windows doesn’t come up?

    Thanks again for developing this control! It's been a huge time saver for me.

    Ivan
  12. B305585F-FD85-48FF-967A-F58F6F7DB12C
    B305585F-FD85-48FF-967A-F58F6F7DB12C avatar
    68 posts
    Member since:
    Aug 2009

    Posted 25 Jun 2010 Link to this post

    Hi dlamprey,

    You said in a previous post that you had updated the control.  Have you posted or uploaded the new version somewhere??

    Thanks,
    Manuel
  13. BFDC7063-3372-4C76-A3A3-D3DE6570A57B
    BFDC7063-3372-4C76-A3A3-D3DE6570A57B avatar
    26 posts
    Member since:
    Nov 2006

    Posted 28 Jul 2010 Link to this post

    Hi,

    Did the updated control ever get uploaded?

    Cheers
  14. 000585EE-7DFC-4C10-B6EB-448F2DA3AFB4
    000585EE-7DFC-4C10-B6EB-448F2DA3AFB4 avatar
    7207 posts
    Member since:
    Jul 2016

    Posted 29 Jul 2010 Link to this post

    Hi Lourein,

    We didn't receive the update. Of course once we have it, we will upload it right away.


    Greetings,
    Georgi Tunev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  15. 2655B812-3D3D-4EB2-ABD4-87DC9DD64BBD
    2655B812-3D3D-4EB2-ABD4-87DC9DD64BBD avatar
    33 posts
    Member since:
    Nov 2009

    Posted 23 Sep 2010 Link to this post

    Great Job! Many Thanks!

    Regards,
    Tom
  16. FA758D64-B4A0-41B8-B60C-D7692C9867F3
    FA758D64-B4A0-41B8-B60C-D7692C9867F3 avatar
    1 posts
    Member since:
    Sep 2007

    Posted 13 Oct 2010 Link to this post

    Where do I download the lated updated version of this control?  Is C# version available?
  17. 30289048-B678-4AE1-8C19-14C13150F3D2
    30289048-B678-4AE1-8C19-14C13150F3D2 avatar
    1 posts
    Member since:
    Jun 2007

    Posted 24 Jan 2011 Link to this post


  18. EC333E6A-D098-481C-AB1E-C04AC44C8080
    EC333E6A-D098-481C-AB1E-C04AC44C8080 avatar
    13 posts
    Member since:
    Jul 2010

    Posted 24 Feb 2011 Link to this post

    Anyone have the latest version of this code for download?
  19. EC333E6A-D098-481C-AB1E-C04AC44C8080
    EC333E6A-D098-481C-AB1E-C04AC44C8080 avatar
    13 posts
    Member since:
    Jul 2010

    Posted 07 Mar 2011 Link to this post

    I now have a version of this user control functioning in a C# master page scenario.  Hope that this helps someone out...


    LogoutTimer.ascx.cs
    public partial class LogoutTimer : System.Web.UI.UserControl
    {
        //private static int SessionDurationInSeconds = System.Web.HttpContext.Current.Session.Timeout * 60;
        private static int SessionDurationInSeconds = 10;  // <-- change this for testing
     
        private string _logoutUrl;
     
        public string LogoutUrl
        {
            get { return _logoutUrl; }
            set { _logoutUrl = value; }
        }
     
        protected void Page_Load(object sender, System.EventArgs e)
        {
            string timeoutStartScript = string.Format("sm_timer({0},\"{1}\");", SessionDurationInSeconds, LogoutUrl);
            Page.ClientScript.RegisterStartupScript(typeof(LogoutTimer), "TimeoutStartScript", timeoutStartScript, true);
        }
     
    }

    LogoutTimer.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="LogoutTimer.ascx.cs" Inherits="LogoutTimer" %>
    <%@ Register Namespace="Telerik.Web.UI" TagPrefix="telerik" Assembly="Telerik.Web.UI" %>
     
    <script type="text/javascript">
        function sm_timer(sessionLength, redirectUrl) {
            var timeleft = sessionLength;
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function () {
                    timeleft = sessionLength;
                });
            }
            var modalVisible = false;
            var displayElements = $('.sm_logoutTimer');
            function updateDisplay() {
                if (displayElements != null) {
                    var m = Math.floor(timeleft / 60);
                    var s = timeleft % 60;
                    document.getElementById("sm_logoutTimer").innerHTML = m.toString() + ':' + (s <= 9 ? '0' : '') + s.toString()
                }
            }
            function logout_callback(arg) {
                $.get(location.href);
                modalVisible = false;
                timeleft = sessionLength;
            }
            function checkPrompt() {
                if (timeleft <= 120 && !modalVisible) {
                    modalVisible = true;
                    radconfirm('', logout_callback, 280, 140);
                    displayElements = $('u');
                }
            }
            function logout() {
                document.location.href = redirectUrl;
            }
            function tick() {
                if (timeleft <= 0) {
                    logout();
                } else {
                    updateDisplay();
                    checkPrompt();
                    setTimeout(tick, 1000);
                }
                timeleft--;
            }
            setTimeout(tick, 1000);
        }
    </script>
     
      
    <telerik:RadWindowManager runat="server" ID="windowManager" Behaviors="Move" Style="z-index: 200001">
        <AlertTemplate>
        </AlertTemplate>
        <PromptTemplate>
        </PromptTemplate>
        <ConfirmTemplate>
            <div class="rwDialogPopup radconfirm">
                <div class="rwDialogText">
                    You will be logged out due to inactivity soon.<br />
                    Time until logged out:
                    <div id="sm_logoutTimer">
                    </div>
                </div>
                <div>
                    <a onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);"><span class="rwOuterSpan"><span class="rwInnerSpan">Stay Logged In</span></span></a>
                </div>
            </div>
        </ConfirmTemplate>
    </telerik:RadWindowManager>

    On the master page include the following:
    <%@ Register TagPrefix="LT" TagName="LogoutTimer" Src="~/LogoutTimer.ascx" %>
     
    .....
     
     
     
        <LT:LogoutTimer LogoutUrl="Logout.htm" runat="server" ID="LogoutTimer" />

  20. 000585EE-7DFC-4C10-B6EB-448F2DA3AFB4
    000585EE-7DFC-4C10-B6EB-448F2DA3AFB4 avatar
    7207 posts
    Member since:
    Jul 2016

    Posted 08 Mar 2011 Link to this post

    Hello Joe,

    Thank you very much for the code - I am sure, that the community will benefit from it.

    Your points have been updated.

    Best wishes,
    Georgi Tunev
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  21. 899B34D5-5053-4F9A-A191-B97D7BE76259
    899B34D5-5053-4F9A-A191-B97D7BE76259 avatar
    5 posts
    Member since:
    Jun 2010

    Posted 26 Jun 2011 Link to this post

    Hi ,
    This code didn't worked for me, can someone give me a full example? Maybe i am missing some thing ....?

    Regards,
    Syed


  22. 2655B812-3D3D-4EB2-ABD4-87DC9DD64BBD
    2655B812-3D3D-4EB2-ABD4-87DC9DD64BBD avatar
    33 posts
    Member since:
    Nov 2009

    Posted 27 Jun 2011 Link to this post

    Hey Syed,
    It would probably be helpful if you could describe how the code 'didn't work' for you. Were there errors? Unexpected behavior? etc.

    Thanks,
    Tom
  23. 899B34D5-5053-4F9A-A191-B97D7BE76259
    899B34D5-5053-4F9A-A191-B97D7BE76259 avatar
    5 posts
    Member since:
    Jun 2010

    Posted 27 Jun 2011 Link to this post

    Hi Tom,

    Thanks for quick response. Actually there is no error. That rad windows didn't  pop up and redirects to login page.

    Regards,
    Syed

  24. 6A29B3B5-7DD8-467D-A30C-808E661544CA
    6A29B3B5-7DD8-467D-A30C-808E661544CA avatar
    38 posts
    Member since:
    May 2008

    Posted 08 Aug 2011 Link to this post

    Make sure you have jqeury, as specified in the requirements above.

  25. FE6DC839-AFFE-42BB-A106-BEA6A5113F34
    FE6DC839-AFFE-42BB-A106-BEA6A5113F34 avatar
    9 posts
    Member since:
    Dec 2007

    Posted 03 Nov 2011 Link to this post

    Thanks for posting the updated code.  I've found it works great in Mozilla but I can't seem to get it to post anything back when using IE7.  The function is being called as an alert I stuck in there will pop up.  Using Fiddler I see no traffic to the server though.  I am using the jQuery library built into the Telerik 2011 Q1 Ajax library so I had to modify the  postback line to read
    $telerik.$.get(location.href);

    but as I said, this works fine in Mozilla.  Any ideas why it wouldn't work in IE7?  Should I try to use the latest version of the jQuery library directly?  Thanks.
  26. CC19DEC6-2354-4A92-9BBE-E6A743729F98
    CC19DEC6-2354-4A92-9BBE-E6A743729F98 avatar
    39 posts
    Member since:
    Oct 2007

    Posted 28 Nov 2011 Link to this post

    Is there an updated VB version available? For Q1 2011 the following line generates an exception:

        var displayElements = $('.sm_logoutTimer');

    Error:
    Microsoft JScript runtime error: Object expected

    Can't get this code to run.
  27. FE6DC839-AFFE-42BB-A106-BEA6A5113F34
    FE6DC839-AFFE-42BB-A106-BEA6A5113F34 avatar
    9 posts
    Member since:
    Dec 2007

    Posted 09 Feb 2012 Link to this post

    The issue with IE8 had to do with caching.  I changed

    $.get(location.href)

     to

    $.get(location.href, { ts: new Date().getTime() });

  28. D31550EA-DCE6-4D3D-83B1-BD7A428264EF
    D31550EA-DCE6-4D3D-83B1-BD7A428264EF avatar
    9 posts
    Member since:
    Oct 2012

    Posted 29 Mar 2012 Link to this post

    I use a variation that gives a countdown warning time (.e.g. 2mins). It was working fine until I found (for some reason) that it stopped showing the countdown time. Everything other aspect was ok. After a little tinkering I got it working again by changing innerHtml to html. Not sure  Hope that helps someone out.

    <script type="text/javascript">
        function sm_timer(sessionLength,warningSeconds,redirectUrl) {
            var timeleft = sessionLength;
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function () {
                    timeleft = sessionLength;
                });
            }
            var modalVisible = false;
            var displayElements = $('.sm_logoutTimer');
            function updateDisplay() {
                if (displayElements != null) {
                    var m = Math.floor(timeleft / 60);
                    var s = timeleft % 60;
                    displayElements.html(m.toString() + ':' + (s <= 9 ? '0' : '') + s.toString());
                }
            }
            function logout_callback(arg) {
                $.get(location.href, { ts: new Date().getTime() });
                modalVisible = false;
                timeleft = sessionLength;
            }
            function checkPrompt() {
                if (timeleft <= warningSeconds && !modalVisible) {
                    modalVisible = true;
                    radconfirm('Session Timeout Warning!', logout_callback, 350, 120);
                    displayElements = $('.sm_logoutTimer');
                }
            }
            function logout() {
                document.location.href = redirectUrl;
            }
            function tick() {
                if (timeleft <= 0) {
                    logout();
                } else {
                    updateDisplay();
                    checkPrompt();
                    setTimeout(tick, 1000);
                }
                timeleft--;
            }
            setTimeout(tick, 1000);
        
    </script>
  29. 7CF1E1F0-267F-4D1D-94C1-155C9B725A36
    7CF1E1F0-267F-4D1D-94C1-155C9B725A36 avatar
    17 posts
    Member since:
    Jul 2005

    Posted 12 Dec 2012 Link to this post

    Ok, I managed to ALMOST get this to work by adding the control to an Ajax panel.

    The problem I face is the message text is not being presented to the user. The countdown is also not being presented.

    All I see is a (squished) version of the icon image and the 2 buttons.

    I tried resizing the dialog but it does not fix the image or present the text.

    Does anyone actually have this working and if so, what needs to be done?

    I've tried it in both IE and Firefox with the same results.


  30. DCB689AC-5EDD-4C06-8166-5E6DE2B48F26
    DCB689AC-5EDD-4C06-8166-5E6DE2B48F26 avatar
    16 posts
    Member since:
    Sep 2010

    Posted 08 Oct 2013 Link to this post

    Hi, I run into same problem as Dave. Any updates for this?
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.