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

Question

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 control 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");
        });

    });

Sagar Vaishnav · Accepted Answer · 2011-04-07 05:32:05Z

1

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

answered Apr 7, 2011 at 5:32

Sagar Vaishnav

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Tim Schmelter · Accepted Answer · 2011-02-04 23:32:15Z

0

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);
}

edited Feb 4, 2011 at 23:32

answered Feb 4, 2011 at 23:14

Tim Schmelter

462k79 gold badges721 silver badges981 bronze badges

1 Comment

PCasagrande Over a year ago

I tried this method and it did not work for me. I looped over all of the ListItems in the first ListBox, registering their values with the second box. I verified that the code ran as well. However I always hit the error message when anything was selected when it was submitted.

Abbas · Accepted Answer · 2011-02-04 22:47:11Z

0

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.

answered Feb 4, 2011 at 22:47

Abbas

3,2581 gold badge25 silver badges27 bronze badges

2 Comments

kev Over a year ago

thanks for the suggestion. I see what you mean. I still wonder if theres a neat & clean way to do this?

PCasagrande Over a year ago

I used this technique on a site but I encountered this error still. If an ListItem was selected in the ListBox they were moved to when the page was submitted I still received the error. I solved it by writing a jQuery function to set the value of the ListBox to "" onClientClick, thereby un-selecting everything.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related