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

Question

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

12

提交表单时，最好的方法是如何显示加载程序并禁用按钮：

@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中隐藏？但是我该如何更改图片？

有什么建议可以找到好的免费加载器吗？

谢谢

- Patrick

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ataravati · Accepted Answer

将您的加载图像标签放置在一个类似于这样的 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>