c# - 在 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>