Show loader on Ajax.BeginForm submit

Question

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 = \"o         


        

Answer 1

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

In your CSS file:

div#loading { display: none; }

And, in your form:

@using (Ajax.BeginForm(MVC.Account.Login(), 
  new AjaxOptions { OnSuccess = "onLoginSuccess", LoadingElementId = "loading", 
    OnBegin = "onLoginBegin" }, 
  new { @id = "loginForm" }))
{
  

     
    
@HeelpResources.AccountLoginViewLoginButtonLabel
    
  
}

And, add a script to your View: