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