Javascript 代码中的触发事件答案

【问题标题】：Fire event in code behind from JavascriptJavascript 代码中的触发事件
【发布时间】：2012-07-20 10:19:24
【问题描述】：

如果用户尝试离开页面，我有以下 javascript 来提示用户。将出现一个对话框，其中包含 2 个按钮“离开此页面”和“留在此页面上”。我想引起一个回发，它会触发一个 C# 事件。

我希望在按下“离开此页面”按钮时进行此回发。

我该怎么做？请原谅我对 Javascript 很陌生。

<script type="text/javascript" language="JavaScript">
var needToConfirm = true;

window.onbeforeunload = confirmExit;
function confirmExit() {
    if (needToConfirm)
        return "You have attempted to leave this page. This will CANCEL your current order selection.";
}

【问题讨论】：

这与 C# 或 ASP.NET 无关
@freefaller - 确实是这样，只是措辞错误。
@Hogan 和 user1166862，我很抱歉......我太快了，我认为这只是如何显示对话框。再次道歉
@freefaller - 不要道歉，你的问题很好，我在等别人回答。
微软就这个问题谈了很多，包括你在这里的确切问题：msdn.microsoft.com/en-us/library/aa479302.aspx

标签： javascript asp.net

【解决方案1】：

将window.confirm() 与__doPostBack 一起使用

类似的东西

window.onbeforeunload = confirmExit;
function confirmExit() {
    if (confirm("Want to exit ??"))
          __doPostBack('btnSave ', "exit confirmed");

}

更多关于__doPostBackGo here

注意：window.onbeforeunload 事件会在用户单击关闭并且窗口即将关闭时引发，因此在我测试它时它肯定会转到服务器端，但由于客户端已关闭，请求会崩溃，而您的服务器端代码执行将停止。所以这不是更好的做事方法。

【讨论】：

在 C# 中，您必须为 btnSave 定义点击事件
@yogi 你能解释一下如何在 __doPostBack 中使用 window.confirm() 吗？试了上面的代码，没有任何提示

【解决方案2】：

这里的主要挑战是在用户真正离开页面之前执行 JavaScript 函数，问题是处理 onbeforeunload 事件，你不能对用户的选择做出反应，因为为了让这个事件起作用 在多浏览器 场景中，您必须返回一个字符串，该字符串将用作消息，并且每个浏览器都会创建一个自定义对话框，该对话框将显示给用户。我还没有找到更好的方法来做你需要的。基本上你不能覆盖浏览器中的默认行为，你不能返回一个布尔值来指示页面是否应该被卸载。

更多信息：

From MSDN

将字符串分配给 window.event 的 returnValue 属性时，会出现一个对话框，让用户可以选择留在当前页面并保留分配给它的字符串。对话框中显示的默认语句“您确定要离开此页面吗？...按 OK 继续，或按 Cancel 留在当前页面。”，无法删除或更改.

因此，在本例中，我提出了一种解决方法，我不确定这是否是最佳方法，但我在多家在线银行和 Microsoft 自己的网站上都看到了类似的行为。

例子：

ASPX

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    function showConfirmOnLeave() {
        return $("#showConfirm").prop("checked");
    }
    function onLeavePage() {
        if (showConfirmOnLeave()) {
            return "Don't goo";
        }
        else {
            return undefined;
        }
    }
    $(function () {
        if ($("body").attr('onbeforeunload') == null) {
            $("body").attr('onbeforeunload', 'return onLeavePage(event)');
        }
        $(window).unload(function (event) {
            if (showConfirmOnLeave()) {
                window.open(
                    '<%: this.ResolveClientUrl("~/CallOnLeave.aspx") %>',
                    "_blank",
                    "height=100, location=no, menubar=no, resizable=no, scrollbars=no, status=no, titlebar=no, toolbar=no, width=100, left=1, top=1",
                    false
                );
            }
        });
    });
</script>

<input type="checkbox" id="showConfirm" />  Show confirm on exit?

CallOnLeave.ASPX 后面的代码

    protected void Page_Load(object sender, EventArgs e)
    {
        // add here your custom code, ideally fire a new async thread to execute your commands on the background
    }

【讨论】：