एक एमवीसी वेबग्रिड में "लोडिंग" सूचक जोड़ें?

Question

मैं एमवीसी 3 का उपयोग कर रहा हूं और एक वेबग्रिड में अपना डेटा प्रदर्शित कर रहा हूं। जब मैं फ़िल्टर/खोज करता हूं तो मैं लोडिंग सूचक (लोडिंग छवि) प्रदर्शित करना चाहता हूं। सबसे अच्छा तरीका क्या है?

मेरे खोज फ़िल्टर (कोड):

@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/ आप एक अच्छा लोड हो रहा है gif बना सकते हैं। एक छवि बनाएं, और इसे नीचे एक div में रखें। फिर क्लिक किए जाने पर छिपे हुए div को प्रदर्शित करने के लिए jQuery के साथ खोज बटन को बाध्य करें।

प्लेस निम्नलिखित div जहां लोड हो रहा है चिह्न प्रकट करना चाहते हैं।

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

फिर अपने जावास्क्रिप्ट में इस फ़ाइल

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

फिर जब आप लोड हो रहा है काम हो गया, बस:

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