DropDownList items are reset on SelectedIndexChanged

Question

I have a cascading dropdown list on my page. The first dropdown contains a list of events. The second dropdown contains a list of attendees. When an event is selected, an AJAX call is made to get the list of attendees for that event, and populate the second dropdown.

My problem is that for the attendees dropdown, I want the user to be redirected to a URL on the SelectedIndexChanged event, with the selected value in the query string. But on the SelectedIndexChanged event, all the items in the second dropdown are reset. Here's my code:

<script type="text/javascript" language="javascript">      

    $(document).ready(function()
    {
        $('#<%= ddlEvents.ClientID %>').change(function() 
        {
           $.ajax({
               type: "POST",
               url: 'Default.aspx/PopulateAttendees',
               data: '{EventId: ' + $('#<%= ddlEvents.ClientID %>').val() + '}',
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: OnAttendeesPopulated
           });
        });


        function OnAttendeesPopulated(response)
        {
            var attendees = response.d;
            var attendeesDropdown = $("#<%= ddlAttendees.ClientID %>");

            attendeesDropdown.removeAttr("disabled");
            $.each(attendees, function()
            {
                attendeesDropdown.append($("<option</option>").val(this['Value']).html(this['Text']));
            });
        }
    });

</script>

<asp:DropDownList ID="ddlEvents" runat="server"></asp:DropDownList>
<br /><br />
<asp:DropDownList ID="ddlAttendees" runat="server" Enabled="false" onselectedindexchanged="ddlAttendees_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>

And in my code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //Bind dropdown to Events
        ddlEvents.DataSource = EventsList();
        ddlEvents.DataTextField = "Name";
        ddlEvents.DataValueField = "EventID";
        ddlEvents.DataBind();
    }
}


[System.Web.Services.WebMethod]
public static ArrayList PopulateAttendees(int EventId)
{
    ArrayList attendees = new ArrayList();
    attendees = GetAttendees(EventId);

    return attendees;
}


protected void ddlAttendees_SelectedIndexChanged(object sender, EventArgs e)
{
    string AttendeeId = ddlAttendees.SelectedValue;

    Response.Redirect("http://mysite.com?id=" + AttendeeId);
}

When the SelectedIndexChanged event is hit, ddlAttendees is empty.

Does anyone know how I can keep the items in ddlAttendees?

Answer 1

I'd be tempted to include a client-side index changed event which writes the attendee ID to a hidden field before posting back. Then access this field from the codebehind. I think the ddl is losing state because it is populated client-side (I know these two statements sound contradictory!). But I think the hidden field will be persisted much more reliably than the ddl.

Answer 2

The thing is, when you do an ajax call in order to update the dom it isn't actually updating it in the sense of the page knowing if its there, since its rendered After the dom was loaded the client sees the changes but the page doesn't know that changes has been made.