在 MVC 中提交表单之前显示加载器答案

【问题标题】：Display loader before form submits in MVC在 MVC 中提交表单之前显示加载器
【发布时间】：2015-01-23 06:39:26
【问题描述】：

我目前有一个如下所示的登录表单：

+----------------------------------+
|                                  |
|           +----------+           |
|           | E:       |           |
|           | P:       |           |
|           | SUBMIT   |           |
|           +----------+           |
|             LOADER               |
|                                  |
+----------------------------------+

表格定义：

 @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
      {
        @Html.AntiForgeryToken()
            <form action="" id="test">

我的提交按钮显示如下：

   <div>
       <input type="submit" value="Log in" onclick="OpenSite();" />
       <a>@Html.ActionLink("Forgot your password?","ForgotPassword","Account")</a>
   </div>

加载器：

   <div class="loader" id="myLoader" style="display:none">Loading...</div>

使用“OpenSite”功能：

<script>
    function OpenSite() {

        $('.loader').show();
        $('#openPopup').click();
    };
</script>

如何在提交表单之前强制执行此功能，但是当我按下“Submit”按钮时？

即：

+---------------+
 User Fills form
+---------------+
       ||
       \/
+---------------+
  User Presses 
     submit
+---------------+
       ||
       \/
+---------------+
 Display loader
+---------------+
       ||
       \/
+---------------+
  Display popup
+---------------+ 
       ||
       \/
+---------------+
  Submit form 
  to controller
+---------------+

这意味着“加载”动画将在下一页加载时显示。

如何做到这一点？

我尝试在函数开头添加alert("hello world");，它执行了，但我的加载器根本没有显示:(

任何帮助将不胜感激。

我也试过了：

$("#test").submit(function (event) {
    $('#myLoader').show();
});

没有运气

【问题讨论】：

你试过在表单提交事件中展示它吗？
就像@filur 建议的那样，您需要使用“onsubmit”事件
已经尝试过了，成功率为零。

标签： jquery asp.net-mvc forms loader

【解决方案1】：

您需要捕获表单的默认操作，以便在您希望它喜欢之前它不会提交：

 $('#formid').on('submit',function (e) {
    e.preventDefault() // stops normal submit action
   //make loading div visible, set it to absolute position in middle of page  and just make it display: block; or something
   //do submit action stuff here, i.e. ajax stuff

})

编辑：很抱歉，它不是在 'click' 上，而是在 'submit' 上，同时点击提交和按 Enter 提交。

【讨论】：

这有一些问题，主要是用户也可以按“输入”键并提交表单，完全绕过这一点。
按回车提交与点击提交相同，因此它也会捕获按回车。我知道它会这样做，因为我将它用于我自己的东西，并且它可以在没有任何代码更改的情况下按 Enter 工作，所以我知道它可以工作。

【解决方案2】：

我讨厌回答自己的问题，但为了获得“解决方法”，我不得不使用内联代码：

使用：

<input type="submit" value="Log in" onclick="$('#myLoader').show(); alert('hello');" />

都会显示加载程序，然后是警报。

我认为这里的问题在于加载程序被动画化，在提交实际页面之前显示它本身需要很长时间。

【讨论】：

【解决方案3】：

无论何时提交表单，并且您想要更改正常的提交功能，请按照 Thermatix 的建议使用 onSubmit 功能。这个问题的诀窍是您希望它与其他内容一起提交，因此删除内联内容并尝试以下操作：

$('#formID').on('submit',function (e) {
    e.preventDefault() // stops normal submit action

   $('#myLoader').show();
   // anything else you want to do while still on this page

   $('#formID').submit();
});

您也可能遇到提交表单的“问题”，以至于 .show() 事件对人眼不可见。如果您想测试此代码是否正常工作，只需注释掉$('#formID').submit(); 您应该会看到“正在加载...”。一旦你确认它工作正常，取消注释 form.submit 行，你应该是金子。

另一个完整性检查：确保此代码存在于页面底部的<head> 或<script> 标记中。这可以确保 JS 看到这个函数附加到的 DOM 元素。

【讨论】：