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

Posted 2023-02-15

【中文标题】ASP.NET JQuery，禁用表单提交按钮不调用 httpPost 操作

【英文标题】：ASP.NET JQuery, disabled a button on form submit not call httpPost action

【发布时间】：2021-12-09 08:45:33

【问题描述】：

我在一个 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（这是我想要调用的）。 有人知道为什么会导致这个“错误”吗？

【问题讨论】：

"如果我禁用了按钮，"如果没有提交按钮，你如何提交表单？

【参考方案1】：

试试这个

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

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

【讨论】：

您好！谢谢你回答这个！！但我不能使用这个解决方案，因为应用程序逻辑有点奇怪，并且正在调用返回相同视图的不同操作，因为它们将视图划分为多个部分，每个操作只是更改要显示的视图部分，即为什么使用 ActionName 属性。

【参考方案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)
    );

【参考方案3】：

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

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

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

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