为 cshtml 文件中的 2 个按钮发送 2 个 recaptcha v3 令牌的问题

Question

我的 cshtml 文件中有两个按钮。对于第一个按钮，我可以将 recaptcha v3 令牌发送到我的控制器。但是如果我尝试从我的第二个按钮发送令牌，它将 null 作为令牌发送到控制器。我的代码在下面，我不知道哪里出了问题。如何从第二个按钮发送 v3 令牌？

@using (Html.BeginForm("myaction", "mycontroller", FormMethod.Post))
{
    @Html.TextBoxFor(model => model.text)
    @Html.HiddenFor(model => model.pagenumber)
    <input id="token" name="token" type="hidden" />
    <input id="submit" type="submit" value="Show comments" />
}

@using (Html.BeginForm("myaction", "mycontroller", FormMethod.Post))
{
    @Html.TextBoxFor(model => model.text)
    @Html.HiddenFor(model => model.pagenumber)
    <input id="token" name="token" type="hidden" />
    <input id="submit" type="submit" value="Show comments" />
}





<script src="https://www.google.com/recaptcha/api.js?render=mysitekey
"></script>
<script>grecaptcha.ready(function () {
    grecaptcha.execute('mysitekey', { action: 'submit' }).then(function (token) {

        document.getElementById("token").value = token;


        });

    });</script>

Answer 1

您正在使用 getElementById，它找到的第一个元素 returns 与 Id 相匹配，这就是为什么只有一种形式适合您（ID 应该是唯一的，并且您不应有两个具有相同 ID 的元素）。

这就是我们 类 来识别多个元素的原因。所以只需将两个输入上的 id="token" 替换为 class="token" 然后你就可以像这样替换它们的值：

   var elements = document.querySelectorAll('.token');
    elements.forEach(function(element){
        element.value = token;
    });

更新

ActionLink 是一个标签助手，它在服务器上呈现给锚标签 <a>，并且由于您是在客户端获取令牌，因此您必须获取该锚标签并使用 Javascript.

将您的令牌作为参数附加到其 href 属性

像这样：

let element = document.querySelector("Your link id or class");
let attribute = element.getAttribute('href');
element.setAttribute('href', attribute + '?token=' + token);