Ajax CascadingDropDown using webservice

Ajax CascadingDropDown

Today will see how to use Ajax Cascading DropDown in asp.net

1 step: Add ajaxcontol tool kit in your visual studio toolbox  .Here my scenario is, there will be three drop down CATEGORY,SUBCATEGORY,PRODUCT .

FOR this we have three tables in database

2 step: Drag n Drop Three asp DropDownList and ajax CascadingDropDown and SCRIPTMANAGER.

  

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager>

   

   <div>

          ProductCategory

        <asp:DropDownList  ID="DDlcategory" runat="server">

        </asp:DropDownList>

  <asp:CascadingDropDown ID="CascadingDropDown1" TargetControlID="DDlcategory" Category="ProductCategory"   PromptText="Select ProductCategory" LoadingText="Loading ProductCategory.." ServiceMethod="BindCategoryDetails" ServicePath="~/CascadingDropdown.asmx"  runat="server">

          </asp:CascadingDropDown>

          <br />

          <br />

          ProductSubCategory&nbsp;&nbsp;&nbsp; 

         <asp:DropDownList  ID="DDlsubcategory" runat="server">

         </asp:DropDownList>

          <br />

          <br />

          Product&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

          <asp:CascadingDropDown ID="CascadingDropDown2" TargetControlID="DDlsubcategory"  Category="Productsubcategory" ParentControlID="DDlcategory"  PromptText="Select Productsubcategory" LoadingText="Loading subcategory.." ServiceMethod="BindProductSubCategory" ServicePath="~/CascadingDropdown.asmx"  runat="server">

          </asp:CascadingDropDown>

        <asp:DropDownList ID="DDlproduct" runat="server">

        </asp:DropDownList>

        <asp:CascadingDropDown ID="CascadingDropDown3" TargetControlID="DDlproduct"  Category="Product" ParentControlID="DDlsubcategory"  PromptText="Select Product" LoadingText="Loading product.." ServiceMethod="BindProduct" ServicePath="~/CascadingDropdown.asmx"  runat="server">

          </asp:CascadingDropDown>

    </div>

3 step : Now add webservices in .cs file

             here we have to write 3 web method in web services. Please note you can change method    name reset of all will be same.

1) for Category

  [WebMethod]

 public CascadingDropDownNameValue[] BindCategoryDetails(string knownCategoryValues, string category)

    {

        

        SqlDataAdapter daCat = new SqlDataAdapter("select * from Tbl_ProductCategory", con);

        DataSet dsCat = new DataSet();

        daCat.Fill(dsCat);

    

        //create list and add items in it by looping through dataset table

        List<CascadingDropDownNameValue> catdetails = new List<CascadingDropDownNameValue>();

        foreach (DataRow dtrow in dsCat.Tables[0].Rows)

        {

            string ProdCategoryID = dtrow["ProdCategoryID"].ToString();

            string ProductCategoryName = dtrow["ProductCategoryName"].ToString();

            catdetails.Add(new CascadingDropDownNameValue(ProductCategoryName,ProdCategoryID));

        }

        return catdetails.ToArray();

    }

2) for subcategory

 [WebMethod]

    public CascadingDropDownNameValue[] BindProductSubCategory(string knownCategoryValues, string category)

    {

        int ProdCategoryID;

        //This method will return a StringDictionary containing the name/value pairs of the currently selected values

        StringDictionary ProdCategory = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

        ProdCategoryID = Convert.ToInt32(ProdCategory["ProductCategory"]);

        con.Open();

        SqlCommand cmdProdCat = new SqlCommand("select * from Tbl_ProductSubCategory where ProdCategoryID=@ProdCategoryID", con);

        cmdProdCat.Parameters.AddWithValue("@ProdCategoryID", ProdCategoryID);

        cmdProdCat.ExecuteNonQuery();

        SqlDataAdapter daProdCategory = new SqlDataAdapter(cmdProdCat);

        DataSet dsProdCat = new DataSet();

        daProdCategory.Fill(dsProdCat);

        con.Close();

        //create list and add items in it by looping through dataset table

        List<CascadingDropDownNameValue> SubCategorydetails = new List<CascadingDropDownNameValue>();

        foreach (DataRow dtrow in dsProdCat.Tables[0].Rows)

        {

            string ProdSubCategoryID = dtrow["ProdSubCategoryID"].ToString();

            string ProductSubCategoryName = dtrow["ProductSubCategoryName"].ToString();

            SubCategorydetails.Add(new CascadingDropDownNameValue(ProductSubCategoryName, ProdSubCategoryID));

        }

        return SubCategorydetails.ToArray();

    }

3) for product

 [WebMethod]

    public CascadingDropDownNameValue[] BindProduct(string knownCategoryValues, string category)

    {

        int ProductID;

        //This method will return a StringDictionary containing the name/value pairs of the currently selected values

        StringDictionary Product = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

        ProductID = Convert.ToInt32(Product["Productsubcategory"]);

        con.Open();

        SqlCommand cmdProduct = new SqlCommand("select * from tblProduct where ProdSubCategoryID=@ProdSubCategoryID", con);

        cmdProduct.Parameters.AddWithValue("@ProdSubCategoryID", ProductID);

        cmdProduct.ExecuteNonQuery();

        SqlDataAdapter daProduct = new SqlDataAdapter(cmdProduct);

        DataSet dsProduct = new DataSet();

        daProduct.Fill(dsProduct);

        con.Close();

        //create list and add items in it by looping through dataset table

        List<CascadingDropDownNameValue> Productdetails = new List<CascadingDropDownNameValue>();

        foreach (DataRow dtrow in dsProduct.Tables[0].Rows)

        {

            string ProductId = dtrow["ProductId"].ToString();

            string ProductName = dtrow["ProductName"].ToString();

            Productdetails.Add(new CascadingDropDownNameValue(ProductName, ProductId));

        }

        return Productdetails.ToArray();

    }