How to select cascading DropDownList with MS SQL database

Question

IDVehicle Make        Model
   0       BMW      5 series
   1       BMW      4 series
   2       AUDI        A4
   3       AUDI        A6
   4       TOYOTA      vios
   5       TOYOTA      RAV4

In the c# designer view, I have 2 drop-down list one which has Make and other for Model.

What I want is that when user picks 'BMW' in Make list, the Model list should have the following 5 series, 4 series

ASPX.CS

Make: <asp:DropDownList ID="<MakeList" runat="server" /><br/>
Model: <asp:DropDownList ID="ModelList" runat="server"/><br />
<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
    ServicePath="CascadingDropdown1.cs.asmx"
    ServiceMethod="GetMake"
    TargetControlID="MakeList" Category="Make"
    PromptText="Select Make"/>

<ajaxToolkit:CascadingDropDown ID="ccd2" runat="server"
    ServicePath="CascadingDropdown1.cs.asmx"
    ServiceMethod="GetModelForMake"
    TargetControlID="ModelList" ParentControlID="MakeList"
    Category="Model"
    PromptText="Select Model"/>

my problem is that I'm so confused about the query and the column name will be used in the .cs.asmx file.

EDIT

Am i Doing wrong in here ?

[WebMethod]
    public CascadingDropDownNameValue[] GetMakes(string knownCategoryValues)
    {
        string query = "SELECT VehicleMake, VehicleMakeId FROM Makes";
        List<CascadingDropDownNameValue> Makes = GetData(query);
        return Makes.ToArray();
    }

    [WebMethod]
    public CascadingDropDownNameValue[] GetModels(string knownCategoryValues)
    {
        string make = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["MakeId"];
        string query = string.Format("SELECT VehicleModel, VehicleModelId FROM Models WHERE MakeId = {0}", make);
        List<CascadingDropDownNameValue> Models = GetData(query);
        return Models.ToArray();
    }

    private List<CascadingDropDownNameValue> GetData(string query)
    {
        string conString = System.Configuration.ConfigurationManager.ConnectionStrings["SERVER=xbetasql,52292;UID=AutoTrakker;Password=trinidad2win;DATABASE=ATDBSQL;"].ConnectionString;
        SqlCommand cmd = new SqlCommand(query);
        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
        using (SqlConnection con = new SqlConnection(conString))
        {
            con.Open();
            cmd.Connection = con;
            using (SqlDataReader reader = cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    values.Add(new CascadingDropDownNameValue
                    {
                        name = reader[0].ToString(),
                        value = reader[1].ToString()
                    });
                }
                reader.Close();
                con.Close();
                return values;
            }
        }
    }

I am having an error. it says [Method Error 500]

UPDATE

Is it ok not to have an ID for each column?

Answer 1

Try something like this:

<asp:DropDownList ID="ddlMake" runat="server" Width="150"></asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="cdlMake" TargetControlID="ddlMake" PromptText="Select Make" PromptValue="" ServicePath="CascadingDropdown1.asmx" ServiceMethod="GetMakes" runat="server" Category="VehicleMakeId" LoadingText="Loading Make..." />

<asp:DropDownList ID="ddlModel" runat="server" Width="150"></asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="cdlModel" TargetControlID="ddlModel" PromptText="Select Model" PromptValue="" ServicePath="CascadingDropdown1.asmx" ServiceMethod="GetModels" runat="server" Category="VehicleModelId" ParentControlID="ddlMake" LoadingText="Loading Model..." />

CascadingDropDown Properties

Below are some important properties of the AJAX CascadingDropDown

• TargetControlID – Here we need to set the ID of the DropDownList control for which you want to make an AJAX Cascading DropDownList.

• ServicePath – Here we set the URL of the Web Service that will act as source of data for the AJAX CascadingDropDown DropDownList.

• ServiceMethod – Here we set the name of the Web Method that will be used to populate the AJAX CascadingDropDown DropDownList.

• PromptText – This property is the Text part that of the first or the default item that will be displayed in the AJAX CascadingDropDown DropDownList.

• PromptValue – This property is the Value part that of the first or the default item that will be displayed in the AJAX CascadingDropDown DropDownList.

• Category – This property is used to specify the Category for the AJAX CascadingDropDown DropDownList, Category value is passed as parameter to the Child or dependent AJAX CascadingDropDown DropDownList ServiceMethod ie Web Method.

• ParentControlID – This property is used to set the ID of the DropDownList on whose selection the DropDownList will trigger the data population process.

• LoadingText– This property used to display the loading text when the call is made to the Web Method until the data is populated in the AJAX CascadingDropDown DropDownList.

And have your WebMethods as follows:

[WebMethod]
public CascadingDropDownNameValue[] GetMakes(string knownCategoryValues)
{
    string query = "SELECT VehicleMakeName, VehicleMakeId FROM Makes";
    List<CascadingDropDownNameValue> Makes = GetData(query);
    return Makes.ToArray();
}

[WebMethod]
public CascadingDropDownNameValue[] GetModels(string knownCategoryValues)
{
    string make = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["MakeId"];
    string query = string.Format("SELECT VehicleModelName, VehicleModelId FROM Models WHERE MakeId = {0}", make);
    List<CascadingDropDownNameValue> Models = GetData(query);
    return Models.ToArray();
}

private List<CascadingDropDownNameValue> GetData(string query)
{
   string conString = ConfigurationManager.ConnectionStrings["ConnectionStr"].ConnectionString;
    SqlCommand cmd = new SqlCommand(query);
    List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
    using (SqlConnection con = new SqlConnection(conString))
    {
        con.Open();
        cmd.Connection = con;
        using (SqlDataReader reader = cmd.ExecuteReader())
        {
            while (reader.Read())
            {
                values.Add(new CascadingDropDownNameValue
                {
                    name = reader[0].ToString(),
                    value = reader[1].ToString()
                });
            }
            reader.Close();
            con.Close();
            return values;
        }
    }
}