何时调用服务器 onClick 与 OnClientClick

Posted 2023-04-12

【中文标题】何时调用服务器 onClick 与 OnClientClick

【英文标题】：when to call the Server onClick vs OnClientClick

【发布时间】：2014-01-05 16:52:25

【问题描述】：

有人可以解释为什么点击 btnSaveFile1，调用 onClientClick() 并且如果 onClientClick() 返回 true，它会调用服务器，但是如果 onClientClick() 返回 false 它不会调用服务器。我完全理解。

但为什么 btnSaveFile2 的情况并非如此，无论 onClientClick() 返回什么，它似乎都不会调用服务器？

为什么 return false; 必须是内联的？

<asp:Button ID="btnSaveFile1" runat="server" Text="Save" OnClientClick="if(!onClientClick())return false;" OnClick="btnSaveFile_Click" UseSubmitBehavior="false" />


<asp:Button ID="btnSaveFile2" runat="server" Text="Save" OnClientClick="return onClientClick()" OnClick="btnSaveFile_Click" UseSubmitBehavior="false" />


 <script type="text/javascript">   
       function onClientClick() 
            if (CurrentMemberValidatedWindow()) 
                if (!ValidateForm()) 
                    return false;
                
            
            else 
                DeleteInvalidFiles();
                return false;
            
            return true;
        
 </script>

【参考方案1】：

TL;DR：删除 UseSubmitBehavior="false"

更长的解释：

使用 UseSubmitBehavior 属性指定是否为 Button 控件 使用客户端浏览器的提交机制或 ASP.NET 回发 机制。默认情况下，此属性的值为 true，导致 按钮控件使用浏览器的提交机制。 如果您指定 false，ASP.NET 页面框架将客户端脚本添加到页面 将表单发布到服务器。

如果您查看页面源代码，则呈现按钮的onclick 不仅仅是"if(!onClientClick())return false;" 或"return onClientClick();"，因为它必须添加客户端脚本才能发布表单。所以现在第一个按钮是：

"if(!onClientClick())return false;;__doPostBack('ctl00$MainContent$btnSaveFile1','')"

第二个是

"return onClientClick();__doPostBack('ctl00$MainContent$btnSaveFile2','')"

所以你可以看到在#2 的情况下，如果它返回true，它不会到达实际提交表单的脚本。 （按钮 1 不是这种情况，它会到达脚本并因此提交表单）。