在关闭浏览器或退出页面时保存更改

• 下载源代码 - 287 KB

引言

本文介绍如何在关闭浏览器或导航离开当前 Web 应用程序时实现保存更改的功能。它还讨论了用户可以退出页面的各种方式以及在这些事件中保存数据的方法。

背景

许多人一直在尝试实现关闭浏览器时保存数据的功能。我曾是其中一员，试图找到一种实现相同功能的方法。我浏览了许多论坛和讨论板，但都未能找到实现此功能的方法。我最终找到了一段 JavaScript 代码（附在下面），可以捕获 IE 窗口的关闭事件，这实际上帮助我实现了此功能。

Using the Code

站点内的导航可以有两种方式。以下是用户可以导航的操作列表：

• 使用站点内的控件导航到页面。
• 使用浏览器控件、快捷键或右键选项导航到页面。

以下是用户可以导航离开页面的方式。解决方案中涵盖了所有这些情况。

使用应用程序中的控件进行导航或回发

• 图像按钮
• 链接按钮
• 提交按钮
• 将“Autopostback”选项设置为 true 的服务器控件

通过用户操作、浏览器按钮、快捷键、关闭浏览器进行导航。以下是实现此目的的方式列表：

• 浏览器工具栏上的“后退”按钮
• 浏览器工具栏上的“刷新”按钮
• 浏览器工具栏上的“关闭”按钮
• 浏览器工具栏上的“主页”按钮
• 按下 ALT + F4 关闭浏览器
• 按下 CTRL + F4（适用于标签页浏览器）
• 按下 F5 或 CTRL + R 或右键单击进行刷新
• 按下 ALT + Home 按钮（导航到客户端的主页）
• 单击退格键（“后退”按钮的替代方法）
• 键入 URL 并导航到其他页面
• 从“收藏夹”按钮中选择 URL
• 右键单击并选择“刷新”

识别不同的操作并为每个操作启用保存是一个繁琐的过程。使用 JavaScript 的 onbeforeunload 事件可以更简单地实现保存功能。

使用 onbeforeunload 的原因

onbeforeunload 事件（在 unload 事件之前调用）会在以下情况被调用：

• 导航到另一个页面（如上所述）
• 由于控件事件而发生的回发
• 使用浏览器上的控件
• 关闭页面

因此，onbeforeunload 是实现保存功能的合适事件。

保存功能的实现

为了区分用户发起的事件和控件发起的事件，所有应用程序中已知的控件都会添加一个名为 tag 的属性，其值为“DonotCallSaveonLoad”，使用该属性可以在不提示用户保存页面的情况下调用 Save 方法。

event.srcElement 会将启动回发的控件对象设置为变量 currentElement。这将在控件的 onClick 事件中设置。

注意：onClick 事件是唯一可以检索控件对象的地方，因为当进程到达 onbeforeUnload 事件时，控件对象会被销毁。

onbeforeUnload 事件调用 HandleOnClose 函数，该函数检查变量 currentElement 是否有值。

JavaScript 函数 HandleOnClose 检查 currentElement 对象的此 tag 属性。如果 currentElement 为 null 或 currentElement 的 tag 属性值不为 DonotCallSaveonLoad，则调用 FunctiontoCallSaveData 函数；否则，将调用代码后端的保存功能。

函数 FunctiontoCallSaveData 的实现与之前发送的相同，如下所示：

form.submit 会依次调用 Page_Load，其中可以调用保存功能。还可以为此功能执行错误处理。下面的代码片段显示了这一点：

注意事项

此功能无法使用断点进行调试。可以通过检查数据源中是否已更新数据来验证此功能。在附加的演示中，有一个 SQL 脚本，它创建了一个临时表，数据将存储在其中，并在浏览器关闭时保存。请根据您的方便，对 .vb 文件中的 SaveDataonPage 函数进行必要的更改。异常处理使用 Enterprise Library 2.0 实现。也可以对其异常处理机制进行自定义。