AJAX "Conditional" Dropdowns - is this even possible??

[tektipster79]

I've been having a lot of trouble trying to implement cascading dropdowns (select a country, and then a state) with regular asp.net dropdowns. I've posted on a few other message boards and no one seems to know the answer.

When the country dropdown selection changes, I send the selected value to a table adapter which returns the list of states. The state dropdown is not updating though. The right states are returned, I can see that when debugging, but the state dropdown never gets updated. Here's my code:

<asp:UpdatePanel ID="upCountry" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                                <ContentTemplate>
                                    <tr>
                                        <td class="style1">
                                            <asp:Label ID="lblCountry" runat="server" 
                                                AssociatedControlID="ddlCountry">Country:</asp:Label></td>
                                        <td class="style2">
                                            <asp:DropDownList ID="ddlCountry" runat="server" 
                                                AutoPostBack="true" Width="250px"
                                                OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged">
                                            </asp:DropDownList></td>
                                    </tr>
                                    <tr>
                                        <td class="style1">
                                            <asp:Label ID="lblState" runat="server"
                                                AssociatedControlID="ddlState">State/province:</asp:Label></td>
                                        <td class="style2">
                                            <asp:DropDownList ID="ddlState" Width="250px"
                                                runat="server" AutoPostBack="true"></asp:DropDownList></td>
                                    </tr>
                                </ContentTemplate>
                                <Triggers> 
                                    <asp:AsyncPostBackTrigger ControlID="ddlCountry" EventName="SelectedIndexChanged" />
                                </Triggers>
                                </asp:UpdatePanel>

if (!IsPostBack)
        {
            PopulateDropDowns();
        }
        else
        {
            if (ScriptManager.GetCurrent(this).IsInAsyncPostBack)
            {
                if (ScriptManager.GetCurrent(this).AsyncPostBackSourceElementID.ToString() == "ddlCountry")
                {
                    PopulateDropDowns();
                    UpdatePanel upCountry = FindControl(CreateUserWizard1, "upCountry") as UpdatePanel;
                    upCountry.Update();
                }
            }
        }

protected void PopulateDropDowns()
    {
ddlCountry.Items.Insert(0, "");
            foreach (DataRow dr in countries)
            {
                ddlCountry.Items.Add(new ListItem((string)dr["COCD_Name"],
                    dr["COCD_Country_CD"].ToString()));
            }

            ddlCountry.SelectedValue = "USA";

//omitted some adapter code here

if (filteredStates.Rows.Count == 0)
        {
            ddlState.Enabled = false;
        }
        else
        {
            ddlState.Enabled = true;
            ddlState.Items.Clear();
            ddlState.Items.Insert(0, "");
            foreach (DataRow dr in filteredStates)
            {
                ddlState.Items.Add(new ListItem((string)dr["STCD_Descr"],
                    dr["STCD_State_CD"].ToString()));
            }
        }
}

Any ideas?

 

[jmeckley]

<tr>
   <td class="style1">
      <asp:Label ID="lblCountry" runat="server" AssociatedControlID="ddlCountry" Text="Country:" />
   </td>
   <td class="style2">
      <asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" />                                           
   </td>
</tr>
<tr>
   <td class="style1">
      <asp:Label ID="lblState" runat="server" AssociatedControlID="ddlState" Text="State/province:" />
   </td>
   <td class="style2">
      <asp:UpdatePanel ID="upCountry" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
         <ContentTemplate>
            <asp:DropDownList ID="ddlState" runat="server" AutoPostBack="true" />
         </ContentTemplate>
         <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlCountry" EventName="SelectedIndexChanged" />
         </Triggers>
      </asp:UpdatePanel>
   </td>
</tr>

protected void page_load(object sender, eventargs e)
{
   if(!ispostback)
   {
      ddlCountry.DataSource = GetCountries();
      ddlCountry.DataBind();
   }
}

protected void ddlCountry_SelectedIndexChanged(object sender, eventargs e)
{
      ddlCountry.DataSource = GetStatesFor(ddlCountry.SelectedValue);
      ddlCountry.DataBind();
}

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[tektipster79]

This didn't work for me either, the same problem is happening. I still used my code to add list items to the dropdown, but I removed the update panel from the country dropdown and changed the page load code. The same problem is occurring. Did this work for you?

 

[tektipster79]

i found an article that seems to describe my problem, but I don't fully understand it. The key point from the article (

