ASP:按钮的更新进度

update progress for ASP:Button

本文关键字:更新 按钮 ASP      更新时间:2023-09-26

我想在单击服务器端按钮时使用显示"正在加载图像",该图像应在按钮事件完成后卸载。

http://ajax.net-tutorials.com/controls/updateprogress-control/必须在这里使用Javascript。

 $('#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     
        }
    });
});
您可以使用

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