ASP.NET MVC - 会话超时前显示弹出警告 - #aspnetmvc

引言

学习如何使用 DevExpress ASP.NET MVC PopupControl 扩展为您的 ASP.NET MVC 网站添加友好的“会话超时”警告对话框消息。这有助于您

1. 在用户会话超时之前显示警告消息，并
2. 允许最终用户继续会话或自动注销他们。

此示例是之前我提到的示例的 ASP.NET MVC 版本 此处。

会话超时

会话超时 是您可以在 web.config 文件中设置的属性，用于控制用户会话何时应该过期。

不幸的是，您的最终用户不知道他们的会话何时会过期，除非您以某种方式通知他们。

弹出警告

通知最终用户的一种最佳方式是使用弹出警告对话框。您可能在银行的网站上见过这些类型的弹出窗口。

假设您正在在线查看您的银行余额，并且需要接听其他地方的电话。您刚刚将浏览器留在您的银行账户详细信息上，这会产生潜在的安全问题。委婉地说。

如果 ASP.NET 会话超时已设置，它将使会话过期，但可能不会向最终用户提供任何有用的提示。大多数银行网站会显示客户端弹出对话框，以警告并询问最终用户是否希望继续会话。

弹出窗口可以有一个一分钟的计时器和一个“确定”按钮。如果最终用户仍然在那里并且想要继续会话，他们将单击“确定”按钮。但是，如果弹出窗口上的计时器用完，他们将自动注销。

解决方案：MVC PopupControl 扩展

现在您可以使用 DevExpress ASP.NET MVC PopupControl 扩展在您的网站上拥有此绝佳功能！

在此处下载示例 ASP.NET MVC 解决方案

 

文件：MVCSessionTimeoutPopup.zip

项目详情

让我们分解一下项目中的内容。这个流畅的示例包含 4 个关键文件

• TimeoutPartial.cshtml - 包含弹出警告对话框的部分视图
• TimeOutPage.cshtml - 会话超时时重定向到的简单页面
• Index.cshtml - 调用 TimeoutPartial 视图的默认页面
• HomeController.cs - 包含路由到 TimeOutPartial 视图的操作方法的控制器

所有的 JavaScript 魔法都发生在 TimeoutPartial.cshtml 视图中

@functions {

    public int PopupShowDelay {
        get { return 60000 * (Session.Timeout - 1); }
    }

}

<script type="text/javascript">
    window.SessionTimeout = (function() {
        var _timeLeft, _popupTimer, _countDownTimer;

        var stopTimers = function() {
            window.clearTimeout(_popupTimer);
            window.clearTimeout(_countDownTimer);
        };

        var updateCountDown = function() {
            var min = Math.floor(_timeLeft / 60);
            var sec = _timeLeft % 60;
            if(sec < 10)
                sec = "0" + sec;

            document.getElementById("CountDownHolder").innerHTML = min + ":" + sec;

            if(_timeLeft > 0) {
                _timeLeft--;
                _countDownTimer = window.setTimeout(updateCountDown, 1000);
            } else  {
                window.location = "Home/TimeOutPage";
            }            
        };

        var showPopup = function() {
            _timeLeft = 60;
            updateCountDown();
            ClientTimeoutPopup.Show();
        };

        var schedulePopup = function() {
            stopTimers();
            _popupTimer = window.setTimeout(showPopup, @PopupShowDelay);
        };

        var sendKeepAlive = function() {
            stopTimers();
            ClientTimeoutPopup.Hide();
            SessionTimeout.schedulePopup();
        };

        return {
            schedulePopup: schedulePopup,
            sendKeepAlive: sendKeepAlive
        };

    })();    

</script>

@using (Html.BeginForm()) {
    <p>
        A timeout warning popup will be shown every @(Session.Timeout - 1) min.
    </p>   
    @Html.Partial("TimeoutPartial")
}

下载 示例 并将其集成到您的网站中，以便为您的最终用户提供友好的提醒，他们的会话即将过期，他们是否希望继续使用。

谢谢！

尽情构建 - 无限制或妥协

立即在线试用 DevExpress ASP.NET MVC 扩展：http://mvc.devexpress.com

阅读有关 DevExpress ASP.NET MVC 扩展的最新消息：http://dxpr.es/ov1tQa

立即下载免费且功能齐全的 DXperience 版本：http://www.devexpress.com/Downloads/NET/