asp:DropDownList - invalid postback or callback argument when adding options via JavaScript/jQuery

Question

I have two dropdown lists:

<asp:DropDownList ID="Field_Type" runat="server" />
<asp:DropDownList ID="Field_SubType" runat="server" />

Field_Type is databound, with a list of types, populated from a database. Field_SubType is set via jQuery / AJAX when Field_Type is changed. I then add an option using $("#<%# Field_SubType.ClientID %>").append("<option value=\"1\">Test</option>");. This works as expected (I see the new subtype added).

However, when posting back after selecting the option that has been added I get an error:

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.

What could be the cause of this, and how could I work round it? A few ideas I have:

1. Use a plain <select> and use Request.Form - could be a problem if it is in a user control used multiple times on a page
2. Populate Field_SubType with all sub types, filtering out those that aren't a sub type of Field_Type - this will load more data than required, which will add to page load time

Any other options?

Answer 1

The cause of it is that by default, ASP.NET verifies that the submitted values in each form field are the ones it sent to the page originally. Here is an example:

We have a DropDownList with 3 options - A, B, and C. ASP.NET knows about those because we added them from ASP.NET code. In JavaScript, we add a fourth option, D. ASP.NET does not know about that one because it happened on the client side. When we go to submit the page, if D is selected, ASP.NET says "D is not one of the choices I gave you. You may be maliciously trying to manipulate the post values in the request." It protects the system and the developer by aborting the request right there.

You could just turn off page validation - on the page in question, as the error message suggests, or for all pages at the web.config level:

<system.web>
   <pages enableEventValidation="false"/>
</system.web>

Event validation is not always necessary if you write your code in such a way that you never take explicit action directly based on the values submitted to you in the form (which you should never really do anyway). Unexpected or out-of-range values from the user should be ignored or cause you to do nothing. As long as you write your code that way, you can safely turn off event validation.