DEVHIDE
Login Or Sign up

UpdateProgress not firing on every PostBack of controls inside UpdatePanel

2.5k Views Asked by At

I have an UpdatePanel:

<asp:UpdatePanel runat="server" ID="panelFatt">
<ContentTemplate>

    <div class="row" runat="server" id="divCFPIva">
        <div class="col-md-6">
            <div class="form-group">
                <label for="txtCF">Codice Fiscale</label>
                <asp:TextBox runat="server" ID="txtCF" type="text" MaxLength="16" class="form-control" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="txtPIVA">Partita IVA</label>
                <asp:TextBox runat="server" ID="txtPIVA" type="text" MaxLength="11" class="form-control" />
            </div>
        </div>
        <div class="col-md-12">
            <span class="help-inline hidden lblerror" runat="server" id="lblErrorCFPIva"></span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group" runat="server" id="divEmail">
                <label for="txtEmail" class="control-label">Email*</label>
                <div class="controls">
                    <asp:TextBox runat="server" TextMode="Email" type="text" ID="txtEmail" class="form-control" />
                    <span class="help-inline hidden lblerror" runat="server" id="lblErrorEmail"></span>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group" runat="server" id="divTelefono">
                <label for="txtTelefono" class="control-label">Recapito Telefonico*</label>
                <div class="controls">
                    <asp:TextBox runat="server" ID="txtTelefono" type="text" TextMode="Phone" class="form-control" />
                    <span class="help-inline hidden lblerror" runat="server" id="lblErrorTelefono"></span>
                </div>
            </div>
        </div>
    </div>
    <!-- /Row -->
    <div class="form-group">
        <asp:RadioButton runat="server" ID="radioScegliIndirizziFatt" Text="&nbsp;Scegli tra uno dei tuoi indirizzi" AutoPostBack="true" OnCheckedChanged="radioScegliIndirizziFatt_CheckedChanged" Checked="true" GroupName="radioIndirizziFatt" />
        <div class="form-group" runat="server" id="divScegliIndirizzoFatt">
            <asp:DropDownList runat="server" ID="ddlIndirizziFatt" class="form-control"></asp:DropDownList>
            <span class="help-inline hidden lblerror" runat="server" id="lblErrorScegliIndirizziFatt"></span>
        </div>
        <br />
        <asp:RadioButton runat="server" ID="radioNuovoIndirizzoFatt" Text="&nbsp;Inserisci un nuovo Indirizzo" AutoPostBack="true" OnCheckedChanged="radioNuovoIndirizzoFatt_CheckedChanged" GroupName="radioIndirizziFatt" />

        <div class="form-group" runat="server" id="divNomeFatt">
            <label for="txtNomeFatt" class="control-label">Nome o Ragione Sociale*</label>
            <div class="controls">
                <asp:TextBox runat="server" ID="txtNomeFatt" type="text" class="form-control" />
                <span class="help-inline hidden lblerror" runat="server" id="lblErrorNomeFatt"></span>
            </div>
        </div>
        <div class="form-group" runat="server" id="divIndirizzoFatt">
            <label for="txtIndirizzoFatt" class="control-label">Indirizzo*</label>
            <div class="controls">
                <asp:TextBox runat="server" ID="txtIndirizzoFatt" type="text" class="form-control" />
                <span class="help-inline hidden lblerror" runat="server" id="lblErrorIndirizzoFatt"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5">
                <div class="form-group" runat="server" id="divStatoFatt">
                    <label for="ddlStatoFatt" class="control-label">Stato</label>
                    <div class="controls">
                        <asp:DropDownList runat="server" ID="ddlStatoFatt" OnSelectedIndexChanged="ddlStatoFatt_SelectedIndexChanged" class="form-control" AutoPostBack="true" />
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="form-group" runat="server" id="divProvinciaFatt" visible="false">
                    <label runat="server" id="lblProvinciaFatt" for="ddlProvinciaFatt" class="control-label">Provincia</label>
                    <div class="controls">
                        <asp:DropDownList runat="server" ID="ddlProvinciaFatt" class="form-control" OnSelectedIndexChanged="ddlProvinciaFatt_SelectedIndexChanged" AutoPostBack="true" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8" runat="server" id="divCittaFatt">
                <div class="form-group">
                    <label runat="server" id="lblCittaFatt" for="txtCittaFatt" class="control-label">Città*</label>
                    <div class="form-group" runat="server" id="divDDLFatt" visible="false">
                        <asp:DropDownList runat="server" ID="ddlCittaFatt" class="form-control" OnSelectedIndexChanged="ddlCittaFatt_SelectedIndexChanged" AutoPostBack="true" />
                    </div>
                    <br />
                    <div class="form-group" runat="server" id="divTXTFatt" visible="false">
                        <asp:TextBox runat="server" ID="txtCittaFatt" type="text" class="form-control" />
                    </div>
                    <span class="help-inline hidden lblerror" runat="server" id="lblErrorCittaFatt"></span>
                </div>
            </div>
            <div class="col-md-4" runat="server" id="divCAPFatt">
                <div class="form-group">
                    <label for="txtCAPFatt" class="control-label">CAP*</label>
                    <div class="controls">
                        <asp:TextBox runat="server" ID="txtCapFatt" type="text" class="form-control" />
                        <span class="help-inline hidden lblerror" runat="server" id="lblErrorCAPFatt"></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</ContentTemplate>
