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完成。

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

Answer 3

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

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

Answer 4

通过JavaScript禁用该按钮很好但是如果用户禁用它或者绕过它会怎样？如果您使用客户端安全性，请将其备份到服务器端。我会在这里使用PRG pattern。

Answer 5

你可以使用html.BeginForm的ajax.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，你必须在页面的末尾调用这个脚本

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

Answer 6

你可以使用这个。它包括不引人注目的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 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');
            });
        }

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

7 个答案: