ASP.NET JQuery，禁用表单提交按钮不调用 httpPost 操作

Question

我在 ASP.NET MVC 应用程序中工作，我想在表单的 OnSubmit 事件期间禁用一个按钮，只是为了防止用户双击。所有 JQuery 部分工作正常，但我不明白为什么当我禁用提交按钮时，它总是调用我的控制器的默认操作。

这是 cshtml 代码：

@using(Html.BeginForm()){
  <input type="submit" value="Submit"/>
}
<script>
$(function(){
  $("form").submit(e=>{
    $('input[type="submit"]').prop("disable",true)
  })
})
</script>

JQuery 部分起作用并禁用按钮。

我的控制器：

public class MyController:Controller{
  public ActionResult MyController(ExampleModel model){
    return View(model);
  }
  [HttpPost,ActionName("MyController")]
  public ActionResult FormSubmmit(ExampleModel model){
    //Do some checks
    return View(model);
  }
}

情况是，如果我禁用按钮，表单总是调用操作 'MyController' 而不是操作 FormSubmit（这是我想调用的）。有人知道为什么会是这个“错误”的原因吗？

Answer 1

试试这个

@Html.BeginForm("FormSubmit", "My", FormMethod.Post) {
  <input type="submit" value="Submit"/>
}

并从 action 中删除 [HttpPost,ActionName("MyController")]，这是一个非常奇怪的属性

Answer 2

这是禁用按钮以防止任何“双击”的快速可靠方法

 <form ... onsubmit="myButton.disabled = true; return true;">
        ...
        <input type="submit" name="myButton" value="Submit">
    </form>

可以看到出处here

另一种在提交时执行此操作的方法是进行覆盖，然后重定向功能（可选，我用它来停止覆盖，只是简单地通知用户该功能已完成）

HTML:

<input type="submit" onclick="return FunctionOverlay(this);" />

<script>

        function FunctionOverlay(btnElement) 
            {
           
                showOverlay(btnElement);              
                $('#myForm').submit();
            }
        

    </script>

JS:

function showOverlay(buttonElement) {
    $(buttonElement.parentNode).css('position', 'relative');
    $bgColor = $(buttonElement).attr('data-overlay-color');
    if ($bgColor === undefined) {
        $bgColor = '#fff';
    }
    $(buttonElement.parentNode).append('<div class="button-overlay" style="background-color:' + $bgColor + ';"><img src="images/blahblah.gif" /></div>'); //.css('background-color', $bgColor)
}

您可以使用 this 创建您自己的叠加 GIF 然后在你调用方法的控制器中，你可以用

结束它

return View("ButtonClicked");

并在您的主页中创建一个 cshtml ButtonClicked.cshtml

然后创建一个登录页面，您可以在其中插入一些文本，例如：

<div class="row">
    <div class="col">
      <p>  Thank you for clicking</p>
       
    </div>
    
</div>

另一种选择是使用超时进行覆盖

$('form').submit(function () {
        var button = $('#button');
        var oldValue = button.value;
        var isDisabled = true;

        button.attr('disabled', isDisabled);

        setTimeout(function () {
            button.value = oldValue;
            button.attr('disabled', !isDisabled);
        }, 3000)
    });

Answer 3

首先，谢谢解答！我只是找到了解决方案。

代码的问题是如果我使用禁用它会在表单提交事件期间更改请求元数据，所以我无法禁用按钮。

我找到了this解决方案，它只是从按钮上取下指针事件，然后它防止了双重提交问题。

$('input[type="submit"]').css("pointer-events","none")

ASP.NET JQuery，禁用表单提交按钮不调用 httpPost 操作

ASP.NET JQuery, disabled a button on form submit not call httpPost action

c#

asp.net

asp.net-mvc

jquery

razor