See Technical Demos of the New Features in the DevCraft R2 2016 Release Webinar. Save Your Seat!

Notification - Session Timeout Notification

Your Session will expire in 2 minutes
Notification will be shown in:
60 seconds
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

A common scenario is to show a notification to inform the user that their session is about to expire and to let them continue it if they want. Implementing this will require a timer and a mechanism (at 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 hardcode 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-side update() method when you want to restart the session. This will automatically perform a callback to the server that will renew the user session. This is a codeless performance boost.
  4. If the session should not be restarted, simply use the client-side get_value() method to extract the URL and redirect to it.

Following these steps will let you avoid using the lenghty JavaScript used to create the beautiful timers in this demo.

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

Important notes on using the example: this is a counter for the server Session, not client-side inactivity. If you want to reset the notification timer upon certain actions, look into the following options:

  • Placing the RadNotification in an UpdatePanel with UpdateMode=Always will dispose it with every postback (full or partial), so any other user action that leads to a postback will reset the timer.
  • You may want to register a script from the code-behind that will reset all other UI timers. In this demo the resetTimer function is used for this task.
  • If you want to reset the RadNotification timer upon client-side events, you can do this with the following JavaScript:
    var showIntervalStorage = notification.get_showInterval();
    notification.set_showInterval(0);
    notification.set_showInterval(showIntervalStorage);
  • DefaultCS.aspx
    • DefaultCS.aspx
    • SessionExpired.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Notification.SessionTimeout.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
    <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>
    </div>
    <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" runat="server" Position="Center" Width="270"
        Height="100" OnCallbackUpdate="OnCallbackUpdate" LoadContentOn="PageLoad" AutoCloseDelay="60000"
        OnClientShowing="notification_showing" OnClientHidden="notification_hidden"
        Title="Continue Your Session" Skin="Office2007" EnableRoundedCorners="true"
        ShowCloseButton="false" KeepOnMouseOver="false" CssClass="timeoutNotification">
        <ContentTemplate>
            <div class="infoIcon">
                <img src="images/infoIcon.jpg" alt="info icon" /></div>
            <div class="notificationContent">
                Time remaining:&nbsp; <span id="timeLbl">60</span>
                <telerik:RadButton RenderMode="Lightweight" Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session" Width="190px"
                    Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession">
                </telerik:RadButton>
            </div>
        </ContentTemplate>
    </telerik:RadNotification>
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        serverIDs({ notificationID: '<%= RadNotification1.ClientID %>' });
        //]]>
    </script>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?