UpdateProgress not working for button which is in inside of trigger property

Question

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

This is my coding , My issue is when i click the clear button the update progress working well, when i click btnShowReport it wont work.

how to show the update progress for button click event which is in inside the trigger property.

What for you need synchronous postback on `btnShowReport` click? — Yuriy Rozhovetskiy, Feb 27 '14 at 07:21
I want , if i click btnShowReport the UpdateProgress will show... — Singaravelan, Feb 27 '14 at 07:23

Mayank Pathak · Answer 1 · 2014-02-27T07:38:03.330

5

Problem is AssociatedUpdatePanelID . You havn't set Associateid of your 'UpdateProgress`

set it on UpdateProgress

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

As per MSDN

The UpdateProgress control renders a element that is displayed or hidden depending on whether an associated UpdatePanel control has caused an asynchronous postback. For initial page rendering and for synchronous postbacks, the UpdateProgress control is not displayed.

EDIT:

Reason is <asp:PostBackTrigger ControlID="btnShowReport" />

Which will cause a full page postback. You should change your Trigger to

<asp:AsyncPostBackTrigger ControlID="btnShowReport" />

and it will do the job for you...If you could have read the quoted statement you would have able to solve it by yourself too...

edited Feb 27 '14 at 07:38

answered Feb 27 '14 at 07:28

Mayank Pathak

3,621
5
39
67

I set the property AssociatedUpdatePanelID="Upnl1" but it wont work(update progress not showing).... – Singaravelan Feb 27 '14 at 07:33
If I use `async` anything that is selected in the front-end (fileupload control filename) is not sent to the code-behind... – Si8 Dec 19 '16 at 17:12
@Si8 please check this link, Let me know if this does not helps https://pumexintellecto.wordpress.com/2013/08/07/asp-net-fileupload-partial-postback/ – Mayank Pathak Dec 20 '16 at 13:59
1

I just did some research and file upload requires full postback unfortunately. Thank you for the help :) – Si8 Dec 20 '16 at 14:49

Singaravelan · Answer 2 · 2016-02-02T06:49:58.083

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>

For posterity, could you include the relevant parts of the link which you found useful in your answer? That way, if the link goes down, changes, etc., your answer won't be rendered useless. Many thanks. — Wai Ha Lee, Feb 02 '16 at 06:38

UpdateProgress not working for button which is in inside of trigger property

2 Answers2