Question

我正在设计一个时钟网络应用程序，在主页上，用户可以在该页面上进行进/出（如果有或没有当前活动记录）（来自SQL Server数据库）

我的格式如下：

<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操作都知道，如果active标志为true，则我们在数据库中找到记录，对其进行更新并提交更改以将其标记为inactive。否则，我们将创建一条新记录以追加到数据库中。然后，我只是重定向回到索引视图以重建模型。

Answer 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");
     }
 });

ASP.NET MVC核心-阻止多表单提交？

1 个答案: