Search code examples
c#asp.netwebformsajaxcontroltoolkitmodalpopupextender

Set value in Parent Page from Modal Popup Extender

I am testing the ModalPopupExtender in a simple web application. The user should input a value in the modalpopup and then this value would be shown in the parent page after closing the modal popup.

I used this code for the design:

<body>
    <form id="form1" runat="server">
      <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Button runat="server" ID="BtnOpenPopup" Text="Open Popup" />
        <asp:Label runat="server" ID="lbl" ></asp:Label>
        <asp:Panel runat="server" ID="PnlTest">
           <asp:TextBox runat="server" ID="txtInput"></asp:TextBox>             
           <asp:Button runat="server" ID="BtnSubmit" Text="Submit" OnClick="BtnSubmit_Click" />
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender runat="server" TargetControlID="BtnOpenPopup" EnableViewState="true" OkControlID="BtnSubmit" PopupControlID="PnlTest" ></ajaxToolkit:ModalPopupExtender>
      </div>
    </form>
</body>
</html>

And this is my code behind: 

 protected void BtnSubmit_Click(object sender, EventArgs e)
 {
    lbl.Text = txtInput.Text;
 }

This didn't work, I don't get any errors, but still the lbl isn't loaded with the user input.

Would appreciate if you can give me some insight on how this works.

Solution

  • Hello I guess that you have to add a script for the OnOkScript attribute, try this :

       //......
   //.......

   <ajaxToolkit:ModalPopupExtender runat="server" 
        TargetControlID="BtnOpenPopup" 
        EnableViewState="true" 
        OkControlID="BtnSubmit" 
        PopupControlID="PnlTest" 
        OnOkScript="onModalOk();"> <!-- here is the tag you have to add to get it work -->

    </ajaxToolkit:ModalPopupExtender>
  </div>
</form>
<script>
    function onModalOk()
    {
        document.getElementById("lbl").innerText = document.getElementById('txtInput').value;
    }
</script>