</asp:UpdatePanel>

And I'm trying to fire an UpdateProgress that I would like show loading image at every post back of the controls inside the UpdatePanel.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="panelFatt">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="" src="https://i.stack.imgur.com/FhHRx.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>

This is not working at all. I saw on the Internet that someone associates a client method with the click of a button in the Update Panel. But I should do it for all the controls that make a post back within my update panel.

Is there a way to make it work?

I modified my code in this way:

<asp:UpdatePanel runat="server" ID="panelFatt" UpdateMode="Conditional">
<ContentTemplate>
    <div class="row">
        <div class="col-md-6">
            <h4>
                <asp:CheckBox runat="server" ID="checkFattura" Text="Desidero ricevere la Fattura" AutoPostBack="true" OnCheckedChanged="checkFattura_CheckedChanged" CssClass="checkbox-inline cssRadio" /></h4>
        </div>
    </div>
    <br />
    <div class="row" runat="server" id="divCFPIva">
        <div class="col-md-6">
            <div class="form-group">
                <label for="txtCF" runat="server" id="lblCF" visible="false">Codice Fiscale</label>
                <asp:TextBox runat="server" ID="txtCF" type="text" MaxLength="16" class="form-control" Visible="false" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="txtPIVA" runat="server" id="lblPIva" visible="false">Partita IVA</label>
                <asp:TextBox runat="server" ID="txtPIVA" type="text" MaxLength="11" class="form-control" Visible="false" />
            </div>
        </div>
        <div class="col-md-12">
            <span class="help-inline hidden lblerror" runat="server" id="lblErrorCFPIva"></span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group" runat="server" id="divEmail">
                <label for="txtEmail" class="control-label">Email*</label>
                <div class="controls">
                    <asp:TextBox runat="server" TextMode="Email" type="text" ID="txtEmail" class="form-control" />
                    <span class="help-inline hidden lblerror" runat="server" id="lblErrorEmail"></span>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group" runat="server" id="divTelefono">
                <label for="txtTelefono" class="control-label">Recapito Telefonico*</label>
                <div class="controls">
                    <asp:TextBox runat="server" ID="txtTelefono" type="text" TextMode="Phone" class="form-control" />
                    <span class="help-inline hidden lblerror" runat="server" id="lblErrorTelefono"></span>
                </div>
            </div>
        </div>
    </div>
    <!-- /Row -->
    <div class="form-group">
        <div runat="server" id="divNotVisibleFatt">
            <asp:RadioButton runat="server" ID="radioScegliIndirizziFatt" Text="&nbsp;Scegli tra uno dei tuoi indirizzi" AutoPostBack="true" OnCheckedChanged="radioScegliIndirizziFatt_CheckedChanged" Checked="true" GroupName="radioIndirizziFatt" />
            <div class="form-group" runat="server" id="divScegliIndirizzoFatt">
                <asp:DropDownList runat="server" ID="ddlIndirizziFatt" class="form-control"></asp:DropDownList>
                <span class="help-inline hidden lblerror" runat="server" id="lblErrorScegliIndirizziFatt"></span>
            </div>
            <br />
            <asp:RadioButton runat="server" ID="radioNuovoIndirizzoFatt" Text="&nbsp;Inserisci un nuovo Indirizzo" AutoPostBack="true" OnCheckedChanged="radioNuovoIndirizzoFatt_CheckedChanged" GroupName="radioIndirizziFatt" />
        </div>
        <div class="form-group" runat="server" id="divNomeFatt">
            <label for="txtNomeFatt" class="control-label">Nome o Ragione Sociale*</label>
            <div class="controls">
                <asp:TextBox runat="server" ID="txtNomeFatt" type="text" class="form-control" />
                <span class="help-inline hidden lblerror" runat="server" id="lblErrorNomeFatt"></span>
            </div>
        </div>
        <div class="form-group" runat="server" id="divIndirizzoFatt">
            <label for="txtIndirizzoFatt" class="control-label">Indirizzo*</label>
            <div class="controls">
                <asp:TextBox runat="server" ID="txtIndirizzoFatt" type="text" class="form-control" />
                <span class="help-inline hidden lblerror" runat="server" id="lblErrorIndirizzoFatt"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5">
                <div class="form-group" runat="server" id="divStatoFatt">
                    <label for="ddlStatoFatt" class="control-label">Stato</label>
                    <div class="controls">
                        <asp:DropDownList runat="server" ID="ddlStatoFatt" OnSelectedIndexChanged="ddlStatoFatt_SelectedIndexChanged" class="form-control" AutoPostBack="true" />
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="form-group" runat="server" id="divProvinciaFatt" visible="false">
                    <label runat="server" id="lblProvinciaFatt" for="ddlProvinciaFatt" class="control-label">Provincia</label>
                    <div class="controls">
                        <asp:DropDownList runat="server" ID="ddlProvinciaFatt" class="form-control" OnSelectedIndexChanged="ddlProvinciaFatt_SelectedIndexChanged" AutoPostBack="true" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8" runat="server" id="divCittaFatt">
                <div class="form-group">
                    <label runat="server" id="lblCittaFatt" for="txtCittaFatt" class="control-label">Città*</label>
                    <div class="form-group" runat="server" id="divDDLFatt" visible="false">
                        <asp:DropDownList runat="server" ID="ddlCittaFatt" class="form-control" OnSelectedIndexChanged="ddlCittaFatt_SelectedIndexChanged" AutoPostBack="true" />
                    </div>
                    <br />
                    <div class="form-group" runat="server" id="divTXTFatt" visible="false">
                        <asp:TextBox runat="server" ID="txtCittaFatt" type="text" class="form-control" />
                    </div>
                    <span class="help-inline hidden lblerror" runat="server" id="lblErrorCittaFatt"></span>
                </div>
            </div>
            <div class="col-md-4" runat="server" id="divCAPFatt">
                <div class="form-group">
                    <label for="txtCAPFatt" class="control-label">CAP*</label>
                    <div class="controls">
                        <asp:TextBox runat="server" ID="txtCapFatt" type="text" class="form-control" />
                        <span class="help-inline hidden lblerror" runat="server" id="lblErrorCAPFatt"></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="checkFattura" EventName="CheckedChanged"/>
    <asp:AsyncPostBackTrigger ControlID="radioScegliIndirizziFatt" EventName="CheckedChanged"/>
    <asp:AsyncPostBackTrigger ControlID="radioNuovoIndirizzoFatt" EventName="CheckedChanged"/>
    <asp:AsyncPostBackTrigger ControlID="ddlStatoFatt" EventName="SelectedIndexChanged"/>
    <asp:AsyncPostBackTrigger ControlID="ddlProvinciaFatt" EventName="SelectedIndexChanged"/>
    <asp:AsyncPostBackTrigger ControlID="ddlCittaFatt" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="panelFatt">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="" src="https://i.stack.imgur.com/FhHRx.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>

