Избегайте повторной подачи формы в Asp.net MVC, дважды нажав кнопку submit

Я передаю форму в 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();
}

Но, проверяя, я видел, что если форму снова и снова щелкают, несколько записей отправляются и сохраняются в базе данных.

Как я могу убедиться, что если форма была отправлена один раз на сервер, то никакие дубликаты не будут отправлены.

Ответ 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, чтобы он автоматически применялся ко всем нашим формам.

Ответ 2

Отключить кнопку при нажатии кнопки "Отправить". Это можно сделать с помощью JQuery/Java Script.

Посмотрите этот пример о том, как это сделать.

Ответ 3

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

Ответ 4

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

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