anzeigen Loader auf Ajax.BeginForm einreichen

Question

Was ist der beste Weg, um einen Lader zu zeigen und die Taste deaktivieren, wenn wir ein Formular einreichen:

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

Die Loader-Image-Datei ist

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

Vielleicht mit das OnBegin aus dem BeginForm, um den Loader und das OnComplete anzuzeigen, um es zu verstecken? Aber wie kann ich das Bild ändern?

Irgendwelche suggestion, um gute Qualität kostenlose Lader zu finden?

Dank

Answer 1

Setzen Sie Ihren Laden-Bild-Tag in einem div-Tag wie folgt:

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

in Ihrer CSS-Datei:

div#loading { display: none; } 

Und in der Form:

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

Und, als hinzufügen cript zu Ihrer Ansicht:

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