根据 Javascript 中的隐藏字段值显示确认框

Question

所以有点背景，我基本上有一个用户可以更改内容的表单。 这种形式是一种引导模式形式。 如果用户对表单进行了更改，我想在用户关闭表单时显示警告或其他内容。 所以我想我会添加一个隐藏字段，当表单上的事情发生变化时（这可能会发生多种方式），然后我会用真实值标记隐藏字段。

我有这个工作，但现在剩下的就是创建一些将查看隐藏值的内容，然后显示一个确认框，在 realm 中说出“您已进行更改并将丢失您所做的所有更改。您喜欢接着说？” 带有是、否或确定，取消按钮。

我虽然这会很简单，但由于某种原因我很挣扎，我不知道为什么。

我的按钮是这样创建的

<asp:Button ID="btnX" runat="server" CssClass="close" Text="&times;" OnClientClick="return confirmClick();" />

我有一台服务器 onclick function 用 vb.net/c# 语言完成对我来说没问题 我总是可以这样翻译

Public Sub btnX_Click(sender As Object, e As EventArgs) Handles btnX.Click
   CloseModalForm()
 End Sub

我也有 javascript 理想情况下会在服务器代码之前调用

function confirmClick() {
            var _changed = document.getElementById('<%=hiddenField.ClientID %>').value;
            if (_changed == true) {
                alert(_changed);
            }
        }

但是这不起作用，我知道这是一个警报框，我最终将其更改为警报，同时试图让它工作并查看当隐藏字段为真时我是否可以得到一个弹出消息说真，因为它不是当隐藏字段为假时出现。 我在这方面搞砸了很多，因此我最终得到了警报。 但是如果我尝试一下，似乎什么都不起作用

if (alert(_changed)) {
  alert(_changed);
}  

然后无论值是真还是假，它都会显示警报框

这对我来说似乎很简单，但我无法让它工作，这一定意味着我错过了一些我没有想到的东西。 我已经用谷歌搜索了如何使用布尔值执行 if 语句，以防我弄错了，但我看不出我正在做的事情有什么问题。 唯一的另一件事是我可能完全否定了某些东西或错过了解释 JS 工作方式的方式。 理想情况下，这将是客户端而不是服务器端，因为这只是询问用户是否要继续的情况。 我仍然需要服务器端程序，因为在模态表单关闭时会发生更多事情。

任何帮助都感激不尽。

Answer 1

好的，首先，我假设您正在使用某种对话系统。 您可以尝试使用引导程序，但它们看起来很棒，但是用代码弹出这样一个对话框的标记和非常简单的方法很糟糕。 所以，我建议使用 jQuery.UI 对话框。 （jQuery.UI 对话框的唯一问题是看起来不太好。但是，对于这个例子，这就是我们要使用的。

下一步：我们都知道，当您放入服务器端按钮时，您也可以添加该客户端点击，如果例程返回 true，则后面的服务器端点击代码将运行。 如果 js 例程返回 false，则服务器端单击按钮代码不会运行。 这很清楚，甚至您发布的代码也显示了这种知识。

所以，为了超级快速和肮脏，并且匆忙，我们可以并且经常这样做：

        <asp:Button id="cmdDelete2" runat="server" class="btn myshadow" style="margin-left:15px"
            type="button"
            onclick="cmdDelete_ServerClick"
            onclientclick="return confirm('Really delete?')"  >
        </asp:Button>

当然对于上面，我们得到/看到 web 浏览器对话框，这些看起来真的很差！

但是，它确实有效。 因此你得到了这个：（我在上面的弹出对话框中编辑一条记录）

所以，上面使用 js confirm() 就可以了。 但正如您所见，position 和那个对话框有多丑？ 好吧，它只是丑陋。

因此，我们可以采用 jQuery.UI 对话框。 他们看起来好多了。 当然有引导程序，我看到很多人使用 sweetAlert（非常非常好）。

无论如何，所有这些所谓的“对话框”库看起来都很棒，function 很棒，甚至允许您设置对话框的 position，这是一个很大的问题？

好吧，首先让我们在上面进行更改以使用 jQuery.UI 对话框（我稍后会展示如何使用）。

所以，那个相当丑陋的内置浏览器对话框现在变成了这样：

上面现在好多了。 更好的是，当您单击该按钮时，对话框会在对话框的右下方和右侧弹出。（由于您只是查看单击该按钮，因此您的眼睛当前正在看！

