How to dynamically copy selected ListItems from a ListBox to a DropDownList AND have it display correctly in a Webpage

Question

My problem is the codebehind looks like it works and according to the debugger, it does (no errors or exceptions). Unfortunately it does not actually work on my asp.net webforms webpage, the DropdownList does not actually populate with the selected items of the ListBox. This really should have been simple, but apparently not.

My research said that the Listboxes and DropDownList should be inside of UpdatePanels, and children as triggers needed to be set to true, and with the help of the ScriptManager it would intercept postback requests and do only partial page updates. Nevertheless when that did not work I tried calling the updatepanels.update() method directly and this did not work either.

Here is my C# code.

  protected void GroupList_SelectedIndexChanged(object sender, EventArgs e)
    {
        updategroupEntry();
    }

    protected void updategroupEntry() 
    {
        EnterAGroup.Items.Clear();
        foreach (ListItem li in GroupList.Items)
        {
            if (li.Selected)
            {
                EnterAGroup.Items.Add(li);
            }
        }
        OptionsUpdater.Update();
        OverallUpdater.Update();
    }

In my code I use nested update panels, the overall/surrounding one is shown here, I have also included the closing tags for the one in my second DropdownList. Here is the first code segment.

<asp:UpdatePanel ID="OverallUpdater" UpdateMode="Conditional" runat="server" ChildrenAsTriggers="true">
       <ContentTemplate>

 //irrelevant code omitted

                <asp:Listbox AutoPostback="True" ID="GroupList" runat="server" Width="166px"  SelectionMode="Multiple" OnSelectedIndexChanged="GroupList_SelectedIndexChanged" DataSourceID="GroupSource" DataTextField="GroupName" DataValueField="GroupID">
                </asp:Listbox>
                <asp:SqlDataSource ID="GroupSource" runat="server"
                     ConnectionString="<%$ ConnectionStrings:ACESConnectionString %>" 
                    SelectCommand="SELECT [GroupName], [GroupID] FROM [PrimaryGroup] ORDER BY [GroupName]"></asp:SqlDataSource>

 //more code omitted

              <%--End of Options Panel --%>
                    </asp:Panel>
                </ContentTemplate>
              </asp:UpdatePanel> 

        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="viewapps" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="UpdateButton" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="FilterButton" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>  

In my aspx page I have this code around my DropDownList.

    <asp:UpdatePanel ID="OptionsUpdater" UpdateMode="Conditional" runat="server"  ChildrenAsTriggers="true" ViewStateMode="Enabled"> 
       <ContentTemplate>

  //other code omitted for brevity.

          <asp:TableCell>
             <asp:DropDownList runat="server" ID="EnterAGroup" BackColor="PaleVioletRed" AutoPostBack="true"></asp:DropDownList>
          </asp:TableCell>

 //other code omitted for brevity.

    </ContentTemplate>
 </asp:UpdatePanel> 

So the codebehind says its works, but it just isn't updating on the webpage. How do I get it to work correctly?

I will be glad to give more code upon request. Also, if you need to test the code, I recommend substituting your own SqlDataSource with 2 columns from some table.

Update I have tried Cherian M Paul's idea and its producing strange results where it only half-way works when I select all items from the group but not only a few.

Here is it halfway working when all groups are selected.

Here is an image of it not working when only some are selected.

Update

After further investigation there is a point where there is a disconnect and clicks on the webpage no longer reach the codebehind.

I have a video of this disconnection. basically, at the end no amount of clicks will trigger the events in my codebehind.

https://docs.google.com/file/d/0B12ZVcp_VQ_xR3c0cU1LaXd5Vkk/edit?usp=sharing

Answer 1

foreach (ListItem li in GroupList.Items)
{
    if (li.Selected)
    {
        EnterAGroup.Items.Add(li);
    }
}

The above code will not work because dropdownlist can't have multiple selected items. Please change the code as below, then it will work.

foreach (ListItem li in GroupList.Items)
{
    if (li.Selected)
    {
        EnterAGroup.Items.Add(new ListItem(li.Text, li.Value));
    }
}

Answer 2

I believe that, you need to add the trigger for the second UpdatePanel with ID as OptionsUpdater. Similar to the way you did for the first one.

<asp:AsyncPostBackTrigger ControlID="GroupList" EventName="GroupList_SelectedIndexChanged" />

Please try updating the html. Also there is no partial update, while using update panel also, asp.net actually does all the work , but only a part of the page is updated and user feels like it is doing some thing on back end.

Can I suggest you to achieve these kind of tasks using jQuery.