Как избежать повторной отправки формы в 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');
    }
});

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, вы должны вызвать этоСценарий в конце вашей страницы

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

Answer 6

Отключение кнопки - это нормально с помощью JavaScript, но что если пользователь отключил ее или они обошли ее?Если вы используете безопасность на стороне клиента, сделайте резервную копию на стороне сервера.Я бы использовал здесь шаблон PRG .