Kendo UI ASP.Net MVC - How to create a session timeout popup?

Question

I've to create a session timeout popup with an option to extend the session. I'm using Kendo UI with ASP.Net MVC for my project. Can someone please guide me in the right direction or outline the process for me?

Answer 1

There are some complexities that can arise when your app is using server side session and makes heavy use of ajax calls. The ajax calls will not reset the sessions sliding expiration on the server. You will have to find a way to reset it periodically when you know there has been client/server activity for the logged in user.

An example of would be:

1. User A logs in and starts a sliding expiration session with a timeout of 15 minutes.

2. User A loads a view containing a grid/treeview/panelbar/etc that has ajax bindings for create/add/edit/delete.

3. User A saves some data 14.5 minutes after login and has not left the initial rendered view.

4. User A edits another record 15.2 minutes later. At this point, all server side session state has been cleared and disposed of, however, the ajax call could return with a 200. Now, everything becomes unstable and your app may soon fall apart.

I handled a similar situation in the following manner.

1. Create a js countdown widget that can be initialized and reset with a value of seconds to represent the expiration. You want this widget to support a callback to be called when the countdown has expired. Ideally would want to have multiple instances of this timer available. You can see extended Kendo Widgets as an example of this.

2. If the session state on the server is dynamic then you will need a controller endpoint in which you can obtain this value in the client. (Perhaps IndexController)

3. When the initial page loads, instantiate your countdown timer with the latest session timeout value from the server (-2 MINUTES).

4. Wire into your call ajax pipeline. There are global ajax handlers that you can wire up on your main page. I can't remember the names but basically any ajax completion/error can be handled globally here prior to being routed to the function in which the call originated. This would be a good place to tie into so that you can refresh server session, however, you would not want to refresh server session during each ajax completion. This is where multiple timer instances are useful. After each ajax call caught in your global ajax handler, you can check if 2 minutes has elapsed since the last "ajax session refresh" and if not then you need to make another call to refresh the sliding expiration of the session. This link has info on multiple ways to refresh session state using ajax calls. Also, at this time it would be wise to call the reset(15*60) on your main client side countdown timer.

5. Display a popup when the session countdown timer elapses. In step 1 you created a timer class with a callback method to be called when the timeout occurred. I noted session timeout -2 minutes, however the -2 only represents the amount of time you want the dialog to show before the user is logged out and returned to the login page. In your main countdown timer's timeout callback create a kendo popup window with optional HH:MM:SS countdown showing how long the user has to cancel or continue. You can invoke a third and final timer within the context of your dialog that is set to the -2 minute or whatever time you want the dialog to be displayed, note that the time remaining plus the dialog idle time must be less than the server side session time.

Finally, you need to respond to three actions within your dialog window.

1. The user presses the cancel button - Redirect to a route that will abandon the session and send the user to a non-secure page.

2. The user presses the continue button - invoke a method that will reset all countdown timers and call your "ajax server session refresh" function to reset the sliding expiration of the session.

3. The dialogs countdown timer elapses - Same as step 1 above, perhaps you may want the route to take the user to a "You were logged out page".