locked
Modal Popup postback losing listbox selected items RRS feed

  • Question

  • User-1693422690 posted

    Modal Popup postback is working as I am able to step into the method raised by button, and am able to see the text in the label on the modal popup but there are not any items selected available even though some have been selected on the form. The listbox is not reloading the items as I have a break point set on the command that loads the listbox and it is not getting hit except for the initial load of items. I added only the essential code from the samples into a new VS2015 test project that I created and the listbox postback works, but when I copy the code to an existing ASPX page, it fails.

    Tuesday, July 25, 2017 2:56 PM

Answers

  • User-1693422690 posted

    I believe that the issue may be with the dynamically created controls on the complex web page, one of which contains the popup window.

    For some reason, the textbox and hidden fields retain their values in the code behind, but the listbox does not during the postback.

    Rather than continue to troubleshoot this issue, I came up with a workaround.

    I am now extracting the selected values from the listbox in client side javascript, and adding them to a hidden field during the OnClientCLick event.

    I am then able to read the values in the hidden field in the code behind during the OnClick event, and use them to complete the required task.

    Thank you very much for your continued support on this difficult issue.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 2, 2017 2:03 PM

All replies

  • User-707554951 posted

    Hi mschelstrate,

    Are you perhaps rebinding the listbox each time, instead of if(!IsPostback)?

    The work simple as below:

    https://www.aspsnippets.com/Articles/Using-ASPNet-AJAX-ModalPopupExtender-Modal-Popup-with-UpdatePanel-in-C-and-VBNet.aspx

    If you still problem, would you please provide the related code about your problem so that we could reproduce your problem and find solution as soon as possible

    Best regards

    Cathy

    Wednesday, July 26, 2017 8:03 AM
  • User-1693422690 posted

    The problem is that the listbox does not have a data source (it is null) when it posts back so there are no values or items available. Here is the code:

    <div id="ticket-add-buttons">
    <asp:Button id="btnAdd" text="Add Comment" onclick="AddComment" runat="Server" />
    <asp:Button id="btnClearSelection" text="Clear User Selection" onclick="btnClearSelectionClick" runat="Server" />
    <asp:CheckBox id="chkAttachAllcomments" Checked="false" Text="Attach All Comments" runat="Server" />
    <br>Select Project Group to filter CC User List:
    <asp:DropDownList id="dropProjectGroups" AutoPostBack="true" onselectedindexchanged="ProjectGroupsSelectedIndexChanged" runat="Server" />
    <asp:HiddenField ID="hiddenCCListProjectGroupID" runat="server" />
    <asp:Button ID="ClientButton" runat="server" style="display:none" />
    <asp:Button ID="ServerButton" runat="server" Text="CC User List Popup" OnClick="ServerButton_OnClick" />
    <cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton" PopupControlID="ModalPanel" />
    </div>

    <div>
    <asp:Panel ID="ModalPanel" runat="server" BorderWidth="3" BorderStyle="Solid" BorderColor="Gray" BackColor="White" Width="300px" Height="500px" >
    <asp:Label ID="lblModalPopup" runat="server" Text="Select Users from CC User List (All) below"></asp:Label>
    <br/>
    <asp:ListBox SelectionMode="Multiple" id="listUsersPopup" height="440px" width="100%" Runat="Server" />
    <br/><br/>
    <asp:Button ID="buttonSave" runat="server" Text="Save" OnClick="buttonSave_OnClick"/>
    &nbsp;&nbsp;&nbsp;
    <asp:Button ID="OKButton" runat="server" Text="Close" />
    <br/><br/>
    </asp:Panel>
    </div>

            protected void ServerButton_OnClick(object sender, EventArgs e)
            {
                popupDataSource = new ITUserCollection();
                popupDataSource = ITUser.GetAllUsers();
                listUsersPopup.DataSource = popupDataSource;
                listUsersPopup.DataTextField = "DisplayName";
                listUsersPopup.DataValueField = "Id";
                listUsersPopup.DataBind();
    
                ClientScriptManager clientScript = Page.ClientScript;
                clientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
                //ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(listUsersPopup);
            }
            protected void buttonSave_OnClick(object sender, EventArgs e)
            {
                string labelText = lblModalPopup.Text;
                //Get Selected Users from Popup List
                ArrayList arrListValues = new ArrayList();
                foreach (ListItem item in listUsersPopup.Items)
                {
                    if (item.Selected)
                        arrListValues.Add(Int32.Parse(item.Value));
                }
    
            }

    Wednesday, July 26, 2017 3:09 PM
  • User-1693422690 posted

    Further investigation has uncovered the fact that this Modal Popup is inside a dynamically generated user control, which seems to be the root cause of the problem.

    How do I persist and save listbox items in this situation?

    Thursday, July 27, 2017 9:30 PM
  • User-707554951 posted

    Hi mschelstrate

    I checked your code, you bind listbox in ServerButton_OnClick event, so, it is need to click this button before click 'ClientButton'.

    Otherwise, the listbox will display none:

    <style type="text/css">
            .modalBackground {
                background-color: Black;
    filter: alpha(opacity=90);
    opacity: 0.8;
            }      
    </style>
    
     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:Button ID="ServerButton" runat="server" Text="CC User List Popup" OnClick="ServerButton_Click" />
                <asp:Button ID="ClientButton" runat="server" Text="Show Modal Popup" />
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="ClientButton" PopupControlID="ModalPanel" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>
                <asp:Panel ID="ModalPanel" runat="server" BorderWidth="3" BorderStyle="Solid" BorderColor="Gray" BackColor="White" Width="300px" Height="500px">
                    <asp:Label ID="lblModalPopup" runat="server" Text="Select Users from CC User List (All) below"></asp:Label>
                    <br />
                    <asp:ListBox SelectionMode="Multiple" ID="listUsersPopup" Height="440px" Width="100%" runat="Server" />
                    <br />
                    <br />
                    <asp:Button ID="buttonSave" runat="server" Text="Save" OnClick="buttonSave_Click1" />
                    &nbsp;&nbsp;&nbsp;
                    <asp:Button ID="OKButton" runat="server" Text="Close" />
                    <br />
                    <br />
                </asp:Panel>

    Codebehind:

     protected void ServerButton_Click(object sender, EventArgs e)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id"), new DataColumn("DisplayName") });
                dt.Rows.Add(1, "DisplayName1");
                dt.Rows.Add(2, "DisplayName2");
                dt.Rows.Add(3, "DisplayName3");
                listUsersPopup.DataSource = dt;
                listUsersPopup.DataTextField = "DisplayName";
                listUsersPopup.DataValueField = "Id";
                listUsersPopup.DataBind();
    
            }
            protected void buttonSave_Click1(object sender, EventArgs e)
            {
                string labelText = lblModalPopup.Text;
                Response.Write(labelText);
                Response.Write(" <br />");
                //Get Selected Users from Popup List
                ArrayList arrListValues = new ArrayList();
                foreach (ListItem item in listUsersPopup.Items)
                {
                    if (item.Selected)
                        arrListValues.Add(Int32.Parse(item.Value));
                }
                foreach (var item in arrListValues)
                {
                    Response.Write(item);
                }
                
            }

    Output:

    Best regards

    Cathy

    Friday, July 28, 2017 5:59 AM
  • User-1693422690 posted

    Thanks for answering and helping with my problem. I really appreciate your assistance!. I do not use the client button at all, the only reason I added it was because the modal popup requires a TargetControlId even if the code behind was loading the listbox and registering the startup script to display the popup, and I read online that the best way to do this was to add a client button with the style=display:none so the client button is not even displayed on the page. Let me know if there is a better way to do this please.

    The listbox is populating correctly with my current code, the problem is that when the postback happens, there are not items in the listbox any longer so I am unable to extract the selected items. I think the reason this is happening is because the listbox is initializing during the postback process before I am able to retrieve the selected items. I need to figure out how to access the listbox before it is reinitialized.

    Friday, July 28, 2017 2:44 PM
  • User-707554951 posted

    Hi  mschelstrate

    From the information you provided already. I couldn’t reproduce you problem.

    Would you please provide more code and clear description which will be helpful for me to reproduce your problem and find solution easily.

    Best regards

    Cathy

    Wednesday, August 2, 2017 2:59 AM
  • User-1693422690 posted

    I believe that the issue may be with the dynamically created controls on the complex web page, one of which contains the popup window.

    For some reason, the textbox and hidden fields retain their values in the code behind, but the listbox does not during the postback.

    Rather than continue to troubleshoot this issue, I came up with a workaround.

    I am now extracting the selected values from the listbox in client side javascript, and adding them to a hidden field during the OnClientCLick event.

    I am then able to read the values in the hidden field in the code behind during the OnClick event, and use them to complete the required task.

    Thank you very much for your continued support on this difficult issue.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 2, 2017 2:03 PM