在 ASP.NET 中导航离开具有更改的页面

• 下载演示项目 - 3.22 KB

引言

这段代码使 Web 页面能够通知用户，他们即将离开一个已进行修改的页面。为什么这有用？ 之前的句子已经说明了一切。 我们想通知用户他们已经对页面进行了修改，并询问他们是否真的要离开该页面。 假定您熟悉 JavaScript、DOM 事件和 ASP.NET 1.x 或更高版本。 包含的项目是在 Visual Studio 2005 中。

背景

通知用户他们正在离开已修改页面的想法并不新鲜。 有很多站点通过 onbeforeunload body 事件的客户端脚本来解释这个过程。 本文将客户端脚本与 ASP.NET 客户端框架联系起来。

Using the Code

本文的核心非常简单。 JavaScript 完成了所有魔法。 我们所需要做的就是将这个 JavaScript 魔法与 ASP.NET 客户端提交模型联系起来。 因此，正如您所看到的，在 JavaScript 对象 MySuperDuper 中，有一个名为 checkForChanges() 的方法。 当脚本加载 body 标签的 onbeforeunload 事件时，会附加此方法。 为什么我称它为 MySuperDuper？ 根本没有原因。 我认为如果存在这种东西，听起来会很酷。

// Register the event.
window.onbeforeunload = function() {
     return MySuperDuper.checkForChanges();
}

这是完整的客户端代码

// This script works in Internet Explorer 6+, FireFox and Safari.
// I believe Opera might handle it too, but I did not test.
var MySuperDuper = new function() {
    // Internal reference to the class
    // to avoid the "this" pointer issue
    // when dealing with events.
    var    var _this = this;

    //you can declare this if you want, but I don't see the point.
    //this.globalChange = undefined;

    // Determines whether or not a form is being saved.
    this.saving;

    // Message to display.
    this.navigateAwayMessage = "You have made some changes which" +
                               " will be lost if you leave this page. " +
                               "Do you want to leave this page?";

    // Verify if any changes were made. If there
    // have been changes and the form is not being saved,
    // alert the user that they are about to leave
    // a page where they have made edits.
    this.checkForChanges = function() {
        if (!_this.saving && typeof(_this.globalChange) !=
                   "undefined" && _this.globalChange)
        {
            if(document.all && event)
                event.returnValue = _this.navigateAwayMessage;
            else
                return _this.navigateAwayMessage;
        }
    }
}

// Register the event.
window.onbeforeunload = function() {
    return MySuperDuper.checkForChanges();
}

这是服务器端代码，用于合并 JavaScript 魔法。 在我的项目中，我将其放在 BasePage 类中，以便可以在所有可能需要此功能的页面中重用它。 我们也可以在基页上设置一个布尔属性来打开和关闭所有此功能。 为了简单起见，我省略了类似的东西。

ClientScript.RegisterOnSubmitStatement(typeof(BasePage),
             "saving", "MySuperDuper.saving = true;");

现在对于你的控件，只需将 MySuperDuper.globalChange 变量更新为 true。 为了简单起见，我已在常规 HTML 文本输入中使用它，但是你可以使用服务器端控件（例如 <asp:TextBox id="myTextBox" runat="server" />），方法是在代码文件中添加一个属性，如下所示

myTextBox.attributes.Add("onchange", "MySuperDuper.globalChange = true;");

您还可以获取 ClientID 属性并呈现一些 JavaScript，该 JavaScript 附加一个 DOM 事件来执行此更新。 有很多方法可以实现它。

<!--
    We would just need to handle any event for changes in our controls.
    This can be done inline like below or attached. I leave it up to you.
 -->
 <input onchange="MySuperDuper.globalChange = true;" type="text" />

此外，在收到 crashedapp 的一些反馈（见下文）之后，他提出了检查是否已进行更改的建议。 感谢您的反馈。 因此，假设 crashedapp 有他自己的检查更改的方法，他可以像这样覆盖我的方法 MySuperDuper.checkForChanges

function yourCustomFunction()
{
    // ... mind blowing code here
    // return true or false    
}

MySuperDuper.checkForChanges = yourCustomFunction

关注点

它已经在 Internet Explorer 6+、FireFox 和 Windows 版 Safari 上进行了测试。 Internet Explorer 和 FireFox 可以像 Safari 一样处理离开页面的操作，但是当你关闭浏览器窗口并进行更改时，只有 FireFox 和 Internet Explorer 会触发 onbeforeunload 事件。 Safari 只是关闭页面而不通知你。 这似乎是 Safari 的设计方式。 此外，这在 Opera 中不起作用（客户端部分）。 我不记得它是否支持 onbeforeunload。 如果你真的需要它在 Opera 中工作，也许可以查看 这个网站。

这也适用于 AJAX。 你只需要管理何时将部分呈现返回到客户端，只需将 MySuperDuper.globalChange 重置为 false。 你可以使用 PageRequestManager、Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler) 来执行此操作，或者如果你使用的是 PageMethod 或自定义 AJAX，只需添加代码将 MySuperDuper.globalChange 重置为 false。 有关 PageRequestManager 的更多信息，请查看 这个网站。

历史

• 2008 年 5 月 6 日：初始帖子
• 2008 年 5 月 7 日：文章内容已更新