Thêm chỉ báo "tải" vào webgrid MVC?

Question

Tôi đang sử dụng MVC3 và hiển thị dữ liệu của mình trong webgrid. Tôi muốn hiển thị chỉ báo tải (tải hình ảnh) được hiển thị khi tôi lọc/tìm kiếm. Đâu là cách tiếp cận lí tưởng nhất?

lọc My tìm kiếm (code):

@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/ phép bạn tạo một tải gif đẹp. Tạo một hình ảnh và đặt nó vào một div như dưới đây. Sau đó, liên kết nút tìm kiếm với jQuery để hiển thị div ẩn khi được nhấp.

Đặt div sau vào nơi bạn muốn biểu tượng tải xuất hiện.

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

Sau đó này trong Javascript của bạn nộp

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

Sau đó, khi bạn đã hoàn tất tải, chỉ cần:

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