ASP.Net UpdatePanel集成reCAPTCHA报错：已在此元素渲染

我之前在做ASP.Net表单项目时也碰到过一模一样的问题——用UpdatePanel解决了验证码回发消失的问题，结果又触发了reCAPTCHA has already been rendered in this element的报错。本质原因是每次UpdatePanel异步回发后，ASP.Net的AJAX框架会重新执行pageLoad函数，而DOM里的g-recaptcha元素会被重新生成，你之前的代码会尝试在新元素（或者残留的旧实例）上重复调用渲染方法。

下面给你两个经过验证的解决方案：

方案一：给已渲染元素加标记，避免重复执行 #

我们可以给已经完成渲染的reCAPTCHA元素添加一个自定义数据属性，每次渲染前先检查这个属性是否存在，只有未标记的元素才执行渲染：

修改你的JavaScript代码如下：

function pageLoad() {
    $('.g-recaptcha').each(function (index, obj) {
        // 检查当前元素是否已经渲染过reCAPTCHA
        if (!$(this).data('recaptcha-rendered')) {
            grecaptcha.render(obj, { 'sitekey': 'XXXX' });
            // 标记该元素已完成渲染
            $(this).data('recaptcha-rendered', true);
        }
    });
}

这个方案简单直接，适合场景比较简单的表单，核心是通过标记避免重复调用grecaptcha.render。

方案二：结合ASP.Net AJAX事件，先销毁旧实例再渲染 #

如果你的页面有复杂的UpdatePanel回发场景，更稳妥的方式是利用ASP.Net内置的PageRequestManager事件，在每次回发完成后先销毁旧的reCAPTCHA实例，再重新渲染：

// 页面首次加载时执行初始渲染
function pageLoad() {
    renderRecaptcha();
}

// 监听UpdatePanel异步回发完成的事件
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
    renderRecaptcha();
});

function renderRecaptcha() {
    $('.g-recaptcha').each(function (index, obj) {
        // 如果当前元素已有reCAPTCHA实例，先销毁
        if (obj.recaptchaWidgetId) {
            grecaptcha.destroy(obj.recaptchaWidgetId);
        }
        // 重新渲染并保存实例ID，方便后续销毁
        obj.recaptchaWidgetId = grecaptcha.render(obj, { 'sitekey': 'XXXX' });
    });
}

这个方案的优势在于彻底解决了回发前后的实例冲突问题，不管UpdatePanel回发多少次，都能保证每次渲染的是全新的reCAPTCHA实例，不会出现重复渲染或消失的问题。

另外需要注意：你的reCAPTCHA API脚本标签已经放在了UpdatePanel外面，这是正确的，避免了回发时重复加载API脚本导致的其他问题。

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