Demo for session timeout is confusing

11 posts, 1 answers
  1. Carl
    Carl avatar
    4 posts
    Member since:
    Apr 2014

    Posted 09 Dec 2014 Link to this post

    http://demos.telerik.com/aspnet-ajax/notification/examples/sessiontimeout/defaultcs.aspx

    The demo at this URL is horribly confusing with unclear references to "UI counters" and a different demo than the "recommended" setup. Please cleanup this demo so it accurately portrays the application scenario!


    For my project, I'm trying to implement a session timeout popup without using a postback. I've added RadNotification tag to the aspx page, assigned ShowInterval and Value properties on the RadNotification from code behind, and now I'm stuck trying to get the javascript to work for the countdown and redirect. I want the notification popup to countdown from 60 and then redirect to another page, however I can not figure out the javascript piece from the demo. Am I correct in assuming I only need the UpdateTimeLabel() and ContinueSession() functions? How do i wire these up so they start firing when the notification is displayed? Is the pageLoad() javascript function needed for this scenario (unclear from the demo)?

    Here is my tag in aspx:
    <telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"
                                Height="100" OnCallbackUpdate="OnCallbackUpdate" LoadContentOn="PageLoad" AutoCloseDelay="60000"
                                Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true"
                                ShowCloseButton="false" KeepOnMouseOver="false">
                                <ContentTemplate>
                                    <div class="infoIcon">
                                        <img src="images/infoIcon.jpg" alt="info icon" />
                                    </div>
                                    <div class="notificationContent">
                                        Time remaining:  <span id="timeLbl">60</span>
                                        <telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session"
                                            Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession">
                                        </telerik:RadButton>
                                    </div>
                                </ContentTemplate>
                            </telerik:RadNotification>

    Code behind:
    if (!IsPostBack)
                {
                    //set the expire timeout for the session
                    Session.Timeout = 2;
                    //configure the notification to automatically show 1 min before session expiration
                    RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000;
                    //set the redirect url as a value for an easier and faster extraction in on the client
                    RadNotification1.Value = Page.ResolveClientUrl("default.aspx");
                }

    And javascript (using a <script> tag directly under <body> tag):
    function UpdateTimeLabel(toReset) {
                var sessionExpired = (seconds == 0);
                if (sessionExpired) {
                    //stopTimer("timeLeftCounter");
                    //redirect to session expired page - simply take the url which RadNotification sent from the server to the client as value
                    window.location.href = $find("<%= RadNotification1.ClientID %>").get_value();
                }
                else {
                    var timeLbl = $get("timeLbl");
                    timeLbl.innerHTML = seconds--;
                }
            }
     
            function ContinueSession() {
                var notification = $find("<%= RadNotification1.ClientID %>");
                //we need to contact the server to restart the Session - the fastest way is via callback
                //calling update() automatically performs the callback, no need for any additional code or control
                notification.update();
                notification.hide();
     
                //resets the showInterval for the scenario where the Notification is not disposed (e.g. an AJAX request is made)
                //You need to inject a call to the ContinueSession() function from the code behind in such a request
                var showIntervalStorage = notification.get_showInterval(); //store the original value
                notification.set_showInterval(0); //change the timer to avoid untimely showing, 0 disables automatic showing
                notification.set_showInterval(showIntervalStorage); //sets back the original interval which will start counting from its full value again
     
                //stopTimer("timeLeftCounter");
                //seconds = 60;
                //updateMainLabel(true);
            }
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 12 Dec 2014 Link to this post

    Hello,

    Here is a simplified version of the code that uses only one timer (having two makes things more complex, as can be expected):

    <script type="text/javascript">
        var timeLeftCounter = null;
        var seconds = 60;
     
        function pageLoad() {
            var xmlPanel = $find("<%= RadNotification1.ClientID %>")._xmlPanel;
            xmlPanel.set_enableClientScriptEvaluation(true);
        };
     
     
        function stopTimer(timer) {
            clearInterval(this[timer]);
            this[timer] = null;
        };
     
        function resetTimer(timer, func, interval) {
            this.stopTimer(timer);
            this[timer] = setInterval(Function.createDelegate(this, func), interval);
        };
     
     
        function OnClientShowing(sender, args) {
            resetTimer("timeLeftCounter", UpdateTimeLabel, 1000);
        }
     
        function UpdateTimeLabel(toReset) {
            var sessionExpired = (seconds == 0);
            if (sessionExpired) {
                stopTimer("timeLeftCounter");
                window.location.href = $find("<%= RadNotification1.ClientID %>").get_value();
            } else {
                var timeLbl = $get("timeLbl");
                timeLbl.innerHTML = seconds--;
            }
        }
         
        function ContinueSession() {
            var notification = $find("<%= RadNotification1.ClientID %>");
            notification.update();
            notification.hide();
            var showIntervalStorage = notification.get_showInterval();
            notification.set_showInterval(0);
            notification.set_showInterval(showIntervalStorage);
            stopTimer("timeLeftCounter");
            seconds = 60;
        }
    </script>
     
    <telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"
                             Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing"
                             LoadContentOn="PageLoad" AutoCloseDelay="60000"
                             Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true"
                             ShowCloseButton="false" KeepOnMouseOver="false">
        <ContentTemplate>
            Time remaining:  <span id="timeLbl">60</span>
            <telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session"
                               Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession">
            </telerik:RadButton>
        </ContentTemplate>
    </telerik:RadNotification>

    Essentially, I copied the code from the demo, removed the bits I did not want and found the function that works with the first timer so I can find its usages and remove them.

    To elaborate on each of the remaining functions:

    • the pageLoad handler is needed because of the specifics of the XmlHttpPanel and RadButton controls + the client callbacks.
    • stopTimer and resetTimer are helper functions
    • OnClientShowing is the notification handler that fires when it shows up. This is where you start the countdown that will, once expired, redirect to the other page and will, in the meantime, update the remaining seconds in the notification.
    • UpdateTimeLabel is where the above calculation occurs via a global variable and a timer.
    • ContinueSession is what is used when the button in the notification is clicked. More details about it are avaialble in the demo's code as comments and in its description.

    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Carl
    Carl avatar
    4 posts
    Member since:
    Apr 2014

    Posted 12 Dec 2014 Link to this post

    Excellent, this is exactly what I needed to get this working!

    I did make one modification though: I wrapped the RadNotification with an <asp:UpdatePanel> with the Update="Always" option since my pages make extensive use of AJAX and I tested that an AJAX request does successfully reset the session timeout.

    Thanks again for the info, hopefully this will help anyone else trying to implement the same scenario.

  5. CHOON AIK
    CHOON AIK avatar
    7 posts
    Member since:
    Sep 2012

    Posted 05 Nov in reply to Marin Bratanov Link to this post

    Hi Marin,

    I had already implemented the java script and aspx same as yours in the master page.How can i Reset the Session Timer while editing the screen.even i had applied the UpdateMode="Always" with the asp:updatedpanel,it haven't got updated.Please find the Code below and tell me if i did anything wrong.Any help will be appreciated.

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

     var timeLeftCounter = null;
                var seconds = 60;
                var secondsBeforeShow = 60;

                //start the main label counter when the page loads
                function pageLoad() {
                    var xmlPanel = $find("<%= RadNotification1.ClientID %>")._xmlPanel;
                    xmlPanel.set_enableClientScriptEvaluation(true);
                };

                //stop timers for UI
                function stopTimer(timer) {
                    clearInterval(this[timer]);
                    this[timer] = null;
                };

                //reset timers for UI
                function resetTimer(timer, func, interval) {
                    this.stopTimer(timer);
                    this[timer] = setInterval(Function.createDelegate(this, func), interval);
                };

                function OnClientShowing(sender, args) {
                    //deal with UI labels
                    resetTimer("timeLeftCounter", UpdateTimeLabel, 1000);
                }

                //-----------------------end of code related only to the demo UI --------------------------------------//


                function UpdateTimeLabel(toReset) {
                    var sessionExpired = (seconds == 0);
                    if (sessionExpired) {
                        stopTimer("timeLeftCounter");
                        //redirect to session expired page - simply take the url which RadNotification sent from the server to the client as value
                        window.location.href = $find("<%= RadNotification1.ClientID %>").get_value();
                    }
                    else {
                        var timeLbl = $get("timeLbl");
                        timeLbl.innerHTML = seconds--;
                    }
                }

                function ContinueSession() {
                    var notification = $find("<%= RadNotification1.ClientID %>");
                    //we need to contact the server to restart the Session - the fastest way is via callback
                    //calling update() automatically performs the callback, no need for any additional code or control
                    notification.update();
                    notification.hide();
                    //resets the showInterval for the scenario where the Notification is not disposed (e.g. an AJAX request is made)
                    //You need to inject a call to the ContinueSession() function from the code behind in such a request
                    var showIntervalStorage = notification.get_showInterval(); //store the original value
                    notification.set_showInterval(0); //change the timer to avoid untimely showing, 0 disables automatic showing
                    notification.set_showInterval(showIntervalStorage); //sets back the original interval which will start counting from its full value again

                    stopTimer("timeLeftCounter");
                    seconds = 60;
                }

    </script>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <ClientEvents OnRequestStart="ContinueSession" OnResponseEnd="ContinueSession" />
        </telerik:RadAjaxManager>

    <asp:UpdatePanel runat="server" UpdateMode="Always">
                <ContentTemplate>
                    <telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="650"
                        Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing"
                        LoadContentOn="PageLoad" AutoCloseDelay="60000" Title="Continue Your Session"
                        EnableRoundedCorners="true" ShowCloseButton="false">
                        <ContentTemplate>
                            <div class="infoIcon">
                                <%--<img  src="SRPS_IMAGES/infoIcon.jpg" alt="info icon" />--%></div>
                            <div class="notificationContent">
                                Your current working session will be expired in <span id="timeLbl" style="font-weight: bold">
                                    60</span> Sec.<br />
                                Please continue your work or save your data before auto logout. Otherwise, your
                                data will be lost.
                                <telerik:RadButton ID="btncontinueSession" runat="server" Text="Continue" Style="margin-top: 10px;
                                    margin-left: 250px; margin-right: auto;" AutoPostBack="false" OnClientClicked="ContinueSession">
                                </telerik:RadButton>
                            </div>
                        </ContentTemplate>
                    </telerik:RadNotification>
                </ContentTemplate>
            </asp:UpdatePanel>

     

    for aspx page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

                'set the expire timeout for the session
                    Session.Timeout = 3
                    'configure the notification to automatically show 1 min before session expiration
                    RadNotification1.ShowInterval = (Session.Timeout - 1) * 60000
                    'set the redirect url as a value for an easier and faster extraction in on the client
                    RadNotification1.Value = Page.ResolveClientUrl("~/Logout.aspx")

        End Sub

     

     Protected Sub OnCallbackUpdate(ByVal sender As Object, ByVal e As RadNotificationEventArgs)

        End Sub

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 07 Nov Link to this post

    Hi,

    Try including the script in the update panel so the global JS variables for the timers get reset when the response is received.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  7. CHOON AIK
    CHOON AIK avatar
    7 posts
    Member since:
    Sep 2012

    Posted 07 Nov in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks for your Immediate Response.All my ASpx pages mostly include java script and the calculation is been done mostly in java script only.After changing the values in a particular screen or even clicking on a particular radtextbox with mouse,is it possible to reset the Session Timer???..if so can u post any example for it.Any help will be appreciated.

     

  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 08 Nov Link to this post

    Hi,

    You should just call the ContinueSession JavaScript function when needed if the functionality is related to client-side interaction.

    If the actions perform a postback, the UpdatePanel with UpdateMode=Always that contains the notification and the script should suffice.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  9. CHOON AIK
    CHOON AIK avatar
    7 posts
    Member since:
    Sep 2012

    Posted 08 Nov in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks for your reply.But i have many aspx pages in my project.I need something in common in the master page .When we  Perform any Client side action in any of the aspx pages or any mouse click,it should hit the master page and the timer should get resetted based on it. can u help you on this by providing any sample..

  10. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 08 Nov Link to this post

    Hi,

    I don't have such a sample because such code would be highly specific to the application. You could, for example, attach a handler to the desired HTML element(s) with jQuery.

    Note that RadNotification is not an activity monitor tool, but a simple toaster popup that can pull data and/or show on certain intervals. Session Notification is not a built-in feature, but an example use case - a block of code performs some application logic and makes the notification show up at some point. This is the approach you should take - implement the detection logic and at the desired point call the notification API to show or update it.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  11. CHOON AIK
    CHOON AIK avatar
    7 posts
    Member since:
    Sep 2012

    Posted 08 Nov in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks for the reply.Just i wanted to know one more thing,is there any other way to reset the session timer without using the RadNotification?.Please advice me on this

  12. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 09 Nov Link to this post

    Hi,

    Just about any request to the server will renew the user session, and the following blog post will show you some: http://www.telerik.com/blogs/different-ways-to-make-a-request-to-the-server.

    RadNotification only facilitates timers and provides a few easy to use events (plus a nice UI), that's all. Session timers and renewals are done by the .NET framework.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017