ASP.NET WebForms：不使用OnClientClick，表单提交前运行jQuery脚本

完全不需要给每个ASP.NET按钮手动设置OnClientClick，我们可以通过捕获表单的submit事件来统一处理验证逻辑，还能轻松区分不同提交按钮对应的行为。下面是具体实现步骤和注意事项：

核心思路 #

ASP.NET WebForms的表单提交本质上还是标准HTML表单的提交流程，所以我们可以用jQuery监听表单的submit事件，在事件触发时执行自定义验证，根据结果决定是否允许提交。同时，我们需要额外处理“区分触发提交的按钮”这个WebForms特有的需求——因为多个按钮提交时，后端靠__EVENTTARGET和__EVENTARGUMENT来识别按钮，但前端需要知道是哪个按钮触发的，才能做针对性逻辑。

具体实现代码 #

1. 基础版（无UpdatePanel场景） #

首先确保代码在DOM加载完成后执行，我们可以把逻辑放到$(document).ready()里：

$(document).ready(function() {
    // 存储当前点击的提交按钮
    let clickedSubmitBtn = null;

    // 监听所有ASP.NET提交按钮的点击事件
    // 包含原生submit按钮和UseSubmitBehavior="true"的button按钮
    $("input[type='submit'], input[type='button'][usesubmitbehavior='true']").click(function() {
        clickedSubmitBtn = $(this);
    });

    // 监听表单的submit事件
    $("#<%= form1.ClientID %>").submit(function(e) {
        // 执行你的自定义验证函数
        const isFormValid = validateForm();

        // 验证不通过时阻止提交
        if (!isFormValid) {
            e.preventDefault();
            alert("表单验证失败，请检查输入内容！");
            return false;
        }

        // （可选）根据不同按钮执行针对性逻辑
        if (clickedSubmitBtn) {
            const btnId = clickedSubmitBtn.attr("id");
            // 比如判断是不是保存按钮
            if (btnId === "<%= btnSave.ClientID %>") {
                const isSaveValid = checkSaveSpecificRules(); // 你的保存专属验证
                if (!isSaveValid) {
                    e.preventDefault();
                    alert("保存前请完成所有必填项！");
                    return false;
                }
            }
            // 其他按钮的逻辑可以继续添加
        }

        // 验证通过，允许表单提交
        return true;
    });
});

// 你的自定义验证函数示例
function validateForm() {
    let isValid = true;
    // 这里写你的验证逻辑，比如检查必填项、格式等
    $(".required-field").each(function() {
        if ($(this).val().trim() === "") {
            isValid = false;
            $(this).addClass("error-border");
        } else {
            $(this).removeClass("error-border");
        }
    });
    return isValid;
}

2. 适配UpdatePanel场景 #

如果你的页面用了UpdatePanel做异步回发，需要注意异步刷新后DOM会被重新渲染，之前绑定的事件会失效。这时候我们需要借助PageRequestManager来重新绑定事件：

$(document).ready(function() {
    // 初始化绑定验证逻辑
    bindFormValidation();

    // 监听UpdatePanel的异步回发完成事件
    const prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function() {
        // 回发完成后重新绑定事件
        bindFormValidation();
    });
});

function bindFormValidation() {
    let clickedSubmitBtn = null;

    // 先解绑再绑定，避免重复绑定事件
    $("input[type='submit'], input[type='button'][usesubmitbehavior='true']")
        .off("click")
        .on("click", function() {
            clickedSubmitBtn = $(this);
        });

    $("#<%= form1.ClientID %>")
        .off("submit")
        .on("submit", function(e) {
            const isFormValid = validateForm();
            if (!isFormValid) {
                e.preventDefault();
                alert("验证失败！");
                return false;
            }

            // 针对删除按钮的确认逻辑示例
            if (clickedSubmitBtn && clickedSubmitBtn.attr("id") === "<%= btnDelete.ClientID %>") {
                if (!confirm("确定要删除这条记录吗？")) {
                    e.preventDefault();
                    return false;
                }
            }

            return true;
        });
}

// 自定义验证函数（同上）
function validateForm() {
    // ... 验证逻辑 ...
}

关键注意事项 #

• 按钮选择器覆盖全面：ASP.NET的按钮有两种生成方式，一种是type="submit"，另一种是设置UseSubmitBehavior="true"的type="button"，所以选择器要包含这两类元素。
• 避免重复绑定事件：在UpdatePanel场景下，每次回发后要先解绑再绑定，防止同一个事件被触发多次。
• 验证逻辑的灵活性：你可以在submit事件里统一做通用验证，再针对不同按钮添加专属验证或确认逻辑，完全不用修改后端按钮的属性。

这种方案的优势就是代码集中管理，不用逐个按钮配置OnClientClick，后期维护起来也更省心。

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