UpdateProgress不适用于触发器属性内部的按钮

时间:2014-02-27 07:17:42

标签: asp.net updatepanel updateprogress

     <asp:UpdatePanel ID="Upnl1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
      <table width="100%"><tr>
                            <td align="center" colspan="3">
                                <asp:Button ID="btnShowReport" runat="server" CssClass="ButtonClassLong" SkinID="LargeButton"
                                    Text="Show Report" OnClick="btnShowReport_Click"   TabIndex="15" />
                                <asp:Button ID="btnClear" runat="server" CssClass="ButtonClass" Text="Clear" OnClick="btn_Click"
                                    TabIndex="16" />
                                <asp:Button ID="btnClose" runat="server" CssClass="ButtonClass" OnClick="btnClose_Click"
                                    Text="Close" CausesValidation="False" TabIndex="17" />
                                <asp:CheckBox ID="ChkPrint" Text="Print View" runat="server" TabIndex="14" />
                            </td>
                        </tr>
                    </table></ContentTemplate>
<Triggers>
     <asp:PostBackTrigger ControlID="btnShowReport" />
</Triggers></asp:UpdatePanel><asp:UpdateProgress ID="UpdateProgress" runat="server">
            <ProgressTemplate>
                <asp:Image ID="Image1" ImageUrl="~/App_Themes/RIBO/Images/Progress.gif" AlternateText="Processing"
                    runat="server" />
            </ProgressTemplate>
        </asp:UpdateProgress>

这是我的编码,我的问题是当我点击清除按钮时更新进度运行良好,当我点击btnShowReport它不会工作。

如何显示触发器属性内的按钮单击事件的更新进度。

2 个答案:

答案 0 :(得分:5)

问题是AssociatedUpdatePanelID。你没有设置你的'UpdateProgress`的Associateid

将其设置为UpdateProgress

<asp:UpdateProgress ID="UpdateProgress" runat="server"  AssociatedUpdatePanelID="Upnl1">

根据MSDN

  

UpdateProgress控件呈现显示或隐藏的元素       取决于关联的UpdatePanel控件是否导致了       异步回发。用于初始页面呈现和同步        回发时,不显示UpdateProgress控件。

编辑

原因是<asp:PostBackTrigger ControlID="btnShowReport" />

这将导致整页回发。您应该将Trigger更改为

<asp:AsyncPostBackTrigger ControlID="btnShowReport" />

它会为你完成这项工作......如果你能阅读引用的陈述,你也可以自己解决它......

答案 1 :(得分:1)

This is working for me, I hope this will helpful for some

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Show Loading Image while uploading images using updatepanel</title>
<style type="text/css">
.overlay
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
</style>
<script type="text/javascript">
function showProgress() {
var updateProgress = $get("<%= UpdateProgress.ClientID %>");
updateProgress.style.display = "block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
<ContentTemplate>
<div style="align:center; margin-left:350px; margin-top:200px">
<asp:FileUpload ID="uploadfiles1" runat="server" />
<asp:Button ID="btnUpload" Text="Upload" runat="server" onclick="btnUpload_Click" OnClientClick="showProgress()" /><br />
<asp:Label ID="lblMsg" runat="server"/>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
<ProgressTemplate>
<div class="overlay">
<div style=" z-index: 1000; margin-left: 350px;margin-top:200px;opacity: 1;-moz-opacity: 1;">
<img alt="" src="loading.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>