Error when modifying ASP.NET DropDownList with javascript

Question

I'm changing the items in an ASP.NET DropDownList using jquery, but when I submit the form, the SelectedItem property of the DropDownList is null. Any idea how I can modify the list of items in the DropDownList with jquery without causing this error in the code behind?

Here's the way I'm setting up the DropDownList. Initially, it's an empty ASP.NET DropDownList.

var mailType = $("#ContentPlaceHolder1_ddlMailType");

mailType.empty();
mailType.append("<option></option>");
mailType.append("<option value='D'>Direct Mail</option>");
.
.
.

The DropDownList does end up showing the added items after the jquery executes.

score 3 · Accepted Answer · edited May 23 '17 at 12:21

Sorry, you cannot use jquery or Javascript to add items to a server-side ASP.NET web forms list control. The contents of the list control are stored in ViewState, and unless you've done something very strange, your jquery is not updating the ViewState. If you have validation enabled, ASP.NET will throw an error if the form post tag/value does not match any of the known values that are stored in ViewState.

If you wish to have listbox with items that are added dynamically on the client side, don't use a server side control. Just type the HTML into the ASP web form directly (don't use the runat=server tag). To read the contents of the control on postback, don't reference the control; instead, use HttpContext.Request.Form["tag name"]. Note that there is no way for your code behind to know what your jquery has added to the list box, as this information is not passed when the browser posts the form-- only the value attribute of the selected item is passed.

For some more related information, see one of my other answers here.

score 0 · Answer 2 · answered May 01 '15 at 22:54

0

Couple of things you should check. 1) Modify your JavaScript to get the drop down client id dynamically. The client id changes with every post back event.

var mailType = $("<%= ddlMailType.ClientID %>");

mailType.empty();
mailType.append("<option></option>");
mailType.append("<option value='D'>Direct Mail</option>");

Also, 2) If you are binding the original values of the drop down list in code behind make sure you are handling the post back event. Otherwise the drop down will reset to its original value each time there is a post back.

 If Not Page.IsPostBack Then
      ddlMailType.databind()
 End If

answered May 01 '15 at 22:54

MAlvarez

86
5

I tried using the ClientID (as the other poster suggested) with no difference in behavior. Also, no data binding is occurring in the code behind. – birdus May 01 '15 at 22:56
Are you using an AJAX update panel? If so turn off Ajax and see what happens. – MAlvarez May 01 '15 at 23:01

score 0 · Answer 3 · edited May 23 '17 at 11:51

your control is declared with no items in the aspx. since nothing is added to the items collection that way and no adding to items is done in page_init or page_load (when IsPostback = false) when a postback occurs to check SelectedItem, the items property of your DropDownList is empty.

you can still get the value from the forms collection Request.Form[MyDDL.UniqueID]

more in depth here. Why does DropDownList.SelectedValue is relied on viewstate?

Error when modifying ASP.NET DropDownList with javascript

3 Answers3

Linked