best way to move items between ListBoxes in ASP.NET using javascript, then access results on server side

I am having a lot of trouble with a seemingly simple thing. In an ASP.NET webform I have two ListBoxes, with Add and Remove buttons in between. The user can select items in one ListBox and using the buttons, swap them around.

I do this on the clientside using javascript.

I then also have a SAVE button, which I want to process on the server side when the user is happy with their list.

Problems : First I was getting the following problem when I clicked SAVE :

*

Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server c开发者_高级运维ontrol that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

*

I read that one of the methods to get around this was to put my ListBoxes into an UpdatePanel, which I did, and I am getting further.

However, now the event handler for the button's Click event is not being run if the user has used the clientside javascript to alter the contents of the Listboxes. If the user has not altered the contents of the listboxes, the handler does execute.

What is happening?

Is my approach basically flawed and there might be a much better approach to this problem?

thanks for any help!

Here's the ASPX code :

    <table>
        <tr>
            <td>
                <asp:ListBox ID="fromListBox" runat="server" SelectionMode="Multiple" Rows="8" AutoPostBack="false" 
                    DataSourceID="SqlDataSource1" DataTextField="FullName" DataValueField="UserId" CssClass="teamListBox">
                </asp:ListBox>

            </td>

            <td> 
                <input id="btnAdd" type="button" value="Add >" /><br/>
                <br/>
                <input id="btnRemove" type="button" value="< Remove" /><br/>
                <br/>
            </td>

            <td>
                <asp:ListBox ID="toListBox" runat="server" SelectionMode="Multiple" Rows="8" AutoPostBack="false"
                    CssClass="teamListBox" DataSourceID="SqlDataSource2" DataTextField="FullName" 
                    DataValueField="UserId" >
                </asp:ListBox>  
            </td>
        </tr>
    </table>

Heres the javascript, using jquery....this works fine so is not really the problem :

    $(document).ready(function () {

        $("#btnAdd").click(function () {
            $("#fromListBox option:selected").appendTo("#toListBox");
        });

        $("#btnRemove").click(function () {
            $("#toListBox option:selected").appendTo("#fromListBox");
        });

    });

Just Go to your web config file in your application and Add enableEventValidation="false" in pages section.

The clean way would to be to use ClientScriptManager.RegisterForEventValidation Method.

Have also a look here.

You have to register the server control ID with all the possible values that can be posted by JavaScript by that control in Render Event of the page, for exampe:

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
   ClientScript.RegisterForEventValidation("fromListBox", "English");
   ClientScript.RegisterForEventValidation("fromListBox", "Tamil");
   ClientScript.RegisterForEventValidation("fromListBox", "Hindi");
   ClientScript.RegisterForEventValidation("toListBox", "English");
   ClientScript.RegisterForEventValidation("toListBox", "Tamil");
   ClientScript.RegisterForEventValidation("toListBox", "Hindi");
   base.Render(writer);
}

I think I had the same problem a while ago. I solved it by assigning the values of my listbox to a hidden text field and submitting the page all using javascript. On the server side, I read the value of that hiddent textfield and parsed it. It was an ugly client/server code, but it worked for me.