☰

Asp.net MVC でフォームの重複送信を 2 回クリックして回避する 質問する

tag-icon • tag-icon asp.net-mvc-3 forms
Asp.net MVC でフォームの重複送信を 2 回クリックして回避する 質問する

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(':submit');
    setTimeout(function () {
        button.removeAttr('disabled');
    }, 1);
});
$(document).on('submit', 'form', function () {
    var button = $(this).find(':submit');
    setTimeout(function () {
        button.attr('disabled', 'disabled');
    }, 0);
});

setTimeouts が必要です。そうしないと、クライアント側の検証が失敗した場合でも、クリック後にボタンが無効になる可能性があります。これをグローバル JavaScript ファイルに格納して、すべてのフォームに自動的に適用します。

2020年11月16日更新@カモメ:

セレクタを次のようinput[type="submit"]に置き換えたので、次のようにも:submit動作します。<button type="submit" />

おすすめ記事