but even not working..

my tags are ok

and my data bind aer in Page_Load

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // Combo Province
            DataTable dtProv = oTabelle.GetDTProvinceByIdStato(IdStatoITA);
            oUty.loadDDL(ref ddlProvinciaFatt, dtProv, "IdProvincia", "NomeProvincia", "", "", "");
            ddlProvinciaFatt.SelectedValue = "";
            ...
        }
    }

and my associated event is the following

 protected void ddlProvinciaFatt_SelectedIndexChanged(object sender, EventArgs e)
    {
        txtCapFatt.Text = "";
        string idProvincia = ddlProvinciaFatt.SelectedValue;

        // carico i comuni della provincia
        oUty.loadDDL(ref ddlCittaFatt, oTabelle.GetDTComuniByIdProvincia(idProvincia), "IdComune", "NomeComune", "", "", "", true);
        ddlCittaFatt.SelectedIndex = -1;
    }

where I'm wrong?

c# asp.net updatepanel updateprogress
Original Q&A
4

There are 4 best solutions below

3
On

For displaying UpdateProgress on every PostBack of your Controls in UpdatePanel:

  • Set UpdateMode of your UpdatePanel to Conditional:

  • Manually trigger AsyncPostBackTrigger to your controls inside UpdatePanel and give the ControlID and EventName that will fire:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
    </ContentTemplate>
        <!-- Some other controls that perform post back -->
    </ContentTemplate>
    <Triggers>   
        <asp:AsyncPostBackTrigger ControlID="ddlStatoFatt" 
            EventName="SelectedIndexChanged" />
     </Triggers>
