在Ajax.begin上显示加载程序

提交表单时,显示加载程序并禁用按钮的最佳方式是:

@使用(Ajax.BeginForm(MVC.Account.Login(),新的AjaxOptions{OnSuccess=“onloginsucess”},新的{@id=“loginForm”}))
{
<div id=“logbtn”>
<input type=“submit”name=“invisible”class=“subinvisible”/>
<p>@HeelpResources.AccountLoginViewLoginButtonLabel</p>
<img src=”https://stackoverflow.com/questions/17688552/~/Content/Images/ui-symb-arrow-right-white-15x15.png“width=“13”height=“12”/>
</div>
}

加载程序映像文件为

<img src=”https://stackoverflow.com/questions/17688552/~/Content/Images/ui-loader-white-16x16.gif/>

也许使用BeginForm中的OnBegin来显示加载程序,使用OnComplete来隐藏它?但是我怎样才能改变图像呢

有没有找到高质量免费加载器的建议

谢谢

将加载图像标记放入div标记中,如下所示:

<div id=“加载”>
<img src=”https://stackoverflow.com/questions/17688552/~/Content/Images/ui-loader-white-16x16.gif/>
&lt/部门>

在CSS文件中:

div#加载{显示:无;}

以您的形式:

@使用(Ajax.BeginForm(MVC.Account.Login(),
新的AjaxOptions{OnSuccess=“onLoginSAccess”,LoadingElementId=“loading”,
OnBegin=“onLoginBegin”},
新的{@id=“loginForm”})
{
<div id=“logbtn”>
<input type=“submit”name=“invisible”class=“subinvisible”/>
<p>@HeelpResources.AccountLoginViewLoginButtonLabel</p>
<img src=”https://stackoverflow.com/questions/17688552/~/Content/Images/ui-symb-arrow-right-white-15x15.png“width=“13”height=“12”/>
</div>
}

并且,将脚本添加到视图中:

<script type=“text/javascript”>
函数onLoginBegin()
{ 
//禁用按钮并在此处隐藏其他图像
//或者你可以像下面那样隐藏整个div
$('#logbtn').hide();
}
&lt/脚本>

发表评论