MVC web kılavuzunda "yükleme" göstergesi ekleme?

Question

MVC3 kullanıyorum ve verilerimi bir web kılavuzunda görüntülüyorum. Filtreli/arandığımda görüntülenen yükleme göstergesi (yükleme görüntüsü) görüntülemek istiyorum. En iyi yaklaşım nedir?

Arama filtresi (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/ güzel bir yükleme gif oluşturmanızı sağlar. Bir görüntü oluşturun ve aşağıdaki gibi bir div'a yerleştirin. Sonra tıklatıldığında gizli div görüntülemek için jQuery ile arama düğmesine bağla.

Aşağıdaki div'u, yükleme simgesinin görünmesini istediğiniz yere yerleştirin. Yüklediğiniz bitince

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

O zaman bu sizin JavaScript basitçe, Sonra

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

dosyası:

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