Показать погрузчик на 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" /> 

Может быть, используя OnBegin из BeginForm, чтобы показать загрузчик и OnComplete, чтобы скрыть? Но как я могу изменить изображение?

Любое sugestion, чтобы найти хорошие качественные бесплатные погрузчики?

Благодаря

Answer 1

Поместите свою загрузку тег изображения внутри сНа тега, например так:

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

И, добавить как cript to your Вид:

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