прогресс обновления для ASP: Button

Question

Я хочу использовать показ «Загрузка изображения» на кнопку боковой кнопки сервера, которую следует выгрузить после завершения события кнопки.

http://ajax.net-tutorials.com/controls/updateprogress-control/ Должен использовать Javascript в этом.

Answer 1

$('#btnChange').click(function (event) { 
    if (event.preventDefault) event.preventDefault(); 
    else event.returnValue = false; 
    var dto = { 'id': value }; 
    //Webservice call started 
    $.ajax({ 
     type: "POST", 
     url: ".......", 
     data: JSON.stringify(dto),//you need json2.min.js for JSON.stringify() method 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     beforeSend: function() { 
      $('#imageid').attr('src', '../images/load.gif'); 
      //Show Loading Image which will show the progress 
     }, 
     success: function (msg) { 

      //When Successfully completed 
     }, 
     error: function (xhr, status) { 
      //when error occurs  
     } 
    }); 
}); 

Answer 2

Вы можете использовать ASP.NET Ajax UpdateProgress управления:

<asp:UpdatePanel ID="UdpFormPanel" runat="server > 
<ContentTemplate> 
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" 
      AssociatedUpdatePanelID="UdpFormPanel" DisplayAfter="0" > 
    <ProgressTemplate> 
     <div class="progress"> 
      <asp:Image ID="ImgProgress" runat="server" 
       ImageUrl="~/images/ajax-loader-arrows.gif" 
       ToolTip="loading..." />&nbsp;please wait... 
     </div> 
    </ProgressTemplate> 
</asp:UpdateProgress> 
     .............. 

Это образцовой прогресс-класс:

.progress 
{ 
    text-align:center; 
    vertical-align:middle; 
    position: absolute; 
    left: 44%; 
    top: 40%; 
    border-style:outset; 
    border-color:silver; 
    background-color:Silver; 
    white-space:nowrap; 
    padding:5px; 
}