[研究][JavaScript] 用 timeout-dialog.js 做 Session Time Out 前 60 秒自動彈出倒數計時對話盒視窗
2020-11-17
環境 Visual Studio 2019 v16.8.1 版 + C# + ASP.NET + WebForm + jQuery + jQuery UI + timeout-dialog.js
jQuery 和 jQuery UI 可用 NuGet 安裝
其中 timeout-dialog.js 只能手動下載安裝。
https://github.com/rigoneri/timeout-dialog.js
Default.aspx
測試兩個小範例，1個是網頁載入後，Session Time Out 前 60 秒自動彈出倒數計時對話盒視窗。
另一個範例，Click 一個超連結，會跳出 60 秒自動彈出倒數計時對話盒視窗。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication8.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<%--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>--%>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<%--<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>--%>
<%--不可用，畫面會走樣--%>
<%--<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">--%>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<%--去網站 https://github.com/rigoneri/timeout-dialog.js 下載套件--%>
<script src="Scripts/timeout-dialog/js/timeout-dialog.js"></script>
<link href="Scripts/timeout-dialog/css/index.css" rel="stylesheet" />
<link href="Scripts/timeout-dialog/css/timeout-dialog.css" rel="stylesheet" />
<%--
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/timeout-dialog.css" type="text/css" media="screen, projection" />
--%>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" id="timeout-example">Click Here to See Demo</a>
</div>
</form>
<script type="text/javascript">
var SessiontimeLeft = <%= Session.Timeout * 60 %>;
////https://rigoneri.github.io/timeout-dialog.js/
//timeout number 1200 The number of your session timeout(in seconds).The timeout value minus the countdown value determines how long until the dialog appears.
//countdown number 60 The countdown total value(in seconds).
$(document).ready(function () {
SessiontimeLeft = 70; // 網頁載入完成後，Session Time 為 70 sec
// 剩下 60 秒開始跳出對話盒視窗，進行倒數 (所以網頁載入 70-60=10 開始跳出對話盒視窗)
$.timeoutDialog({ timeout: SessiontimeLeft, countdown: 60, logout_redirect_url: '../sessionLogout.htm', restart_on_yes: false });
//$.timeoutDialog({ timeout: 1, countdown: 60, logout_redirect_url: 'https://github.com/rigoneri/timeout-dialog.js', restart_on_yes: false });
});
</script>
<script type="text/javascript">
/*<![CDATA[*/
$(function () {
$("#timeout-example").click(function (e) {
e.preventDefault();
$.timeoutDialog({ timeout: 1, countdown: 60, logout_redirect_url: 'https://github.com/rigoneri/timeout-dialog.js', restart_on_yes: false });
});
});
/*]]>*/
</script>
</body>
</html>
|
SessiontimeLeft = 70; 若拿掉，則根據下面這行
var SessiontimeLeft = <%= Session.Timeout * 60 %>;
SessiontimeLeft = 20*60 = 1200 秒 (20 分鐘)
Default.aspx.cs (不用特別去修改)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
|
Web.Config (預設 20 分鐘，可以不用特別去設定)
<configuration> <system.web>
<sessionState timeout="20"></sessionState>
</system.web>
</configuration> |
(下圖)執行結果，等10秒就會出現
(下圖) 缺 jQuery UI 執行結果，不會出現對話盒，60 秒也不會倒數，也不會出現任何錯誤訊息。
https://github.com/rigoneri/timeout-dialog.js/blob/master/js/timeout-dialog.js
(完)
相關
[研究][JavaScript] 用 timeout-dialog.js 做 Session Time Out 前 60 秒自動彈出倒數計時對話盒視窗
http://shaurong.blogspot.com/2020/11/javascript-timeout-dialogjs-session.html
[研究][C#][ASP.NET][WebForm] Sessionn Time Out 自動登出前倒數計時
http://shaurong.blogspot.com/2020/11/caspnetwebform-sessionn-time-out.html
[研究][C#][ASP.NET][WebForm] Master Page 的 Sessionn Time Out 自動登出前倒數計時
http://shaurong.blogspot.com/2020/11/caspnetwebform-master-page-sessionn.html
沒有留言:
張貼留言