¿Agregar un indicador de "carga" en una red de malla MVC?

Question

Estoy usando MVC3 y visualizo mis datos en una red web. Me gustaría mostrar el indicador de carga (imagen de carga) que se muestra cuando filtrar/buscar. ¿Cuál es el mejor enfoque?

Mi filtro de búsqueda (código):

@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/ le permite crear un buen gif carga. Crea una imagen y colócala en un div como se muestra a continuación. A continuación, vincula el botón de búsqueda con jQuery para mostrar el div oculto al hacer clic.

Coloque el siguiente div donde desee que aparezca el icono de carga.

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

Entonces esto en su archivo JavaScript

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

Luego, cuando haya terminado de cargar, simplemente:

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