Question

i have two listbox control withen an asp wizard
that is the code :

<asp:Wizard DisplaySideBar="False" ID="Wizard1" runat="server" ActiveStepIndex="1" BackColor="#F7F6F3" BorderColor="#CCCCCC" 
                                    BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" 
                                    Font-Size="0.8em" OnFinishButtonClick="OnFinishButtonClick"
                                    OnNextButtonClick="savePassword"  >

<HeaderStyle BackColor="#5D7B9D" BorderStyle="Solid" Font-Bold="True" 
    Font-Size="0.9em" ForeColor="White" HorizontalAlign="Left" />
<NavigationButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" 
    BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" 
    ForeColor="#284775" />
<SideBarButtonStyle BorderWidth="0px" Font-Names="Verdana" ForeColor="White" />
<SideBarStyle BackColor="#7C6F57" BorderWidth="0px" Font-Size="0.9em" 
    VerticalAlign="Top" />

<StepNavigationTemplate>
    <asp:Button ID="StepPreviousButton" runat="server" CausesValidation="False" 
        CommandName="MovePrevious" Text="Previous" Width="70px" BackColor="#FFFBFF" BorderColor="#CCCCCC"
        BorderStyle="Solid" Font-Names="Verdana"  ForeColor="#284775" BorderWidth="1px" Font-Size="0.8em"/>
    <asp:Button ID="StepNextButton" runat="server" CommandName="MoveNext" 
        Text="Next" Width="70px" BackColor="#FFFBFF" BorderColor="#CCCCCC"
        BorderStyle="Solid" Font-Names="Verdana"  ForeColor="#284775" BorderWidth="1px" Font-Size="0.8em"  />
</StepNavigationTemplate>    
<StepStyle BorderWidth="0px" ForeColor="#5D7B9D" /> 
<WizardSteps>
    <asp:WizardStep ID="WizardStep1" runat="server" Title="User Data"  
        StepType="Start">
        <%-- some code --%>
    </asp:WizardStep>
    <asp:WizardStep ID="WizardStep2" runat="server" Title="Company Data" 
        StepType="Step">
        **<table>

            <tr>
                <td class="style4">
                    <font face="tahoma" style="font-weight: bold; font-size: 10px;">Categories<div 
                        class="important">
                        *</div>
                    </font>
                </td>
                <td class="style9">
                <asp:ListBox ID="registerCompCats" runat="server" CssClass="ListBox1"
                ClientIDMode="Static" DataTextField="value" DataValueField="key"
                Rows="5" size="5" style="width:135px; size:5px;" SelectionMode="Multiple" ></asp:ListBox>
                    &nbsp;&nbsp;&nbsp;</td>
                <td class="style1">
                    <table>
                        <tr>
                            <td style="padding-left: 20px;">

                                <img id="addCat" 
                        src="images/buttons/btn_addCat.jpg" title="Add Category"  />
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-left: 20px;">
                                <img id="removeCat" 
                        src="images/buttons/btn_removeCat.jpg" title="Remove Category" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                <asp:ListBox ID="registerCompAcats" runat="server" CssClass="ListBox2" 
                ClientIDMode="Static" DataTextField="value" DataValueField="key" ViewStateMode="Enabled"
                Rows="5" size="5" style="width:135px; size:5px; margin-top: 0px;" SelectionMode="Multiple"
                 ></asp:ListBox>
                    &nbsp;<asp:RequiredFieldValidator ID="registerCompAcatsValidator" runat="server" 
                        ControlToValidate="registerCompAcats" Display="None" ErrorMessage="categories required "></asp:RequiredFieldValidator></td>
            </tr>

        </table>**
    </asp:WizardStep>
    <asp:WizardStep ID="WizardStep3" runat="server" Title="Final Data" StepType="Finish">
         <%-- some code --%>
    </asp:WizardStep>
</WizardSteps>

data of first listbox come with page loading , data of second one done by pressing the button in the middle by using java script cod , and that is the code :

$(function () {




//            for (var i = 0; i < x.length; i++) {
//                $(x[i]).keyup(function (event) {
//                    if (event.keyCode == 13) {
//                        $(".SearchBarControlBtn").click();
//                    }
//                });

//            }
$('#addCat').click(function () {
    $(".ListBox1 > option:selected").appendTo(".ListBox2");        
    sortlist(".ListBox1 > option");
    sortlist(".ListBox2 > option");
    selectAll();

});


$('#removeCat').click(function () {
    $(".ListBox2 > option:selected").appendTo(".ListBox1");
    sortlist(".ListBox1 > option");
    sortlist(".ListBox2 > option");
    selectAll();


});

});

that code works well in page and data moved between both listbox
but when i go to page behind code to save content of second listbox i find it empty

where is the problem ??

note : with the same code (HTML , javascript ) but removing step wizard the data in the second listbox appear well

Answer 1

Yes, they will be empty because they are not in the viewstate.
You can do some ajax with postback to add list items in the list.
Then they will be in your listbox.
You can read here for more info:
http://msdn.microsoft.com/en-us/library/ms972976.aspx