Session Timer and Refresher Popup using RadWindow

14 posts, 2 answers
  1. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 15 Oct 2015 Link to this post

    Requirements

    Telerik Product and Version

    Tested with  version 2015.2.826.45, but should be compatible with older versions too

    Supported Browsers and Platforms

    Chrome, Opera, FireFox, IE 9 and up, Edge

    Components/Widgets used (JS frameworks, etc.)

    JavaScript,jquery, jquery-ui, Extended RadWindow Animation Library


    PROJECT DESCRIPTION 
    This is a user control that will show a session ending popup when a certain amount of time is left for user's session to end. Additionally, it will also allow  the user to extend the current session. All source code for this user control including html, server-side code and client-side scripts  are under Demo Files folder in attached zip file. There is also detailed documentation under Documentation folder in attached zip file that you can use to quickly include this control in your ASP.Net project.

    • A screenshot of this session timer popup can be seen at this URL: Screenshot of Session Timer Popup.
    • The ASP.Net project using this control should have forms authentication enabled and also cookies must be enabled on end user's browser.
    • It's best to include this user control in the master page so it applies to the entire website but you could include it in individual pages rather than the master page, if you wanted to.
    • All behavior of this control can be configured through it's properties.
    • Given below are two example markups that can be used for this user control in your ASP.Net page /master page. The first one is a very simple scenario that will make the popup control behave in a default manner and show up one minute before the end of session if session timeout is greater than or equal to 2 minutes, while the second one shows how easy it is to customize the behavior of this control and show it 45 seconds before end of session.
    • The texts of various messages in the popup can also be customized using properties. You can read more about these properties under PROPERTIES for this control in attached documentation.
    • The property that decides when exactly this popup is shown is based on the value of TimeBeforeSessionEndToShowPopup property, which should always be in milliseconds.
    • This control will work with regular postbacks, ajax postbacks, ajax-enabled web service calls, PageMethod calls or Web API calls. Also, it supports both sliding and absolute expiration.

    Easy and Simple Control Markup

    <uc1:SessionTimer runat="server" ID="SessionTimer" />

     

    Customized Control Markup

    <uc1:SessionTimer runat="server" ID="SessionTimer" Skin="MetroTouch" SessionExtenderEnabled="true" UseWebServiceToExtendSession="true" UseExtendedRadWindowLibrary="true"
                WebServiceMethodPath="WebService.ExtendSession" RedirectToLoginOnTimeoutAlways="true" LogInfo="false" Width="300" NativeAnimation="None"  TimeBeforeSessionEndToShowPopup="45000"
                SessionTimedoutMessage="Session is no more valid" SessionTimedoutWarningMessage="Your session has ended. Please login again. You are being redirected to login page."
                PopupAnchorPosition="bottomRight" JqueryUIAnimationEnabled="false" JqOpenAnimation="resize" JqCloseAnimation="resize" JqOpenAnimationDuration="400" JqCloseAnimationDuration="300" />
     

     


    If you include this user control in your ASP.Net project, you do not have to write any code after you have followed the steps mentioned under STEPS needed to start using Session Timer control  in documentation.
    In the attachment, a full working demo website is included as well as detailed documentation on this control. You can easily create a demo website on your computer using files under Demo Files  folder in attachment and following the instructions mentioned under DEMO Setup for this control in documentation.​

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 16 Oct 2015 Link to this post

    Hello Sunil,

    Thank you for your contribution, I hope many people will find this project useful. I have updated your Telerik points for sharing your work with the community.

    Regards,

    Marin Bratanov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 28 Oct 2015 in reply to Marin Bratanov Link to this post

    Please use the latest attached files if you are using this in your application.

    Some extra functionality as explained below is there in attached version. Make sure you use the latest script files for this new functionality.

    • You can fix the position of the session timer popup when page is scrollable. Just set IsPopupPositionFixed="true"  for the user control.
    • You can now show the login page as a modal or non-modal popup when session times out by simply setting this property of user control: ShowLoginInPopupOnTimeout="true".  In last version, you could automatically redirect the user to login page on session timeout which is still there as a default behavior. Sample code for this new functionality is as given below where you can see that there are a number of useful properties prefixed by LoginPopup to control the login popup in an easy and quick manner; make sure you set the properties of LoginPopupWidth and LoginPopupHeight  else the login popup might not look nice. ​Also note that the property of  LoginPopupJqOpenAnimation can take only one of the following values:slide, resize, fade, sizeUp. If you set NativeAnimation to a value other than None then native animation will be applied to the login popup.  An example of how this new functionality looks like can be seen at this URL: Login in a popup on session timeout. One of the big advantages of this is that you can achieve this scenario by simply setting some properties and let the user control handle all complexity so you don't have to write any code for this.
    • You can set the text of session extender button by setting the property of SessionExtenderButtonText.
    • You can set the login URL unlike in last version. If you do not set the login URL then its automatically obtained from web config file. Use the property of LoginUrl  for this.
    • You can have the user control in master page or a content page, and just set Visible="false" to not render the user control. There will be no errors when doing this. But in last version if you did this, you would notice some JavaScript errors.

     

    Session timer user control showing Login Popup properties

    <uc1:SessionTimer runat="server" ID="SessionTimer" Skin="MetroTouch" SessionExtenderEnabled="true" UseWebServiceToExtendSession="true" UseExtendedRadWindowLibrary="true"
               WebServiceMethodPath="WebService.ExtendSession" RedirectToLoginOnTimeoutAlways="true" LogInfo="false" Width="300" NativeAnimation="FlyIn"  TimeBeforeSessionEndToShowPopup="45000"
               SessionTimedoutMessage="Session is no more valid" SessionTimedoutWarningMessage="Your session has ended. Please login again.  You are being redirected to login page."
               PopupAnchorPosition="bottomRight" JqueryUIAnimationEnabled="false" JqOpenAnimation="resize" JqCloseAnimation="resize" JqOpenAnimationDuration="400" JqCloseAnimationDuration="300"  SessionExtenderButtonText ="Refresh Session"
               IsPopupPositionFixed="true"  ShowLoginInPopupOnTimeout="true" LoginPopupHeight="320" LoginPopupWidth="420" LoginPopupIsModal="true"  LoginPopupJqOpenAnimation="sizeUp" LoginPopupJqOpenAnimationDuration="400" LoginPopupIsMaximized="false"  LoginPopupIsPositionFixed="true" />

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Oct 2015 Link to this post

    Hi Sunil,

    I replaced the archive in the opener post with this one.

    Regards,

    Marin Bratanov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  5. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 16 Dec 2015 Link to this post

    Please use the latest attached file if you are using this in your application.

    There are two important changes I made to this control after deploying it. They are explained below.

    • UTC date is used. This means that users of the website and the back end web server can be in different time zones and the user control will take this into account. In previous version, this was not taken into consideration and therefore it would not have worked when time zones differed for end user and web server.
    • Inaccurate clocks are accounted for. Sometimes the clock time on user's computer is not the same as the clock time on back end web server computer even when they are both converted to UTC and this time difference is now accounted for. I discovered this surprising  fact of clocks not being synchronized when I deployed this user control to a website on a third-party hosting provider's server.
  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 17 Dec 2015 Link to this post

    I replaced the archive in the opener post with this one.
  7. Answer
    Richard
    Richard avatar
    5 posts
    Member since:
    Dec 2011

    Posted 17 Nov in reply to Sunil Link to this post

    Hi

    I am trying to get the sample SessionTimerRefresherDemo to work with the latest version of telerik in vs 2015 and dotnet 4.5 but I am getting an error 

    Unhandled exception at line 75, column 17 in http://localhost:59193/Scripts/sessionTimerScripts.js
    0x800a1391 - JavaScript runtime error: 'az' is undefined

    I am not sure if this is related to the error when running the default.aspx when I click on the radalert button

    0x800a138f - JavaScript runtime error: Unable to get property 'offsetTop' of undefined or null reference

  8. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 17 Nov Link to this post

    Hi,

    This error means the extended animation library is missing. I suggest you use the script file from online demo of extended library. Look up the link for online demo from that code library post. Or go to this link for demo:  http://www.kandoodev.com/AutoSizeStandardDialogsWithServerSide.aspx

    Sunil

  9. Richard
    Richard avatar
    5 posts
    Member since:
    Dec 2011

    Posted 17 Nov in reply to Sunil Link to this post

    Hi

    Thank you for your quick response

    If you mean the <asp:ScriptReference Path="~/Scripts/ExtendedRadWindowAnimationPacked.js" /> then that is definitely there. I copied the zip contents opened the website, linked the telerik references and ran it as is

  10. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 17 Nov in reply to Richard Link to this post

    It would best if you send me the sample from your side.
  11. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 17 Nov in reply to Sunil Link to this post

    I will try to see if your issue is reproduced on my side with the demo files in code library. I will get back later or may be tomorrow.
  12. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 17 Nov Link to this post

    Your issue is because you have default.aspx as the starting page in the demo wesite. In Visual Studio project for the demo web site, you need to right click on the page called SessionTimerRefreshDemo.aspx and select the option Set As Start Page. Then run the website and it will work. 

    The default.aspx page is not needed at all in demo website.

  13. Richard
    Richard avatar
    5 posts
    Member since:
    Dec 2011

    Posted 18 Nov in reply to Sunil Link to this post

    Hi,

    I only mentioned the issue with the default.aspx in case it was related. I basically downloaded the zip file from this post. Linked the latest telerik dll's and ran SessionTimerRefresherDemo.aspx in VS 2015.

    I tried again but this time only added telerik.web.ui and telerik.web.ui.skins instead of all the telerik libraries and guess what it works so there is obviously a conflict when you add all the telerik dll's

    Thank you again for your willingness to help

    Kind regards

    Richard

  14. Sunil
    Sunil avatar
    231 posts
    Member since:
    Jan 2004

    Posted 18 Nov in reply to Richard Link to this post

    Hi,

    I will check this on my end but there should not be a problem when you add all Telerik assemblies.

    If you have any more questions  regarding this library, please don't hesitate to post here.

    Sunil

Back to Top