ASP.NET MVC Core - 防止多个表单提交？答案

【问题标题】：ASP.NET MVC Core - Preventing multiple form submission?ASP.NET MVC Core - 防止多个表单提交？
【发布时间】：2019-02-01 05:29:54
【问题描述】：

我正在设计一个打卡 Web 应用程序，如果用户有当前的活动记录（来自 SQL 服务器数据库），用户可以在主页上打卡/打卡

我有以下表格：

<form asp-action="RegisterClockAction" asp-antiforgery="false" method="post">
    <div class="form-group">
        <input asp-for="ActiveFlag" type="hidden"/>
    </div>
    <div class="form-group row">
        <div class="col-sm-5 offset-sm-1 center-column">
            <button id="clock-in-btn" type="submit" class="btn clock-button" disabled>Clock In</button>
        </div>
        <div class="col-sm-5 center-column">
            <button id="clock-out-btn" type="submit" class="btn clock-button" disabled>Clock Out</button>
        </div>
    </div>
</form>

然后我有这个特定视图的以下 JavaScript

<script type="text/javascript">
    $(function() {
        const activeFlag = @Html.Raw(Json.Serialize(Model.ActiveFlag));
        if (activeFlag) {
            $("#clock-out-btn").prop("disabled", false);
        } else {
            $("#clock-in-btn").prop("disabled", false);
        }
    });

    $("form").submit(function() {
        if ($(this).valid()) {
            $(this).find(":submit").attr("disabled", "disabled");
        }
    });
</script>

现在表单提交事件确实可以防止重复提交，但这是我应该这样做的正确方式吗？

不确定是否有必要知道，但所有控制器的 POST 操作都会，如果活动标志为真，那么我们在数据库中找到记录，更新它并提交更改以标记为非活动。否则，我们创建一条新记录以附加到数据库中。然后，我只是重定向回索引视图来重建模型。

【问题讨论】：

如果表单可以满足您的需要，这是很常见的，从用户的角度来看，最好在提交后在表单前面放置一个指示加载的微调器。
这是我更喜欢 ajax 的原因之一，这样您就可以显示微调器或加载 gif 并防止用户在网页内操作。
Now the form submit event does prevent from double submission, but is this the correct way I should be doing it?-这里的双重提交是什么意思？
如果您想在表单提交过程中更加灵活，我选择了 AJAX，在使用实际 POST 方法并禁用提交按钮以防止多次发布之前，只需简单的 preventDefault() 提交就足够了（通过单击提交按钮多次）。
我的意思是双重提交，如果我删除那段 JavaScript 代码，如果我发送垃圾邮件“Clock In”按钮，它将提交多个 POST 请求，创建多个数据库记录。

标签： c# asp.net asp.net-mvc

【解决方案1】：

您可以使用 javascript

解决此问题

你应该使用event.preventDefault()，这样事件的默认动作就不会再次被触发。

 $("form").submit(function(e) { // 'e' <- add this line of code
     e.preventDefault(); // <- add this line of code
     if ($(this).valid()) {
        $(this).find(":submit").attr("disabled", "disabled");
     }
 });

【讨论】：