无法在 ASP.NET 中使用 UpdatePanel 设置 ModalPopupExtender 控件值

Question

使用 asp.net，我在更新面板中有一个 gridview，填充了动态用户控件（加载在 rowdatabound 上的 placeholder1 中）。用户在用户控件的文本框中输入文本，单击用户控件的“确认”按钮，模式弹出窗口显示“确认”消息，其中包含用户对文本框的值。用户控件的按钮单击事件处理设置模式弹出扩展器控件值并显示弹出窗口。

当 gridview 不在更新面板中/不使用更新面板时，这将按预期工作。一旦我将 gridview 放在更新面板中，当模式弹出窗口出现时，它不会显示在按钮单击事件中设置的值（我已经确认单击事件正在触发，正在找到控件，并且值是在事件中设置）。我一定遗漏了什么……和/或不太了解更新面板的架构以及它在动态控件中的行为方式。

[下面的代码已被简化]

网格视图

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gvSaleData" runat="server" DataKeyNames="ItemNumber"
 AutoGenerateColumns="False" ShowFooter="True" />
<Columns>
  <asp:TemplateField ShowHeader="false">
     <ItemTemplate>
         <div>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>     
       </div>
     </ItemTemplate>
  </asp:TemplateField>    
  </Columns>
  </asp:GridView>
 </ContentTemplate> 
 </asp:UpdatePanel>  

模式弹出窗口

<asp:modalpopupextender id="mp1" runat="server" 
        cancelcontrolid="btnCancel"
        targetcontrolid="btnShow" popupcontrolid="pnlShow"
        popupdraghandlecontrolid="PopupHeader" drag="true" 
        backgroundcssclass="ModalPopupBG">
</asp:modalpopupextender>
<asp:panel id="pnlShow"  style="display:none" runat="server">
<div class="popupcontainer">
        <div>Your Value: <asp:Label ID="lblUserValue" runat="server" Text=""></asp:Label></div>
<asp:Button ID="btnConfirm" runat="server" Text="Confirm" 
            onclick="btnConfirm_Click" CssClass="submit"/>
 <asp:Button ID="btnCancel" runat="server" Text="Return" 
            onclick="btnCancel_Click" CssClass="submit"/>
</div>   
</asp:panel>

隐藏的用户控制代码

protected void btnShowConfirmation_Click(object sender, EventArgs e)
{
AjaxControlToolkit.ModalPopupExtender mp =(AjaxControlToolkit.ModalPopupExtender)Page.FindControl("mp1");
Label lblUserValue = (Label)mp.FindControl("lblUserValue");
lblUserValue.Text = textbox1.Text;
mp.Show();
}

Answer 1

我最近才遇到这个问题，在被问到一年后，我发布了一个解决方案，以防其他人遇到同样的问题。

答案是将 ModalPopupExtender 面板“pnlShow”放在一个更新面板中，并添加一个 ID 为 btnShowConfirmation 的 AsycPostBackTrigger。

如果 btnShowConfirmation 是动态添加的，它应该被动态添加到 UpdatePanel 中。

附加的示例显示了两个按钮，它们会弹出模式弹出窗口。在aspx代码中添加了对btnX的触发器引用，以动态添加btnY触发器为例。

[aspx代码]

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestModalPopup.aspx.vb"
  Inherits="USSGAinfo.TestModalPopup" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
   <style type="text/css">
    .modalPopupX
    {
      background-color: #DDFFDD;
      border-width: 2px;
      border-style: solid;
      border-color: black;
      padding-top: 20px;
      padding-left: 10px;
      width: 400px;
      height: 150px;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  </ajaxToolkit:ToolkitScriptManager>
  <!-- Hidden Field -->
  <asp:UpdatePanel runat="server" ID="up1" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="OkButton" />
    </Triggers>
    <ContentTemplate>
      <asp:Button runat="server" ID="btnX" Text="X" />
      <asp:Button runat="server" ID="btnY" Text="Y" /><br />
      <asp:Label runat="server">Confirm:</asp:Label><asp:Label runat="server" ID="lblResult"></asp:Label>
     </ContentTemplate>
  </asp:UpdatePanel>

  <asp:HiddenField ID="hidForModal" runat="server" />
  <ajaxToolkit:ModalPopupExtender ID="MPE" runat="server" TargetControlID="hidForModal"
    PopupControlID="pnlTarget" BackgroundCssClass="modalBackground" PopupDragHandleControlID="pnlTarget">
    </ajaxToolkit:ModalPopupExtender>

  <asp:Panel ID="pnlTarget" Style="display: none" runat="server">
  <asp:UpdatePanel runat="server" ID="up2" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnX" />
     <%-- <asp:AsyncPostBackTrigger ControlID="btnY" />--%>
    </Triggers>
    <ContentTemplate>  <asp:Panel runat="server" ID="Panel1" HorizontalAlign="Center" DefaultButton="OkButton"
      CssClass="modalPopupX">
      <asp:Table runat="server">
        <asp:TableRow runat="server">
          <asp:TableCell runat="server" ID="tcResult" HorizontalAlign="Center" Width="400px" Height="20px" BackColor="AntiqueWhite">Button Clicked:
          <asp:label runat="server" ID="lblMPEResult"></asp:label>
          </asp:TableCell>
        </asp:TableRow>
      </asp:Table>
      <br />
      <asp:Button ID="OkButton" runat="server" Text="Yes" />&nbsp;
      <asp:Button ID="CancelButton" runat="server" Text="No" />
    </asp:Panel>
   </ContentTemplate>
  </asp:UpdatePanel>
  </asp:Panel> 
  </form>
</body>
</html>

[代码隐藏]

Public Class TestModalPopup
    Inherits System.Web.UI.Page

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' Add btnY as trigger for ModalPopoup update panel
    Dim trigger As New AsyncPostBackTrigger
    trigger.ControlID = "btnY"
    trigger.EventName = "Click"
    up2.Triggers.Add(trigger)
  End Sub

  Private Sub btnX_Click(sender As Object, e As System.EventArgs) Handles btnX.Click
    ' Put button dependent info into ModalPopup and then show
    lblMPEResult.Text = "XXX"
    MPE.Show()
  End Sub

  Private Sub btnY_Click(sender As Object, e As System.EventArgs) Handles btnY.Click
    ' Put button dependent info into ModalPopup and then show
    lblMPEResult.Text = "YYY"
    MPE.Show()
  End Sub

  Private Sub OkButton_Click(sender As Object, e As System.EventArgs) Handles OkButton.Click
    ' Show that OK button was pressed and also information derived from the ModalPopup
    lblResult.Text = lblMPEResult.Text
    MPE.Hide()
  End Sub

  Private Sub CancelButton_Click(sender As Object, e As System.EventArgs) Handles CancelButton.Click
    MPE.Hide()
  End Sub
End Class