检测未保存的更改

Question

我需要在ASP .Net应用程序中实现“未保存的更改”提示。如果用户修改了Web表单上的控件，并试图在保存之前导航离开，则将出现提示，警告他们尚未保存更改，并为他们提供取消并保留在当前页面上的选项。如果用户未触摸任何控件，则不应显示该提示。

理想情况下，我想用JavaScript实现此功能，但是在我开始滚动自己的代码之前，是否有任何现有的框架或推荐的设计模式来实现这一目标？理想情况下，我希望可以以最小的更改轻松地在多个页面上重复使用的东西。

Answer 1

使用jQuery：var _isDirty = false;$("input[type='text']").change(function(){  _isDirty = true;});// replicate for other input types and selects根据需要与onunload/ onbeforeunload方法结合。从注释中，以下内容引用了所有输入字段，而没有重复的代码：$(':input').change(function () {使用$(":input")是指所有输入，文本区域，选择和按钮元素。

Answer 2

难题之一：/**&nbsp;* Determines if a form is dirty by comparing the current value of each element&nbsp;* with its default value.&nbsp;*&nbsp;* @param {Form} form the form to be checked.&nbsp;* @return {Boolean} <code>true</code> if the form is dirty, <code>false</code>&nbsp;*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;otherwise.&nbsp;*/function formIsDirty(form) {&nbsp; for (var i = 0; i < form.elements.length; i++) {&nbsp; &nbsp; var element = form.elements[i];&nbsp; &nbsp; var type = element.type;&nbsp; &nbsp; if (type == "checkbox" || type == "radio") {&nbsp; &nbsp; &nbsp; if (element.checked != element.defaultChecked) {&nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; else if (type == "hidden" || type == "password" ||&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type == "text" || type == "textarea") {&nbsp; &nbsp; &nbsp; if (element.value != element.defaultValue) {&nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; else if (type == "select-one" || type == "select-multiple") {&nbsp; &nbsp; &nbsp; for (var j = 0; j < element.options.length; j++) {&nbsp; &nbsp; &nbsp; &nbsp; if (element.options[j].selected !=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.options[j].defaultSelected) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp; return false;}还有一个：window.onbeforeunload = function(e) {&nbsp; e = e || window.event;&nbsp;&nbsp;&nbsp; if (formIsDirty(document.forms["someForm"])) {&nbsp; &nbsp; // For IE and Firefox&nbsp; &nbsp; if (e) {&nbsp; &nbsp; &nbsp; e.returnValue = "You have unsaved changes.";&nbsp; &nbsp; }&nbsp; &nbsp; // For Safari&nbsp; &nbsp; return "You have unsaved changes.";&nbsp; }};全部包起来，您会得到什么？var confirmExitIfModified = (function() {&nbsp; function formIsDirty(form) {&nbsp; &nbsp; // ...as above&nbsp; }&nbsp; return function(form, message) {&nbsp; &nbsp; window.onbeforeunload = function(e) {&nbsp; &nbsp; &nbsp; e = e || window.event;&nbsp; &nbsp; &nbsp; if (formIsDirty(document.forms[form])) {&nbsp; &nbsp; &nbsp; &nbsp; // For IE and Firefox&nbsp; &nbsp; &nbsp; &nbsp; if (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.returnValue = message;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // For Safari&nbsp; &nbsp; &nbsp; &nbsp; return message;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; };})();confirmExitIfModified("someForm", "You have unsaved changes.");您可能还希望将beforeunload事件处理程序的注册更改为使用LIBRARY_OF_CHOICE的事件注册。

Answer 3

在.aspx页中，您需要一个Javascript函数来判断表单信息是否为“脏”<script language="javascript">&nbsp; &nbsp; var isDirty = false;&nbsp; &nbsp; function setDirty() {&nbsp; &nbsp; &nbsp; &nbsp; isDirty = true;&nbsp; &nbsp; }&nbsp; &nbsp; function checkSave() {&nbsp; &nbsp; &nbsp; &nbsp; var sSave;&nbsp; &nbsp; &nbsp; &nbsp; if (isDirty == true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (sSave == true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('__EVENTTARGET').value = 'btnSubmit';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('__EVENTARGUMENT').value = 'Click';&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.document.formName.submit();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script><body class="StandardBody" onunload="checkSave()">然后在后面的代码中，将触发器添加到输入字段中，然后在提交/取消按钮上进行重置。btnSubmit.Attributes.Add("onclick", "isDirty = 0;");btnCancel.Attributes.Add("onclick", "isDirty = 0;");txtName.Attributes.Add("onchange", "setDirty();");txtAddress.Attributes.Add("onchange", "setDirty();");//etc..