通过单击提交两次避免在Asp.net MVC中提交重复表单

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

我不认为这与注释中引用的答案完全重复,因为链接是针对spring MVC的,而这个问题适用于.NET MVC.

我实际上花了几个小时在这一段时间,并想出了以下内容.这个javascript很好地与不显眼的jquery验证挂钩,你可以将它应用于任何具有的形式<input type="submit".请注意,它使用jquery 1.7的on功能:

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

需要setTimeouts.否则,即使客户端验证失败,您也可能会在单击后禁用该按钮.我们在全局javascript文件中有这个,以便它自动应用于我们所有的表单.

Answer 2

单击"提交"上的"禁用"按钮.这可以使用JQuery/Java Script完成.

看看这个例子如何做到这一点.

Answer 3

具有mvc客户端验证的mvc应用程序的解决方案应为：

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