CODEWITHSUNDEEP
c#jquery
Trey Copeland
Trey Copeland

Reputation: 3527

Cascading dropdowns for C# ASP.NET

I'm trying to create some cascading drop downs. I have my States loading via C# page load fine. I just can't seem to get anything to fire off to load the cities. After the cities, I'll be adding another drop down, but I can figure that out once I have this working.

I did notice "Default.aspx/LoadCitiesByState 500 (Internal Server Error)" in my Chrome errors.

C#

    protected void LoadStates()
{
    // Populate State dropdown box
    ListItem li = new ListItem();
    li.Value = "0";
    li.Text = "Select One";

    DataSet dsState = SharedData.GetStates();
    ddlState.DataSource = dsState.Tables[0].DefaultView;
    ddlState.DataValueField = "ab";
    ddlState.DataTextField = "name";
    ddlState.DataBind();
    ddlState.Items.Insert(0, li);
}


[WebMethod]
protected void LoadCitiesByState(string state)
{
    ListItem li = new ListItem();
    li.Value = "0";
    li.Text = "Select One";

    DataTable dt = new DataTable();
    dt = SharedData.GetCities(state);
    ddlCity.DataSource = dt.Rows[0].Table.DefaultView;
    ddlCity.DataValueField = "ListCity";
    ddlCity.DataTextField = "ListCity";
    ddlCity.DataBind();
    ddlCity.Items.Insert(0, li);
}

Markup

<asp:DropDownList ID="state" runat="server" MaxLength="50" Style="width: 200px;" />

<asp:DropDownList ID="city" runat="server" MaxLength="50" Style="width: 200px;" /> 



function loadCities(selectedItem) {
            $.ajax({
                type: "POST",
                url: "Default.aspx/LoadCitiesByState",
                data: "selectedItem",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function Success(data) {
                    alert(selectedItem);
                }
            });

Upvotes: 2

Views: 2223

Answers (3)

Vinay
Vinay

Reputation: 1064

I see you haven't set autopostback to true in asp:DropDownList.

Upvotes: 0

Murph
Murph

Reputation: 10190

Whilst this is most easily done using postbacks it shouldn't be particularly complex to do entirely client side and one really doesn't want to get into update panels which work... just not well.

The problem has to be this:

 data: "selectedItem",

I'm not entirely sure what the right incantation is, but I'm fairly certain that ain't it.

This article looks helpful:

http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET

Upvotes: 0

Servy
Servy

Reputation: 203821

Personally I find that cascading drop downs are best handled via server side code, not through javascript (when dealing with ASP.NET).

The basic model would be autoPostBack = true for the state, and an on selected index changed handler that then alters the items in Cities.

If you don't want a full page refresh (I don't blame you at all for this) then just wrap the two drop downs in an UpdatePanel and voila, all of the AJAX requests etc. get taken care of for you.

Yes, it doesn't perform quite as well as if you roll your own as you're doing here, but it's much quicker/easier/safer, and it's usually good enough (if you use an UpdatePanel).

Upvotes: 1

Related Questions