Tránh gửi biểu mẫu trùng lặp trong Asp.net MVC bằng cách nhấp vào gửi hai lần

Question

Tôi đang hiển thị biểu mẫu trong Asp.net MVC bằng nút gửi. Trang chuyển hướng sau khi bổ sung hồ sơ thành công vào cơ sở dữ liệu. Sau đây là mã: -

[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(); 
} 

Nhưng trong khi kiểm tra, tôi thấy rằng nếu biểu mẫu được nhấp lặp đi lặp lại, nhiều mục được gửi và lưu vào cơ sở dữ liệu.

Làm cách nào để đảm bảo rằng nếu biểu mẫu đã được gửi một lần đến máy chủ thì không có bản sao nào được gửi.

Answer 1

Tôi không nghĩ rằng đây là một bản sao của câu trả lời được tham chiếu trong nhận xét, vì liên kết là dành cho Spring MVC và câu hỏi này dành cho .NET MVC.

Tôi đã dành một vài giờ để thực hiện việc này một lúc và đã đưa ra những điều sau. Javascript này móc độc đáo với việc xác nhận jquery không phô trương, và bạn có thể áp dụng nó cho bất kỳ hình thức nào có <input type="submit". Lưu ý rằng nó sử dụng chức năng on của jquery 1.7:

$(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 là cần thiết. Nếu không, bạn có thể kết thúc bằng một nút bị tắt sau khi được bấm ngay cả khi xác thực phía máy khách không thành công. Chúng tôi có điều này trong một tập tin javascript toàn cầu để nó được tự động áp dụng cho tất cả các hình thức của chúng tôi.

Answer 2

Tắt nút trên Gửi được nhấp. Điều này có thể được thực hiện bằng cách sử dụng JQuery/Java Script.

Nhìn vào this example về cách thực hiện việc này.

Answer 3

Vô hiệu hóa nút này là tốt qua JavaScript nhưng điều gì sẽ xảy ra nếu người dùng vô hiệu hóa hoặc bỏ qua nút này? Nếu bạn sử dụng bảo mật phía máy khách thì hãy sao lưu nó với phía máy chủ. Tôi sẽ sử dụng số PRG pattern tại đây.

Answer 4

Bạn có thể sử dụng Ajax.BeginForm insted của Html.BeginForm để đạt được điều này, nếu bạn sử dụng OnSuccess insted của OnBegin bạn có thể chắc chắn rằng phương pháp của bạn thực hiện thành công và sau đó nút lần lượt của bạn để vô hiệu hóa, với ajax bạn ở trong xem hiện tại và bạn có thể cập nhật xem hiện tại của bạn thay vì chuyển hướng

@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" /> 
} 

và sử dụng jquery này trong hình của bạn:

<script type="text/javascript" language="javascript"> function deactive() { $("#Submit").attr("disabled", true); }</script> 

hãy cẩn thận khi sử dụng ajax bạn phải c tất cả scrip này vào cuối trang của bạn

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