[jQuery]Handle Session timeout

[jQuery]Handle Session timeout

asp.net session timeout  預設時間 20分鐘,當時間一到往往都是強制自動登出返回登入頁面,

這樣的處理讓一些使用者覺得網站很不友善,

為了達到提示使用者需求,我介紹一個我使用一陣子,而且也還不錯用的 jquery-timeoutdialog 套件 ,

下面簡單紀錄一下使用方法。

 

1.Master Page參考相關 js

 <script type="text/javascript" src="<%=ResolveUrl("~") %>Scripts/jquery-1.7.1.min.js"></script>
 <script type="text/javascript" src="<%=ResolveUrl("~") %>Scripts/jquery-ui-1.8.20.min.js"></script>
 <script type="text/javascript" src="<%=ResolveUrl("~") %>Scripts/ui.timeoutdialog.js"></script>

   

 

2.Master Page.aspx

<div id="timeoutDialog" style="display:none;">
            <p>你的工作階段快要過期.</p>           
            <span id="countdownTargetSpan" style="font-weight:bold"> 秒後自動登出 </span>           
</div> 

 
新增泛型處理 Response.ashx(將透過 ajax 執行,讓Server端知道client還活者)
image

 
Client Script
<script type="text/javascript">
    $(function () {

        $("#timeoutDialog").timeoutdialog({
            idleTimeout: 2, //2 min 預設時間
            idleAlert: 1, //剩下1 min 跳出提示畫面        
            keepAliveURL: 'Response.ashx',//執行Server端
            validResponseText: 'OK',//驗證內容
            divtarget: 'timeoutDialog',//個人定義選項,解決span 內容被覆蓋問題
            countdownTarget: 'countdownTargetSpan',//顯示最後時間(秒)
            buttonContinueText: '保持工作階段',
            buttonSignoffText: '登出',
            onTimeout: function () {
                window.location = 'Login.aspx;
            },
            onSignoff: function () {
                window.location = 'Login.aspx;
            }
        });
    });

</script>

 
我改了原有script一些小問題,主要是解決span 內容被覆蓋問題
image

 
執行
image
工作階段剩下60秒後先提示,讓使用者自行選擇登入或繼續。

 
點選登出
image

 

 

 

 

 

 

參考

jquery-timeoutdialog