在Ajax.BeginForm上显示加载器提交

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

并且,在您的视图中添加一个脚本:

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