ASP.NET中JavaScript确认脚本对HTML和asp:Button均失效仅提示取消怎么解决

问题根因 #

• 自定义JS函数名confirm和浏览器原生弹窗方法window.confirm重名，函数内部触发无限递归，永远拿不到用户的选择结果
• ASP.NET Button的OnClientClick属性没有加return前缀，即使JS返回取消也会触发后端回发
• 加了runat="server"的原生HTML按钮不支持onclientclick属性，原配置下JS函数根本不会触发，后端永远拿不到选择参数

修复方案 #

前端代码修改如下，原有后端逻辑无需调整即可正常运行：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <!-- runat="server"的原生HTML按钮用onclick属性，加return控制是否提交 -->
    <button id="btnperfdel" runat=server type="submit" class="btn btn-outline-secondary" onclick="return confirmDel()">
        <i class="mdi mdi-delete">Delete</i> 
    </button>                                   
    <!-- asp:Button控件用OnClientClick属性，加return控制是否提交 -->
    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return confirmDel()"/>                   
</div>

<script type = "text/javascript">
// 重命名函数，避免和原生方法重名冲突
function confirmDel() {
    var confirm_value = document.createElement("INPUT");
    confirm_value.type = "hidden";
    confirm_value.name = "confirm_value";
    // 显式调用原生window.confirm避免歧义
    if (window.confirm("Confirm Delete?")) {
        confirm_value.value = "Yes";
        document.forms[0].appendChild(confirm_value);
        return true;
    } else {
        confirm_value.value = "No";
        document.forms[0].appendChild(confirm_value);
        return false;
    }
}
</script>

修复后选择确认会触发隐藏Label的逻辑，选择取消会弹出对应提示。

内容的提问来源于stack exchange，提问作者Souvik Roy