OnClientClick 自定义消息框之前 Onclick 事件处理程序不起作用

Posted 2023-03-31

【中文标题】OnClientClick 自定义消息框之前 Onclick 事件处理程序不起作用

【英文标题】：OnClientClick custom message box before Onclick event handler not working

【发布时间】：2021-08-13 21:48:53

【问题描述】：

我想要一个自定义消息框 OnClientClick 。如果用户选择是，则 C# 代码中的 Onclick 事件处理程序应该被触发。但不知何故，我无法使用 ASP.net 和 jquery 来做到这一点。

目前正在发生的事情

仅触发 C# 代码

我所期待的

客户端确认消息（如果用户单击“是”）然后是服务器端 代码触发器。

我的 html

 <form id="form1" runat="server">                                                                
     <div>
       <asp:Button ID="btnSubmit" Text="submit" runat="server" OnClick="btnDelete_Click" 
       OnClientClick="if(!ShowDeleteFormConfirmation()) return false;;" />       
    </div>
</form>

jQuery

  function ShowDeleteFormConfirmation() 
        var confirmationMessage,
            dlgButtons = 
                "No": function () 
                    $(this).dialog("close");
                    return false;
                ,
                "Yes": function () 
                    $(this).dialog("close");                        
                    return true;
                
            ;
        confirmationMessage = "This form has already been assigned and will be marked as deleted.";
        var $panelContainer = $("<div>" + confirmationMessage + "</div>").appendTo('body');
        $panelContainer.attr("title", "Confirmation to delete a form");
        var myPos = [$(window).width() / 2 - 100, 50];
        $panelContainer.dialog(
            modal: false,
            draggable: false,
            position: myPos,
            button: dlgButtons
        );
      

C# ////OnClick

      protected void btnDelete_Click(object sender, EventArgs e)
             
                 ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Delete button clicked.');", true);
              ```

这就是我想要实现的。 http://jsfiddle.net/y5z01nbr/

感谢观看。

【参考方案1】：

好的，如果你在 js 代码中使用“confirm”，你的代码会起作用，那是因为 alert() 和 confirm() 暂停了调用代码。

然而，今天，几乎所有的 WEB 代码库都被编写为不会停止，也不会冻结浏览器。 jQuery 就是这样一种系统。 （它不会暂停代码）。虽然我可以介绍 await 的概念 - 这对于这篇 POST 来说有点太复杂了。

那么，这意味着什么：

the jQuery code does NOT halt, 
and thus when you click on the button, 
the client side code runs WITHOUT halting 
and thus the button click (server side code) will 
ALSO run right away - not waiting.

那么，在 jQuery 对话框的情况下呢？你不能暂停代码。这意味着你必须把它倒过来。将显示 jQuery 对话框，然后您必须调用/运行/单击该服务器端按钮。因此，您必须添加一个新按钮，并在现有按钮上使用 style="display:none"。然后显示对话框，并根据您的答案然后单击（呼叫）您现在拥有/拥有的那个原始按钮。

因此代码将如下所示：

<div>
   <asp:Button ID="btnSubmit" Text="submit" runat="server" OnClick="btnDelete_Click" 
   Style="display:none" clientIDmode="static" />     

   <asp:Button ID="btnSubmitX" Text="submit" runat="server"  
   clientIDmode="static" OnClientClick="ShowDeleteFormConfirmation();" />     

<\div>

所以我放了另一个按钮 - 代码后面没有服务器。隐藏第一个按钮，不显示，并删除客户端单击。我将客户端点击移动到第二个按钮。

现在，我们可以这样做了：

     dlgButtons = 
            "No": function () 
                $(this).dialog("close");
            ,
            "Yes": function () 
                $(this).dialog("close");                        
                $('#btnSubmit').click();
            
        ;

所以我们要做的是启动对话框。基于是，然后我们点击我们的按钮。如果您选择否，则关闭对话框，但无需执行其他操作。

一般的硬性规定？ 您的浏览器代码现在很少见阻塞代码 - 调用 jQuery.ui 对话框，实际上是大多数这些较新的 UI 控件？代码不会等待，不会停止。这意味着您不能使用返回 true/false 来控制服务器端事件存根是否会运行（您可以使用 js confirm()，但不能使用 jQuery，因为它不会等待，也不会停止代码） .

【讨论】：

谢谢它有效。没有想到一个隐藏的占位符。好主意。