在Asp.netMVC中，通过单击提交两次来避免重复表单提交

Question

我正在Asp.net MVC中呈现一个带有提交按钮的表单。成功将记录添加到数据库后，页面将重定向。以下是代码：-

[HttpPost]
public ActionResult Create(BrandPicView brandPic)
{
    if (ModelState.IsValid)
    {
        if (!String.IsNullOrEmpty(brandPic.Picture.PictureUrl))
        {
            Picture picture = new Picture();
            picture.PictureUrl = brandPic.Picture.PictureUrl;
            db.Pictures.Add(picture);
            brandPic.Brand.PictureId = picture.Id;
        }
        db.Brands.Add(brandPic.Brand);
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View();
}

但是，在测试过程中，我发现如果一次又一次地点击表单，就会提交多个条目并将其保存到数据库中。

我如何确保如果表单已经提交到服务器一次，那么就不会提交重复的表单。

Answer 1

我不认为这与评论中引用的答案完全重复，因为链接是针对springMVC的，而这个问题是针对.NETMVC的。

事实上，不久前我花了几个小时在这方面，并得出了以下结论。这个javascript很好地与不引人注目的jquery验证挂钩，您可以将它应用于任何具有<input type="submit"的表单。注意，它使用了jquery 1.7的on函数：

$(document).on('invalid-form.validate', 'form', function () {
    var button = $(this).find(':submit');
    setTimeout(function () {
        button.removeAttr('disabled');
    }, 1);
});
$(document).on('submit', 'form', function () {
    var button = $(this).find(':submit');
    setTimeout(function () {
        button.attr('disabled', 'disabled');
    }, 0);
});

需要setTimeouts。否则，即使客户端验证失败，您也可能在单击后看到一个禁用的按钮。我们把它放在一个全局javascript文件中，这样它就可以自动应用于我们所有的表单。

@seagull:于2020年11月16日更新

将选择器input[type="submit"]替换为:submit，因此它将与<button type="submit" />以及一起工作

Answer 2

使用mvc客户端验证的mvc应用程序的解决方案应该是：

$('form').submit(function () {
    if ($(this).valid()) {
        $(':submit', this).attr('disabled', 'disabled');
    }
});

Answer 3

在单击"提交"时禁用按钮。这可以使用JQuery/Java脚本来完成。

看看这个关于如何做到这一点的例子。

Answer 4

您可以使用这个。它包括不引人注目的jQuery验证。

$(document).on('submit', 'form', function () {
    var buttons = $(this).find('[type="submit"]');
    if ($(this).valid()) {
        buttons.each(function (btn) {
            $(buttons[btn]).prop('disabled', true);
        });
    } else {
        buttons.each(function (btn) {
            $(buttons[btn]).prop('disabled', false);
        });
    } });

对于jQuery验证，请包括

~/Scripts/jquery.validate.min.js
~/Scripts/jquery.validate.unobtrusive.min.js

Answer 5

您可以使用ajax。BeginForm代替了html。BeginForm为了实现这一点，如果您使用OnSuccess而不是OnBegin，您可以确保您的方法执行成功，之后您的按钮将变为停用状态，使用ajax您可以保留在当前视图中，您可以更新当前视图，而不是重定向

@using (Ajax.BeginForm(
new AjaxOptions
{
    HttpMethod = "post",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "dive",
    OnBegin="deactive"
}))
{
//body of your form same as Html.BeginForm
<input type="submit" id="Submit" value="Submit" />
}

并在您的表单中使用这个jquery：

<script type="text/javascript" language="javascript"> function deactive() { $("#Submit").attr("disabled", true); }</script>

使用ajax时要小心，您必须在页面末尾调用此scrip

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Answer 6

通过JavaScript禁用按钮是可以的，但如果用户禁用了按钮或绕过了按钮怎么办？如果使用客户端安全性，则使用服务器端进行备份。我会在这里使用PRG模式。

Answer 7

window.onload = function () {
            $("#formId").submit(function() {// prevent the submit button to be pressed twice
                $(this).find('#submitBtnId').attr('disabled', true);
                $(this).find('#submitBtnId').text('Sending, please wait');
            });
        }