在Ajax.BeginForm显示装载机提交 [英] Show loader on Ajax.BeginForm submit

问题描述

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

What is the best way to show a loader and disable the button when we submit a form:

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

装载机图像文件

The loader image file is

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

也许使用OnBegin从BeginForm显示加载程序和的onComplete隐藏-呢？但我怎么可以改变形象？

Maybe using the OnBegin from the BeginForm to show the loader and the OnComplete to hide-it? But how can I change the image?

任何sugestion找到好的品质的免费装载机？

Any sugestion to find nice quality free loaders?

感谢

推荐答案

把你装的图像标记div标签像这里面的：

Put your loading image tag inside a div tag like this:

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

和，将脚本添加到您的视图：

And, add a script 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>

这篇关于在Ajax.BeginForm显示装载机提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！