ASP.NET - Javascript timeOut Warning based on sessionState timeOut in web.config

Question

Problem: I am looking to create a time-out warning message on an asp.net page with a c# code behind based off my webconfig sessionState TimeOut Attribute.

Code on web.config:

<configuration>
    <system.web>
        <sessionState timeout="20"></sessionState>
    </system.web>
</configuration>
<system.serviceModel>
    <bindings>
        <basicHttpBinding>
            <binding name="EchoSignDocumentService10HttpBinding" closeTimeout="00:01:00" openTimeout="00:01:00" receiveTimeout="00:10:00" sendTimeout="00:01:00" allowCookies="false" bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard" maxBufferSize="6553600" maxBufferPoolSize="524288" maxReceivedMessageSize="6553600" messageEncoding="Text" textEncoding="utf-8" transferMode="Buffered" useDefaultWebProxy="true">
                <readerQuotas maxDepth="32" maxStringContentLength="8192" maxArrayLength="1638400" maxBytesPerRead="4096" maxNameTableCharCount="16384" />
                <security mode="Transport">
                    <transport clientCredentialType="None" proxyCredentialType="None" realm="" />
                    <message clientCredentialType="UserName" algorithmSuite="Default" />
                </security>
            </binding>
            <binding name="EchoSignDocumentService10HttpBinding1" closeTimeout="00:01:00" openTimeout="00:01:00" receiveTimeout="00:10:00" sendTimeout="00:01:00" allowCookies="false" bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard" maxBufferSize="65536" maxBufferPoolSize="524288" maxReceivedMessageSize="65536" messageEncoding="Text" textEncoding="utf-8" transferMode="Buffered" useDefaultWebProxy="true">
                <readerQuotas maxDepth="32" maxStringContentLength="8192" maxArrayLength="16384" maxBytesPerRead="4096" maxNameTableCharCount="16384" />
                <security mode="None">
                    <transport clientCredentialType="None" proxyCredentialType="None" realm="" />
                    <message clientCredentialType="UserName" algorithmSuite="Default" />
                </security>
            </binding>
        </basicHttpBinding>
    </bindings>
</system.serviceModel>

Answer 1

Pseudo code:

• Read the timeout setting in codebehind
• Register a ClientScriptblock (setTimeout passing the timeout period (20 * 60))
• On timeout, display a warning label on the page

Sample code:

    public void RegisterTimeoutWarning(System.Web.UI.Page Page)
    {
        var timeout = HttpContext.Current.Session.Timeout * 60 * 1000;
        Page.ClientScript.RegisterStartupScript(Page.GetType(), 
                "timeoutWarning", 
                string.Format("setTimeout(function () {{ alert('Session about to expire'); }}, {0});", timeout), true);
    }

Of course, you can improve the client side display (rather than showing an alert) by displaying warning popups or even a confirm popup which you can then use to renew the session.

Answer 2

I've done this before by creating a web method in my code-behind file that checks for the timeout. Have your Javascript function get the timeout information via AJAX and display a warning according.

Example

This is the web method in my code-behind:

[WebMethod]
public static bool HasSessionTimedOut()
{
    HttpSessionState session = HttpContext.Current.Session;

    // I put this value into Session at the beginning.
    DateTime? sessionStart = session[SessionKeys.SessionStart] as DateTime?;

    bool isTimeout = false;

    if (!sessionStart.HasValue)
    {
        isTimeout = true;
    }
    else
    {
        TimeSpan elapsed = DateTime.Now - sessionStart.Value;
        isTimeout = elapsed.TotalMinutes > session.Timeout;
    }

    return isTimeout;
}

And this is my Javascript:

<script type="text/javascript">                                   
    $(function() {                                                 
        var callback = function(isTimeout) {
            if (isTimeout) {                           
                // Show your pop-up here...
            }                         
        };                                                         
        setInterval(                                                
            function() {
                // Don't forget to set EnablePageMethods="true" on your ScriptManager.
                PageMethods.HasSessionTimedOut(false, callback);    
            },                                                     
            30000                                                   
        );                                                          
    });                                                            
</script> 

So, this is pretty rudimentary. Every 30 seconds, my Javascript function sends an AJAX request to my web method using ASP.NET's PageMethods object. It checks for a return value of true in the callback, which indicates that a timeout has occurred, and takes the appropriate action.