http://couldbedone.blogspot.com/2007/09/conditional-updatepanel-and-event.html)

is:

"So, the conclusion is very simple: "Don't change controls during the async postback that are outside an update panel or are in the update panel which is not updated during this asynchronous postback." Or vice versa: "If you have conditional update panels force them to update their client state if you change controls inside the update panel." "

Can someone help me understand, given this information then, is it possible to do what I am trying to do?

 

[jmeckley]

create a new page and use the code i provided above, if that works refactor your original page to match the new page (using binding instead of adding).

If your still having issues then I would remove all ajax behavor and just get the page working with a full postback model. then apply the updatepanels.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[tektipster79]

Hmm. I removed the update panels, and did the following and it still isn't working:

<tr>
                                        <td class="style1">
                                            <asp:Label ID="lblCountry" runat="server" 
                                                AssociatedControlID="ddlCountry">Country:</asp:Label></td>
                                        <td class="style2">
                                            <asp:DropDownList ID="ddlCountry" runat="server" 
                                                AutoPostBack="true" Width="250px" EnableViewState="true"
                                                OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged">
                                            </asp:DropDownList></td>
                                    </tr>  
                                    <tr>
                                        <td class="style1">
                                            <asp:Label ID="lblState" runat="server"
                                                AssociatedControlID="ddlState">State/province:</asp:Label></td>
                                        <td class="style2">
                                            <asp:DropDownList ID="ddlState" Width="250px"
                                                runat="server"></asp:DropDownList></td>
                                    </tr>

protected void Page_Load(object sender, EventArgs e)
{
        if (!IsPostBack)
        {
            GetCountries();
            DropDownList ddlCountry = FindControl(CreateUserWizard1, "ddlCountry") as DropDownList;
            ddlCountry.SelectedValue = "USA";

            GetStates("USA");
        }
}

protected void GetCountries()
    {
        DropDownList ddlCountry = FindControl(CreateUserWizard1, "ddlCountry") as DropDownList;
        ddlCountry.DataSource = this.sqlCountries;
        ddlCountry.DataTextField = "COCD_Name";
        ddlCountry.DataValueField = "COCD_Country_CD";
        ddlCountry.DataBind();
        ddlCountry.Items.Insert(0, "");
    }

    protected void GetStates(string countryCode)
    {        
        DropDownList ddlCountry = FindControl(CreateUserWizard1, "ddlCountry") as DropDownList;
        DropDownList ddlState = FindControl(CreateUserWizard, "ddlState") as DropDownList;
        this.sqlStates.SelectParameters["Country_CD"].DefaultValue = countryCode;
        ddlState.DataSource = this.sqlStates;
        ddlState.DataTextField = "STCD_Descr";
        ddlState.DataValueField = "STCD_State_CD";
        ddlState.DataBind();
        ddlState.Items.Insert(0, "");
    }

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList ddlCountry = FindControl(CreateUserWizard1, "ddlCountry") as DropDownList;        
        GetStates(ddlCountry.SelectedItem.Value);
    }

 

[tektipster79]

Ugh. I figured it out. In our header, on the master page, there was a google search they made from some older code that had a form tag in it. I removed it and now it works. Thanks for your help!

 

[tektipster79]

Ok I take that back. It works, but the entire page is flashing/updating, not just the update panel.

 

[jmeckley]

flashing/updating? posting back.
have you applied the update panel and appropiate triggers?

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[tektipster79]

When adding a plain update panel (no additional options set or triggers): The entire page posts back but the dropdowns work properly.

When adding an update panel with ChildrenAsTriggers="false" UpdateMode="Conditional" and an async trigger ControlID="ddlCountry" EventName="SelectedIndexChanged" the WEIRDEST thing happens. The entire page does *not* post back, and the state dropdown in the update panel does not update. However, an entire *new* state dropdown appears at the top of the create user wizard with the correct states in it.

 

[tektipster79]

One other question, has anyone ever gotten cascading type dropdowns in a update panel to work properly? I notice online there are a lot of problems so I wondered if anyone really ever got this to work successfully.

 

[jbenson001]

I have not used update panels, but I did get it to work using the ICallBack interface.

 

[tektipster79]

jbenson, thanks for the suggestion, did you use any particular article etc as a starting point?

 

[jbenson001]

Sorry, no .. I'm sure google has plenty. Foturnaly for me, I have good co-worker resources who taught me.