LoadingElementId in Ajax.BeginForm non visualizza l'immagine di caricamento

Question

Ho un'app MVC3 e ho bisogno di aggiungere un'immagine di caricamento Ajax. Ho messo questo sul mio punto di vista

@using (Ajax.BeginForm(
     "LogOn","Account", 
     new AjaxOptions { LoadingElementId = "div_loading" })) 

Questo è il mio molto semplice div sulla stessa vista:

<div id="div_loading" style="display:none;"> 
    <img src="@Url.Content("~/Content/Images/loading.gif")" alt="" /> 
</div> 

Quando clicco il mio pulsante di invio per inviare il modulo di schiena, il loading.gif non appare mai. Il mio codice funziona bene, ma non viene visualizzato alcun indicatore di caricamento. E l'immagine è nominata correttamente e nel posto giusto. Qualcuno ha un indizio perché?

Aggiornamento Apparentemente, questo ha qualcosa a che fare con le applicazioni Telerik. Se creo una normale app MVC3, funziona. Quando creo un'app Telerik MVC3, non funziona. Qualcun altro l'ha incontrato con Telerik?

Answer 1

Preferisco evitare di allegare un errore di caricamento a ogni chiamata Ajax che faccio.

La risposta superiore Ecco una soluzione per visualizzare una filatrice ajax (loading image) ogni volta ajax effettua una chiamata di invio:

Display spinner while waiting For ajax

Ha la funzionalità necessaria. Basta usare javascript per collegare il display dell'immagine alle chiamate Ajax.

Dovrebbe essere qualcosa del tipo:

<script type="text/javascript"> 
     $(document).ready(function() { 
      BindSpinner(); 
     }); 

     function BindSpinner() { 
      $("#div_loading").bind("ajaxSend", function() { 
       $(this).show(); 
      }).bind("ajaxStop", function() { 
       $(this).hide(); 
      }).bind("ajaxError", function() { 
       $(this).hide(); 
      }); 
     }; 
    </script> 

Quello che fa è visualizzare il div su ajax invio e nasconde su di arresto ajax o di errore per tutte le chiamate sulla tua pagina. Se metti questo script e il div nel tuo _layout lo farà per ogni chiamata Ajax sul tuo sito.

Answer 2

Si potrebbe voler provare questo invece. Ho preso dalla domanda SO here

<div id="div_loading" style="visibility:hidden;"> 
    <img src="@Url.Content("~/Content/Images/loading.gif")" alt="" /> 
</div> 

Answer 3

Si potrebbe provare questo così da: here

function AjaxBegin() 
{ 
    $('#div_loading').show(); 

} 
function AjaxComplete() 
{ 
    $("#div_loading").hide(); 
} 
function AjaxFailure(ajaxContext) 
{ 
    var response = ajaxContext.responseText; 
    alert("Error Code [" + ajaxContext.ErrorCode + "] " + response); 
} 


AjaxOptions: 

OnFailure = "AjaxFailure"; 
OnBegin = "AjaxBegin"; 
OnComplete = "AjaxComplete"; 

Answer 4

Ho avuto lo stesso problema e sono riuscito a risolverlo cambiando il nome dell'elemento di essere nascosto/mostrato. Ho usato il formato Camel Case: "myDivToBeHidden"

L'elemento necessita della proprietà "display" impostata su "none".