javascript - 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;
}