UpdateProgress Manual Control from CodeBehind

Question

User1557998713 posted

I have an UpdateProgress that appears when submitting but I want to use the same UpdateProgress to activate it manually for other reasons for events that happen inside or outside the updatepanel. This way, I don't need to have two cursor controls for the same page.

How do you do it from codebehind?

<asp:UpdateProgress ID="Form_UpdateProgress" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="Form_UpdatePanel">
<ProgressTemplate>
<div class="loaderDer">
<div class="loaderDercenter">
<asp:Image ID="Form_ImageProgress" runat="server" ImageUrl="../images/loader.gif"/>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>

<asp:updatepanel ID="Form_UpdatePanel" runat="server">
<ContentTemplate>...

This Not Work. why? But I need something similar.

protected void Fcn_Button_Click(object sender, System.EventArgs e)
{ 

Form_UpdateProgress.Visible = true;
Form_UpdateProgress.Attributes.Add("style","display:block");

dynamic Control_Image = Form_UpdateProgress.FindControl("Form_ImageProgress");
Control_Image .Visible = true;

System.Threading.Thread.Sleep(5000);

Control_Imagen.Visible = false;
Form_UpdateProgress.Visible = false;
Form_UpdateProgress.Attributes.Add("style","display:none");

}

Answer 1

User1535942433 posted

Hi zequion,

Accroding to your description and codes,I guess your submit is outside the updatepanel.

I think it couldn't show UpdateProgress .When you click the submit ,it will postback and the value of postBackSettings.PanelID will be generated to "ScriptManager1Button1".AssociatedUpdatePanelID is not matched with it, so it can't pop out UpdateProgress.

So,I suggest you could add submit into the updatepanel or you could write javascript to show the UpdateProgress.

More details,you could refer to below codes:

Submit inside the updatepanel:

ASPX:

<div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdateProgress ID="Form_UpdateProgress" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="Form_UpdatePanel">
                <ProgressTemplate>
                   <asp:Image ID="Form_ImageProgress" runat="server" ImageUrl="image/image5.jpg" />Loading, please wait... </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="Form_UpdatePanel" runat="server">
                <ContentTemplate>
                    <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
                    <br />
                    <asp:Button ID="Fcn_Button" runat="server" Text="Button" OnClick="Fcn_Button_Click" />
                </ContentTemplate>
                
            </asp:UpdatePanel>
 </div>

Code-Behind:

protected void Fcn_Button_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            lblText.Text = "Processing completed";
        }

Javascript:

 
 <script src="Scripts/jquery-3.3.1.js"></script>
    <script>
         $(function () {
             $("#Button1").click(function () {
                var updateProgress = $get('<%= Form_UpdateProgress.ClientID %>');
                updateProgress.style.display = "block";
            })
        })
    </script>

<div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdateProgress ID="Form_UpdateProgress" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="Form_UpdatePanel">
                <ProgressTemplate>
                   <asp:Image ID="Form_ImageProgress" runat="server" ImageUrl="image/image5.jpg" />Loading, please wait... </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="Form_UpdatePanel" runat="server">
                <ContentTemplate>
                    <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
                    <br />
                    
                </ContentTemplate>
                
            </asp:UpdatePanel>

          <asp:Button ID="Button1" runat="server" Text="ccc" />
        </div>

Result:

Best regards,

Yijing Sun

Answer 2

User1557998713 posted

Thank you for your help, then I try it and tell you. One of the places where I am going to use it is in a Grid, by double clicking on any row. I wanted rather to know how to do it from c# codebehind, if it can be without the use of javascript, since I have more control over the code. Do you know how to do it? Thank you

Answer 3

User1557998713 posted

Nothing worked for me but I found this article and modified it to enable UpdateProgress from Aspx and aspx.cs
https://www.codeproject.com/Articles/18238/The-UpdateProgress-Control-of-ASP-NET-AJAX-Extensi 

<!-- --------------------------
         FORMULARIO.
         -------------------------- -->
    <form ID="Form_Buscar" runat="server" class="smart-pl1">
	    <asp:ScriptManager runat="server" ID="Form_ScriptManager" EnablePageMethods="true"/>

        <!-- --------------------------
             UPDATEPROGRESS GENERAL. LEYENDO... Ver https://www.codeproject.com/Articles/18238/The-UpdateProgress-Control-of-ASP-NET-AJAX-Extensi
             -------------------------- -->
        <div>
            <script language="javascript" type="text/javascript"> 
                var prm = Sys.WebForms.PageRequestManager.getInstance(); 
                prm.add_initializeRequest(Fcn_UpdateProgressGen_InitializeRequest); 
                prm.add_endRequest(Fcn_UpdateProgressGen_EndRequest); 
                var postBackElement; 

                function Fcn_UpdateProgressGen_InitializeRequest(sender, args) 
                {  if (prm.get_isInAsyncPostBack()) args.set_cancel(true); 
                   postBackElement = args.get_postBackElement(); 
                   if (postBackElement.id == 'Button1_UpdateProgressGen') $get('Form_UpdateProgressGen').style.display = 'block'; 
                } 
                function Fcn_UpdateProgressGen_EndRequest(sender, args){ if (postBackElement.id == 'Button1_UpdateProgressGen') $get('Form_UpdateProgressGen').style.display = 'none'; } 
                function Button2_UpdateProgressGen_invoke_Button1_UpdateProgressGen_Click() { document.getElementById("Button1_UpdateProgressGen").click(); }
            </script>
        </div>

        <!-- UPDATEPROGRESS GENERAL. Form_UpdatePanelGen. -->
        <asp:UpdatePanel ID="Form_UpdatePanelGen" runat="server">
            <ContentTemplate>
                <asp:Label ID="Form_Label_UpdatePanelGen" runat="server" Width="145px"/>
            </ContentTemplate>
            <Triggers> 
                <asp:AsyncPostBackTrigger ControlID="Button1_UpdateProgressGen" EventName="Click"/>
            </Triggers>
        </asp:UpdatePanel>

        <!-- UPDATEPROGRESS GENERAL. Form_UpdateProgressGen. -->
        <asp:UpdateProgress ID="Form_UpdateProgressGen" runat="server" AssociatedUpdatePanelID="Form_UpdatePanelGen">
            <ProgressTemplate>
                Leyendo ...
            </ProgressTemplate>
        </asp:UpdateProgress>
        <br/><asp:Button ID="Button1_UpdateProgressGen" runat="server" OnClick="Button1_UpdateProgressGen_Click" Text="UpdateProgress"/>
             <asp:Button ID="Button2_UpdateProgressGen" runat="server" OnClick="Button2_UpdateProgressGen_Click" Text="UpdateProgress desde CodeBehind"/>
        <!-- FINAL UPDATEPROGRESS GENERAL. -->
     </form>

CodeBehind

// --------------------------
        // UPDATEPROGRESS GENERAL. LEYENDO...
        // --------------------------
        protected void Button1_UpdateProgressGen_Click(object sender, EventArgs e)
        { System.Threading.Thread.Sleep(2000);
          Form_Label_UpdatePanelGen.Text=DateTime.Now.ToLongTimeString();
        }
        protected void Button2_UpdateProgressGen_Click(object sender, EventArgs e)
        { System.Web.UI.ScriptManager.RegisterStartupScript(this, GetType(), "Button2_UpdateProgressGen_InvokeButton", "Button2_UpdateProgressGen_invoke_Button1_UpdateProgressGen_Click();", true);;
        }