Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Notification / Session Timeout notification

Your Session will expire in 2 minutes
Notification will be shown in:
60 seconds

  • Session timeout notification


    A common scenario is to show a notification to inform the user that his session is about to expire and to let him continue it if he wants. Implementing this will require a timer and a mechanism (best - a callback, AJAX and postback will also do the trick) to contact the server to restart the session if the user decides this. All this is very simple to achieve with RadNotification as shown in the demo. The demo achieves this scenario almost codeless, the additional code is for UI labels and demonstration purposes.

    Here is how to easily achieve the core functionality step-by-step:
    • 1. The ShowInterval property is set to automatically show the popup as time before session timeouts as you desire. This simple setting replaces using any timers at all.
    • 2. The Value property is set to the desired url of the page which shows when session expires. You could of course evaluate it on the client or send it through different techniques, even hard - code it, but this way is more elegant and the notification takes care of sending it to the client where you can easily extract it.
    • 3. Declare a handler for the OnCallbackUpdate event (it could be simply blank) and call the client method update() when you want to restart the session. This will automatically perform a callback to the server - codeless boost of performance.
    • 4. If the session should not be restarted, simply use the client get_value() method to extract the url and redirect to it.

    As a conclusion, the RadNotification is a very good, almost codeless solution for this popular scenario. The same could be achieved with other popups as well, but this approach is the most straight forward one.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Notification.SessionTimeout.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .clockSession
            {
                width: 409px;
                height: 174px;
                margin: auto;
                background: url(Img/clockSession.jpg) no-repeat;
            }
            
            .contSession
            {
                width: 270px;
                float: right;
                text-align: center;
                margin: 20px 20px 0 0 ;
            }
            
            .sessionExpire
            {
                color: #3366ff;
                padding-top: 30px;
            }
            
            .showNotification
            {
                padding-top: 15px;
                color: #666;
            }
            
            .timeRemain
            {
                padding-top: 5px;
                color: #000;
            }
            
            .timeSeconds
            {
                font-size: 30px;
            }
            
            .infoIcon, .notificationContent
            {
                display: inline-block;
                zoom: 1;
                *display: inline;
            }
            
            .infoIcon
            {
                width: 32px;
                height: 32px;
                margin: 0 10px ;
                vertical-align: top;
            }
            
            .notificationContent
            {
                width: 160px;
                vertical-align: bottom;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <script type="text/javascript">

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


            //all the timers declared below are used for the demo UI only - to update UI texts.
            //The functionality related to the scenario itself is handled by RadNotification automatically out of the box
            var mainLblCounter = null;
            var timeLeftCounter = null;
            var seconds = 60;
            var secondsBeforeShow = 60;
            var mainLabel;

            //start the main label counter when the page loads
            function pageLoad() { mainLabel = $get("mainLbl"); resetTimer("mainLblCounter", updateMainLabel, 1000); };

            //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
                mainLabel.innerHTML = 0;
                resetTimer("timeLeftCounter", UpdateTimeLabel, 1000);
                stopTimer("mainLblCounter");
            }

            function updateMainLabel(toReset) {
                secondsBeforeShow = (toReset == true) ? 60 : secondsBeforeShow - 1;
                mainLabel.innerHTML = secondsBeforeShow;
            }

            function OnClientHidden() {
                updateMainLabel(true);
                mainLabel.style.display = "";
                resetTimer("mainLblCounter", updateMainLabel, 1000);
            }


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


            //update the text in the label in RadNotification
            //this could also be done automatically by using UpdateInterval. However, this will cause callbacks [which is the second best solution then javascript] on every second that is being count
            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").get_value();
                }
                else {
                    var timeLbl = $get("timeLbl");
                    timeLbl.innerHTML = seconds--;
                }
            }

            function ContinueSession() {
                var notification = $find("RadNotification1");
                //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();
                stopTimer("timeLeftCounter");
                seconds = 60;
                updateMainLabel(true);
            }

        </script>
        <div class="clockSession">
            <div class="contSession">
                <div class="sesseionExpire">
                    Your Session will expire in
                    <%= Session.Timeout %>
                    minutes</div>
                <div class="showNotification">
                    Notification will be shown in:</div>
                <div class="timeRemain">
                    <span class="timeSeconds"><span id="mainLbl">60 </span></span>seconds</div>
            </div>
        </div>
        <telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"
            Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing"
            OnClientHidden="OnClientHidden" LoadContentOn="PageLoad" AutoCloseDelay="60000"
            Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true">
            <ContentTemplate>
                <div class="infoIcon">
                    <img src="Img/infoIcon.jpg" alt="info icon" /></div>
                <div class="notificationContent">
                Time remaining:&nbsp;
                    <span id="timeLbl">60</span>
                    <telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session"
                        Style="margin-top: 10px;">
                    </telerik:RadButton>
                </div>
            </ContentTemplate>
        </telerik:RadNotification>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451