UPDATE:
Я добавил функцию java-скрипта:
function showWait()
{
if ($get('filUpload').value.length > 0)
{
$get('UpdateProgress1').style.display = 'block';
}
}
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" OnClientClick="javascript:showWait();" Text="OK" CausesValidation="false" />
Но мне нужно, чтобы это работало внутри панели ajax ModalPopupExtender, поэтому, когда я запускаю код, появляется UpdateProgress, но анимированный GIF не становится анимированным! это статично!
<head runat="server">
<script type="text/javascript">
function showWait()
{
$get('UpdateProgress1').style.display = 'block';
}
</script>
<title>Untitled Page</title>
<link href="Controls/UploadFile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button id="btnShowPopup" runat="server" Text="Open" />
<asp:Panel ID="pnlUploader" runat="server" CssClass="pnlUploader" Width="280px" style="display:none;" >
<div id ="pnlDragMe" class="pnlDragMe">Image Uploader </div>
<div id="uploaderContent" class="uploaderContent" runat="server">
Select File:
<br />
<asp:FileUpload ID="filUpload" runat="server" />
<br />
<div id="buttons" >
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" OnClientClick="javascript:showWait();" Text="OK" CausesValidation="false" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</div>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img alt="" src="Images/ajax-loader.gif" style="width: 48px; height: 48px" />
Uploading image...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Label ID="lblFeedbackOK" SkinID="FeedbackOK" runat="server"></asp:Label>
<asp:Label ID="lblFeedbackKO" SkinID="FeedbackKO" runat="server"></asp:Label>
<cc1:ModalPopupExtender ID="mdlPopup1" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlUploader"
CancelControlID="btnCancel" BackgroundCssClass="modalBackground"
PopupDragHandleControlID="pnlDragMe" Drag="true" RepositionMode="None" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
Я думаю, анимированный GIF статичен из-за PostBackTrigger.