Question

我有一个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>

我正在尝试触发一个UpdateProgress，我想在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>

这根本不起作用。我在互联网上看到有人将客户端方法与更新面板中的按钮相关联。但我应该为在我的更新面板中发回帖子的所有控件执行此操作。

有没有办法让它发挥作用？

我以这种方式修改了我的代码：

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

但即使不工作..

我的数据在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 = "";
            ...
        }
    }

我的相关事件如下

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

我哪里错了？

Answer 1

在UpdatePanel中的控件的每个PostBack上显示UpdateProgress：

将UpdatePanel的UpdateMode设置为Conditional：

手动触发AsyncPostBackTrigger到UpdatePanel内的控件，并提供将要触发的ControlID和EventName：

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

并且可以使用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();
}

我在我的网站上尝试了这个并且正在运行：

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

代码背后：

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();
}

Answer 2

我在我的项目中使用了以下代码并且正常工作。我希望它可以帮助你。

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

Answer 3

根据您提供的代码，一切似乎都很好，但您错过了在AsyncPostback中添加<asp:updatepanel></asp:updatepanel>触发器：对于您的情况，可以添加：

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

我仅在下拉列表中添加，以检查其是否有效，如果进展顺利，则可以使用controlID更改updatepannelId。

您在代码中遗漏的另一件事是您需要在更新面板中看到UpdateMode="Conditional"

Answer 4

如果需要显示完整回发，可以使用简单的javascript函数。取自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>

UpdateProgress不会在UpdatePanel

4 个答案: