Menu
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=" 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=" 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="http://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=" 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=" 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..
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?
567
For displaying UpdateProgress on every PostBack of your Controls in UpdatePanel:
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();
}
For displaying UpdateProgress on every PostBack of your Controls in UpdatePanel:
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();
}
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="http://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>
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