</asp:UpdatePanel>

  • And can test its working in events using System.Threading.Thread.Sleep(3000);:

    protected void ddlStatoFatt_SelectedIndexChanged(object sender, EventArgs e)
{
  // delay it for testing
  System.Threading.Thread.Sleep(3000);
  Label1.Text = "Page refreshed with DropDownList at " +
    DateTime.Now.ToString();
}

I have tried this at my site and its working:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
    <ContentTemplate>
        <fieldset>
            <legend>UpdatePanel1</legend>
            <asp:Label ID="Label1" runat="server" Text="Panel initially rendered."></asp:Label>
            <br />
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
                OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                <asp:ListItem Value="1">Choose</asp:ListItem>
                <asp:ListItem Value="2">Blue</asp:ListItem>
                <asp:ListItem Value="3">Green</asp:ListItem>
            </asp:DropDownList>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </fieldset>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        Panel2 updating....
    </ProgressTemplate>
</asp:UpdateProgress>

And Code-Behind:

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed with DDL at " +
        DateTime.Now.ToString();
}
0
On

I used code below in my projects and worked properly. I hope it helps you.

<asp:UpdatePanel ID="panelFatt" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:UpdateProgress ID="UpdateProgress1" runat="Server" DisplayAfter="1" AssociatedUpdatePanelID="panelFatt">
            <ProgressTemplate>
                <div style="position: absolute; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
                    <image src="https://i.stack.imgur.com/FhHRx.gif" alternatetext="Loading ..." tooltip="Loading ..." style="padding: 10px; position: absolute; top: 45%; left: 50%;" />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </ContentTemplate>
</asp:UpdatePanel>
0
On

From the Code you provided , everything seems fine but you have missed to add the AsyncPostback trigger in your <asp:updatepanel></asp:updatepanel> : for your case , this can be added:

 <Triggers>   
        <asp:AsyncPostBackTrigger ControlID="ddlStatoFatt" 
            EventName="SelectedIndexChanged" />
     </Triggers>

I have added only on dropdown , to check whether its working or not , if it goes well then you can change the controlID with your updatepannelId.

Another thing you missed in your code is that you need to see the UpdateMode="Conditional" in your update panel

0
On

If you need to show it for fullpostbacks you can use a simple javascript function. Taken from, https://forums.asp.net/t/1101546.aspx?Update+Progress+show+on+Ajax+Full+Postback+Trigger

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="upTest">
    <ProgressTemplate>
        Updating!
    </ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="upTest" ChildrenAsTriggers="False" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnFullPost" Text="Full Post" runat="server" OnClick="btnFullPost_Click" OnClientClick="ShowProgress();"/>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnFullPost" />
    </Triggers>
</asp:UpdatePanel>

<script type="text/javascript">
    function ShowProgress()
    {
        document.getElementById('<% Response.Write(UpdateProgress1.ClientID); %>').style.display = "inline";
    }
</script>

Related Questions in C#

Related Questions in ASP.NET

Related Questions in UPDATEPANEL

Related Questions in UPDATEPROGRESS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.