显示装载机MVC

提交我现在有一个登录表单显示如下：显示装载机MVC

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

没有运气

来源

2014-11-25 jbutler483

您是否尝试过在表单提交事件中显示它？ – filur 2014-11-25 10:08:04

就像@filur建议的一样，你需要使用“onsubmit”事件 – Th0rndike 2014-11-25 10:14:18

已经尝试过了，没有成功。 – jbutler483 2014-11-25 10:15:45

你需要抓住形式的默认行为，所以你希望它像现在这样才不提交：

$('#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键提交。

来源

2014-11-25 10:51:11 Thermatix

这里有几个问题，主要的一点是用户也可以按'输入'，表单将被提交，完全绕过了这一点。 – jbutler483 2014-11-25 10:59:09

按Enter键提交与单击提交相同，因此它也捕获按下输入。我知道它是这样做的，因为我将它用于我自己的东西，它可以在没有任何代码更改的情况下按下输入来工作，所以我知道它是有效的 – Thermatix 2014-11-25 11:00:56

我讨厌回答我的问题，但为了使“处理方法”，我不得不使用内嵌代码：

使用：

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

均会显示在装载机，其次是一个警报。

我认为这里的问题是加载器被动画，它本身在实际页面提交之前显示时间太长。

来源

2014-11-25 11:25:45 jbutler483

无论何时提交表单，并且您想对常规提交功能进行更改，请使用onrmatix建议的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元素。

来源

2017-05-19 17:27:52

显示装载机MVC

回答

相关问题