This is a migrated thread and some comments may be shown as answers.

Demo for session timeout is confusing

12 Answers 364 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Carl
Top achievements
Rank 1
Carl asked on 09 Dec 2014, 07:32 PM
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);
        }

12 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 12 Dec 2014, 09:08 AM

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.

 
0
Carl
Top achievements
Rank 1
answered on 12 Dec 2014, 08:11 PM
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.

0
CHOON AIK
Top achievements
Rank 1
answered on 05 Nov 2016, 10:23 AM

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

0
Marin Bratanov
Telerik team
answered on 07 Nov 2016, 12:00 PM

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.
0
CHOON AIK
Top achievements
Rank 1
answered on 08 Nov 2016, 01:59 AM

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.

 

0
Marin Bratanov
Telerik team
answered on 08 Nov 2016, 09:04 AM

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.
0
CHOON AIK
Top achievements
Rank 1
answered on 08 Nov 2016, 10:46 AM

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

0
Marin Bratanov
Telerik team
answered on 08 Nov 2016, 10:56 AM

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.
0
CHOON AIK
Top achievements
Rank 1
answered on 09 Nov 2016, 01:17 AM

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

0
Marin Bratanov
Telerik team
answered on 09 Nov 2016, 07:50 AM

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.
0
M.
Top achievements
Rank 1
answered on 09 Oct 2019, 05:43 AM

Hi Marin, 

I've followed almost all the Telerik forums and docs on this and able to get RadNotification running this from Site.Master under asp:UpdatePanel for asp.net application.

 

The issue is following code from Site.Master.cs does not work from a page "save" event. 

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("logout.aspx");
            }

 

The code is executed fine however RadNotification still takes you to the logout page(timer kicks in but session is session is still alive I can still access rest of application menus as the session has been reset (somehow it is not updating radNotification under updatepanel which works otherwise). Is there anyway to make it work? 

 

Thanks, 

M. 

 

0
Eyup
Telerik team
answered on 14 Oct 2019, 05:00 AM

Hello,

 

Here are my suggestions for this case:

1. Ensure that the notification works as expected when AJAX is disabled:
https://www.telerik.com/support/kb/aspnet-ajax/ajaxmanager/details/get-more-descriptive-errors-by-disabling-ajax

2. Check the client-side resetting logic for this specific scenario provided in the Description of the following live sample:
https://demos.telerik.com/aspnet-ajax/notification/examples/sessiontimeout/defaultcs.aspx

3. Try replacing the UpdatePanel with RadAjaxPanel

4. You can also check these samples:
https://demos.telerik.com/aspnet-ajax/ajaxpanel/application-scenarios/persisting-javascript/defaultcs.aspx
https://demos.telerik.com/aspnet-ajax/ajaxpanel/application-scenarios/recreate-scripts/defaultcs.aspx

5. If the issue remains, you can open a formal support thread to send us a very basic isolated runnable sample demonstrating the problem so we can further investigate it locally.

Regards,
Eyup
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Notification
Asked by
Carl
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Carl
Top achievements
Rank 1
CHOON AIK
Top achievements
Rank 1
M.
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or