您可以尝试上述方法并在此处使用工作演示：（它是 vb.net + web 表格）。

好的，那么下一个要解决的问题是什么？

当前 JavaScript (js) 框架对非阻塞代码的所有操作，这意味着虽然 confirm() 确实停止了代码，但是否等待？ 然后当你点击确定（或取消）时继续，这样的阻塞代码。 或不再允许停止 js 代码。 唯一的例外是 alert() 和 confirm()，但是，它们可以锁定和冻结浏览器代码。 所以不再推荐它们，所以呢？ 所有这样的第 3 方 - 甚至在未来。 将使用非阻塞代码。 这意味着代码是异步的。

那么，如果我们调用代码来弹出一个对话框呢？ function 将运行，显示对话框，然后返回并退出！！！！

但是现在，这意味着我们迫不及待地将真/假值返回给按钮单击（客户端）。

但是，你可以使用一个整洁的小技巧！！！

你现在（必须）这样做：

您运行客户端代码 - 返回 false（服务器端按钮单击不运行）。 然后当用户在弹出对话框中做出选择时，您设置一个标志以返回 true 并再次单击按钮，，。 这一次，客户端例程再次触发，但返回 true（假设您点击确定！！！）。

因此，代码将如下所示：

该按钮如下所示：

        <button id="cmdDelete" runat="server" class="btn myshadow" style="margin-left:15px"
            type="button"
            onserverclick="cmdDelete_ServerClick"
            onclick="if (!MyConfirmDel(this)) {return false};"  >
            <span aria-hidden="true" class="glyphicon glyphicon-trash"> Delete</span>
        </button>  

请注意，我没有使用 asp:Button，因为我想要按钮（垃圾箱）中具有精美外观的引导程序图标。 但是，这对于按钮或 asp.net 按钮的工作原理是相同的。 但是我不得不稍微改变一下确认例程，并使用上面的.MyConfirmDel(this) （该按钮结合了 onclick 和 onserverclick - 它们实际上作为一个 js 例程运行 - 我们无法改变它，如果你使用普通 jane asp.net 按钮。然后第一个标记将起作用。

js 代码现在看起来像这样：

      var MyConfirmDelOK = false
       function MyConfirmDel(Btn) {
           if (MyConfirmDelOK) {
               MyConfirmDelOK = false
               return true
           }
           var myDialog = $("#mydelpop");
           myDialog.dialog({
               title: "Delete Hotel",
               width: "26em",
               modal: true,
               dialogClass: 'ui-widget-shadow',                   
               position: { my: "left top", at: "right bottom", of: Btn },
                buttons: {
                    Delete: function () {
                        myDialog.dialog('close')
                        MyConfirmDelOK= true
                        $(Btn).click()
                    },
                    cancel: function () {
                        myDialog.dialog('close')
                    }
                }
           });
       

注意上面的小心。 我们通过按钮，弹出对话框。 用户从对话框中进行选择，如果单击确定/是，我们设置标志 = true，然后再次单击按钮。 按钮单击再次运行客户端代码，但这一次，它返回 true，因此服务器端单击代码现在将运行。

如果您使用的是普通的简 asp.net，那么：

        <asp:Button id="cmdDelete2" runat="server" class="btn myshadow" style="margin-left:15px"
            type="button"
            onclick="cmdDelete_ServerClick"
            OnClientClick="return MyConfirmDel(this)"  >
        </asp:Button>  

您可以在此处尝试使用上面的工作演示：

http://www.kallal.ca/WebSite11/WebForm2

你的下一个想法？

如果他们真的改变了事情，我想“确认”或“警告”或进行一些对话？ 不要，，， - 只是不要......如果你这样做，那么你有编辑的每个地方，然后为了一致的用户界面体验。 那么你必须这样做。 它只是成为用户的“唠叨”，（你将不得不编写相当多的额外客户端代码来完成这项工作）。 当你弹出一个对话框时，给他们一个保存按钮和一个取消按钮。 然后，用户将养成按取消按钮返回 go 的习惯。 他们不会在意他们是否意外编辑，因为如果他们不想编辑，他们可以学会总是点击取消。

（你可以在上面的链接中看到这个 UI 的运行）。

你可以有这样一个确认对话框——但对话框越少，软件就越有趣。 给用户一个取消或撤消按钮。 让他们决定是否要纾困——不要整天唠叨他们。