Dodać wskaźnik "ładowanie" w sieci web MVC?

Question

Używam MVC3 i wyświetlanie moich danych w sieci Web. Chciałbym wyświetlić wskaźnik ładowania (obraz ładowania) wyświetlany podczas filtrowania/wyszukiwania. Jakie jest najlepsze podejście?

Mój filtr (kod):

@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/ pozwala stworzyć miłą załadunku gif. Utwórz obraz i umieść go w dziale jak poniżej. Następnie zwiąż przycisk wyszukiwania z jQuery, aby wyświetlić ukryty div po kliknięciu.

Umieść następujący div, w miejscu, gdzie ma się pojawić ikona ładowania.

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

Wtedy to w pliku JavaScript

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

Wtedy kiedy skończysz ładowania, po prostu:

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