Can't set ModalPopupExtender control values using UpdatePanel in ASP.NET

Question

Working with asp.net, I have a gridview inside an update panel, populated with dynamic user controls (loaded in placeholder1 on rowdatabound). A user enters text in a textbox of the user control, clicks the "confirm" button of the user control, a modal popup displays a "confirmation" message with the user's value of the text box. The button click event of the user control handles setting the modal popup extender control values and shows the popup.

This works as expected when the gridview is not in an update panel/no update panel is used. Once I place the gridview in an update panel, when the modal popup appears, it doesn't show the values that were set in the button click event (I've confirmed the click event is firing, controls are being found, and values are getting set in the event). I must be missing something...and/or don't quite understand the architecture of the update panel and how it behaves with dynamic controls.

[code below has been simplified]

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>

MODAL POPUP

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

USER CONTROL CODE BEHIND

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

I suppose I could offload much of this client side. I am doing some validation of input against a database, and using this method for different user controls performing different functions on the page, but performing this client side would lead to faster loads and a better ux. — user2175152

Pip Danby Pip Danby · Accepted Answer · 2014-12-22T10:33:08

I only came across this question recently, a year after it was asked and am posting a solution in case any one else has the same problem.

The answer is to put the the ModalPopupExtender panel "pnlShow" inside an update panel with an AsycPostBackTrigger added whose ID is btnShowConfirmation.

If btnShowConfirmation is dynamically added it should be added to the UpdatePanel dynamically.

The attached example shows two buttons which raise the modal popup. The trigger reference to btnX is added in the aspx code,the btnY triger is added dynamically as an example.

[Aspx code]

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

[Code behind]

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

Can't set ModalPopupExtender control values using UpdatePanel in ASP.NET

1 Answers