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

我正在使用提交按钮呈现Asp.net MVC中的表单。成功添加记录到数据库后，页面会重定向。以下是代码： -通过点击两次提交避免在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(); 
}

但是，在测试时，我看到的是，如果一次又一次地点击表格中，多个项目被提交并保存到数据库中。

如何确保如果表单已提交一次到服务器，则不提交重复项。

来源

2012-01-06 Pankaj Upadhyay

这已经被问了很多次才：http://stackoverflow.com/questions/2324931/duplicate-form-submission-in-spring – Kane 2012-01-06 12:48:24

@Kane ，+1和抱歉。我总是检查问题是否曾被问过，但可能是我改变我的眼镜号码的时候了;-) ..... – 2012-01-06 13:05:28

可能的重复[如何防止在不使用Javascript的情况下在.NET MVC中提交多个表单？] （https://stackoverflow.com/questions/4250604/how-do-i-prevent-multiple-form-submission-in-net-mvc-without-using-javascript） – KyleMit 2017-09-19 12:33:58

我不认为这是相当复杂的评论中引用的答案，因为链接是春季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); 
});

的一个定时器。否则，即使客户端验证失败，您也可能会得到一个单击后禁用的按钮。我们在一个全球性的JavaScript文件中有这个，这样它就会自动应用到我们所有的表单中。

来源

2012-01-06 14:07:38 danludwig

之前，我尝试了这一点，我想让你知道我的应用程序在开始时使用了由VS添加的jquery-1.5.1。用1.7版本取代我的应用程序？ – 2012-01-06 14:14:20

我不能说，但它不应该。如果你想坚持1.5，你可以把'on'改成'live'。 – danludwig 2012-01-06 14:18:03

这很好，但应该提到的是，您可能正在使用按钮，而这不会找到。如果您同时使用输入和按钮，则必须同时搜索这两个文件，如 var button = $（this）.find（'input [type =“submit”]，button [type =“submit”]'）; – erosebe 2015-02-09 21:32:26

禁用按钮提交点击。这可以使用JQuery/Java Script来完成。

看看this example如何做到这一点。

来源

2012-01-06 12:45:54 Maheep

通过JavaScript禁用该按钮没有问题，但如果用户禁用了该按钮或者绕过了该按钮，该怎么办？如果您使用客户端安全性，请将其与服务器端进行备份。我会在这里使用PRG pattern。

来源

2012-01-06 14:11:05 eth0

从您引用的链接 - PRG模式无法解决重复表单提交的所有情况。 PRG无法解决的一些已知的重复表单提交是：...如果Web用户在服务器响应加载之前多次单击提交按钮（可能会通过使用JavaScript禁用第一次单击后的按钮来阻止）。 – danludwig 2012-01-06 14:32:12

@olivehour是正确的，我很笨，没有正确地阅读这个问题。 – eth0 2012-01-09 11:47:59

@ eth0 - 不，您*只是*没有正确地读取问题 – 2014-03-06 10:19:08

您可以使用ajax.BeginForm insted的html.BeginForm来实现这一点，如果你使用OnSuccess insted的的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你必须到c所有这些纸条在你的页面的最后

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

来源

2015-11-10 18:03:05 Alireza

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

回答

相关问题