C# 在 Ajax.BeginForm 上显示加载器提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17688552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show loader on Ajax.BeginForm submit
提问by Patrick
What is the best way to show a loader and disable the button when we submit a form:
当我们提交表单时，显示加载器和禁用按钮的最佳方式是什么：
@using (Ajax.BeginForm(MVC.Account.Login(), new AjaxOptions { OnSuccess = "onLoginSuccess" }, new { @id = "loginForm" }))
{
<div id="logbtn">
<input type="submit" name="invisible" class="subinvisible"/>
<p>@HeelpResources.AccountLoginViewLoginButtonLabel</p>
<img src="~/Content/Images/ui-symb-arrow-right-white-15x15.png" width="13" height="12" />
</div>
}
The loader image file is
加载程序图像文件是
<img src="~/Content/Images/ui-loader-white-16x16.gif" />
Maybe using the OnBegin from the BeginForm to show the loader and the OnComplete to hide-it? But how can I change the image?
也许使用 BeginForm 中的 OnBegin 来显示加载器和 OnComplete 来隐藏它？但是我怎样才能改变图像？
Any sugestion to find nice quality free loaders?
任何寻找质量好的免费装载机的建议？
Thanks
谢谢
采纳答案by ataravati
Put your loading image tag inside a div tag like this:
将您的加载图像标签放在一个 div 标签中，如下所示：
<div id="loading">
<img src="~/Content/Images/ui-loader-white-16x16.gif" />
</div>
In your CSS file:
在您的 CSS 文件中：
div#loading { display: none; }
And, in your form:
而且，以您的形式：
@using (Ajax.BeginForm(MVC.Account.Login(),
new AjaxOptions { OnSuccess = "onLoginSuccess", LoadingElementId = "loading",
OnBegin = "onLoginBegin" },
new { @id = "loginForm" }))
{
<div id="logbtn">
<input type="submit" name="invisible" class="subinvisible"/>
<p>@HeelpResources.AccountLoginViewLoginButtonLabel</p>
<img src="~/Content/Images/ui-symb-arrow-right-white-15x15.png" width="13" height="12" />
</div>
}
And, add a script to your View:
并且，在您的视图中添加一个脚本：
<script type="text/javascript">
function onLoginBegin()
{
// Disable the button and hide the other image here
// or you can hide the whole div like below
$('#logbtn').hide();
}
</script>
