Pokaż ładowacz na Ajax.BeginForm złożyć

Question

Jaki jest najlepszy sposób, aby pokazać ładowarkę i wyłączyć przycisk kiedy złożyć formularz:

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

Plik ładowarka obraz jest

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

Może korzystania OnBegin z BeginForm, aby wyświetlić moduł ładujący i element OnComplete, aby go ukryć? Ale jak mogę zmienić obraz?

Jakąkolwiek sugestię, aby znaleźć ładowarki ładnej o dobrej jakości?

Dzięki

Answer 1

Put your ładowania znacznika obrazu wewnątrz znacznika div jak to:

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

W pliku CSS:

div#loading { display: none; } 

A, w postaci:

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

I dodaj jako cript do twojego widoku:

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