Custom Session Warning (Jquery)/ Normal JavaScript Session Alert Pop up in MVC 4 Application with Form Authentication Sliding Expiration -Part I

Introduction

This is my first article, so please let me know in case you find something missing or amiss. Feel free to give your suggestions as well as criticisms. I am just another .NET developer next door who enjoys doing his work.

While recently working on an MVC application, I was asked to give a session warning pop up. Initially, I Googled a lot and thought that it could be very easily implemented with JavaScript. Although I could find some references that talked about giving a pop up warning in JavaScript or jquery when the session was about to expire, none could completely solve the issues that I was facing. So I decided to write a tip which any developer can easily use for future reference.

Background

Some of the links that I found useful are listed below:

• http://www.itworld.com/development/335546/how-create-session-timeout-warning-your-web-application-using-jquery
• http://www.codeproject.com/Articles/227382/Alert-Session-Time-out-in-ASP-Net
• http://www.hanselman.com/blog/WeirdTimeoutsWithCustomASPNETFormsAuthentication.aspx
• http://www.iis.net/learn/troubleshoot/security-issues/troubleshooting-forms-authentication
• http://completedevelopment.blogspot.in/2009/12/caution-with-using-sessiontimeout-and.html
• http://www.erichynds.com/examples/jquery-idle-timeout/example-dialog.htm

Using the Code

If you will look into the first link that is shared, you will get a session.warning.zip.You can directly download this file from here. This file became my starting point and I thought that I closed the requirement very easily.

(http://www.cypressnorth.com/downloads/session.warning.zip) I have also copy pasted the code that I got from this file for reference. You just need to include this file in Layout page that is shared so that all the views can easily reference this file. Download the file from the given location. There are four things that are of our interest and the fifth one we are ignoring as of now:

1. sess_pollInterval - Time you want the page to keep polling and execute the sessInterval function
2. sess_expirationMinutes - Your application session expiration time
3. sess_warningMinutes - After what duration you want the pop up to show
4. Log Off URL link - Set the Log off URL here
5. Some Ajax function - Which we will look at later on

The first change that was asked by client was to give a Custom POP up instead of JavaScript alert with 2 options as "Continue" and "Log Out".

Now this was achieved easily Jquery UI Alert:
Ref attachment for changes in the sessInterval method

I have also kept the old code for reference and in case you want to override the default CSS of jquery UI, then you just need to add the CSS class name to dialogclass as it's commented there.

Uncomment it and add your class name.

Points of Interest

I hope you enjoyed this tip. In the next part(Part II), I will talk about the new issue that I faced.

Form Authentication timeouts -even when the user has clicked on "Keep Looking" and Ajax methods returning UnAuthorized call failure.