Web ページの updatepanel に updateprogress コントロールを使用しています。対応するポストバック要素を取得した場合にのみロードする updateprogress の条件を指定しました。ポストバック要素が 1 つしかない場合にのみ正常に機能します。ページ内の他のポストバック要素を確認し、updateprogress コントロールを有効にする方法。私のコードとして
<style type="text/css">
.Background
{
position: fixed; left: 0; top: 0; z-index: 10; width: 100%;height: 100%;
filter: alpha(opacity=40);
}
</style>
<script type="text/JavaScript" language="JavaScript">
function pageLoad() {
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_endRequest(endRequest);
manager.add_beginRequest(OnBeginRequest);
}
function OnBeginRequest(sender, args) {
var postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Button1') {
$get('UpdateProgress1').style.display = "block";
}
$get('ParentDiv').className = 'Background';
}
function endRequest(sender, args) {
$get('ParentDiv').className = '';
} </script>
私のaspxコードは
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<div id="ParentDiv">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<td height="403">
<iframe id="IFOEvent" name="InIframe" scrolling="auto" runat="server"
width="75%" height="203" class=""></iframe>
</td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div id="IMGDIV" align="center">
<img src="Images/loading.gif" alt="" /><br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>