Aggiungi un indicatore di "caricamento" in una MVC webgrid?

Question

Sto utilizzando MVC3 e visualizzo i miei dati in una webgrid. Vorrei visualizzare l'indicatore di caricamento (immagine di caricamento) visualizzato quando filtro/ricerca. Qual è l'approccio migliore?

mio filtro di ricerca (codice):

@using (Html.BeginForm()) 
{ 
    <fieldset id="fieldset1" class="coolfieldset"> 

     <legend>Search for Towers Watson Subscribers/Contacts</legend> 
     <div class="div-table"> 
     <div class="div-table-row"> 
      <div class="div-table-col">Reg Date:</div> 
      <div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="@regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="@regDateEnd" name="regDateEnd" type="text" /></div> 
     </div> 
     <div class="div-table-row"> 
      <div class="div-table-col">Profile Mod Date:</div> 
      <div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="@profileModDateFrom" name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="@profileModDateEnd" name="profileModDateEnd" type="text" /></div> 
     </div> 
     <div class="div-table-row"> 
      <div class="div-table-col">Last Name:</div> 
      <div class="div-table-col"><input type="text" id="lastName" name="lastName" value="@lastName" /></div> 
     </div> 
      <div class="div-table-row"> 
      <div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div> 
      <div class="div-table-col"></div> 
     </div> 
     </div>  
    </fieldset> 
} 
{@Html.Partial("List_Ajax", Model)} 

Answer 1

http://www.ajaxload.info/ consente di creare una bella gif di carico. Crea un'immagine e posizionala in un div come sotto. Quindi associa il pulsante di ricerca con jQuery per visualizzare il div nascosto quando viene fatto clic.

Posiziona il seguente div in cui desideri visualizzare l'icona di caricamento.

<div id="loadingDiv" style="display:none"><img src="loading.gif"></div> 

Allora questo nel vostro file JavaScript

$(document).ready(){ 
    $('#search').click(function(){ 
     $('#loadingDiv').show(); 
    }); 
}); 

Poi, quando hai finito di caricare, semplicemente:

function SomeCallBackEvent(){ 
    $('#loadingDiv').hide(); 
};