显示装载机提交

Question

什么是展示装载机和禁用按钮的最好方式，当我们提交表单：

@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> 
} 

装载机图像文件

<img src="~/Content/Images/ui-loader-white-16x16.gif" /> 

也许使用从BeginForm的OnBegin显示加载器和OnComplete隐藏它？但是，我怎样才能改变图像？

任何消化，找到优质的免费装载机？

感谢

Answer 1

把你的加载图像标签div标签像这里面：

<div id="loading"> 
    <img src="~/Content/Images/ui-loader-white-16x16.gif" /> 
</div> 

在你的CSS文件：

div#loading { display: none; } 

而且，在你的形式：

@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> 
} 

并且，添加为cript 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>