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>

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

1 个答案: