DOTNET POINT: Ajax Cascading Dropdownlist Sample with database using asp.net

Wednesday, 22 February 2012

Ajax Cascading Dropdownlist Sample with database using asp.net

Introduction:

Here I will explain how to use Ajax cascading dropdownlist with database using asp.net

Description:

In my previous article I explained how to populate dropdown based on other dropdown using asp.net now I will explain how to use Ajax cascading dropdownlist in asp.net.

Here I already explained how to populate dropdown based on another dropdown but now why I am explaining about this Ajax cascading dropdownlist because if we use this Ajax cascading dropdownlist we can get the dropdown data without any postback operation and we don’t need to write extra code to disable dropdowns based on otherdropdown selection all the futures available with this Ajax cascading dropdown directly but here we need to write webservices to populate the dropdowns with data.

Here I will explain with three dropdowns Country dropwdown, State dropdown, Region dropdown I need to populate states dropdown based on country dropdown and I need to populate region dropdown based on states dropdown for that what we have to do first design three tables in sql server with data like this

Country Table

State Table

Region Table

After that add AjaxControlToolkit to your bin folder and design your aspx page like this

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

</head>

<body>

<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>

<div>

<table>

<tr>

<td>

Select Country:

</td>

<td>

<asp:DropDownList ID="ddlcountry" runat="server"></asp:DropDownList>

<ajax:CascadingDropDown ID="ccdCountry" runat="server" Category="Country" TargetControlID="ddlcountry" PromptText="Select Country" LoadingText="Loading Countries.." ServiceMethod="BindCountryDetails" ServicePath="CascadingDropdown.asmx">

</ajax:CascadingDropDown>

</td>

</tr>

<tr>

<td>

Select State:

</td>

<td>

<asp:DropDownList ID="ddlState" runat="server"></asp:DropDownList>

<ajax:CascadingDropDown ID="ccdState" runat="server" Category="State" ParentControlID="ddlcountry" TargetControlID="ddlState" PromptText="Select State" LoadingText="Loading States.." ServiceMethod="BindStateDetails" ServicePath="CascadingDropdown.asmx">

</ajax:CascadingDropDown>

</td>

</tr>

<tr>

<td>

Select Region:

</td>

<td>

<asp:DropDownList ID="ddlRegion" runat="server"></asp:DropDownList>

<ajax:CascadingDropDown ID="ccdRegion" runat="server" Category="Region" ParentControlID="ddlState" TargetControlID="ddlRegion" PromptText="Select Region" LoadingText="Loading Regions.." ServiceMethod="BindRegionDetails" ServicePath="CascadingDropdown.asmx">

</ajax:CascadingDropDown>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

After that add one new webservice page to your application and following namcespaces in your webservice code behind page

using System.Data;

using System.Data.SqlClient;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Configuration;

using AjaxControlToolkit;

Here we need to remember one point that is we need to write webmethods this format only and use exact parameters that should be same as whatever I mentioned in web method

[WebMethod]

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

In this web method we have a chance to change only method name return type also same CascadingDropDownNameValue[]

After completion of writing namespaces and write the following code in webservice page

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ToString());
    SqlDataAdapter da;
    int i;
    DataTable dt = new DataTable();
    List<CascadingDropDownNameValue> cdv = new List<CascadingDropDownNameValue>();
    StringDictionary sd = new StringDictionary();
    [WebMethod]
    public CascadingDropDownNameValue[] x()
    {
        cn.Open();
        da = new SqlDataAdapter("select * from country", cn);
        dt.Clear();
        dt.Reset();
        da.Fill(dt);
        foreach (DataRow dr in dt.Rows)
        {
            cdv.Add(new CascadingDropDownNameValue(dr[1].ToString(), dr[0].ToString()));
        }
        cn.Close();
      return cdv.ToArray();

    }
    [WebMethod]
    public CascadingDropDownNameValue[] y(string knownCategoryValues)
    {
        cn.Open();
        sd = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        i = Convert.ToInt32(sd["country"]);
        da = new SqlDataAdapter("select * from state where cid=" + i, cn);
        dt.Clear();
        dt.Reset();
        da.Fill(dt);
        foreach (DataRow dr in dt.Rows)
        {
            cdv.Add(new CascadingDropDownNameValue(dr[1].ToString(), dr[0].ToString()));
        }
        cn.Close();
        return cdv.ToArray();

    }
    [WebMethod]
    public CascadingDropDownNameValue[] z(string knownCategoryValues)
    {
        cn.Open();
        sd = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        i = Convert.ToInt32(sd["state"]);
        da = new SqlDataAdapter("select * from district where sid=" + i, cn);
        dt.Clear();
        dt.Reset();
        da.Fill(dt);
        foreach (DataRow dr in dt.Rows)
        {
            cdv.Add(new CascadingDropDownNameValue(dr[1].ToString(), dr[0].ToString()));
        }
        cn.Close();
        return cdv.ToArray();

    }


}

Demo

Download sample code attached

DOTNET POINT

Wednesday, 22 February 2012

Ajax Cascading Dropdownlist Sample with database using asp.net

No comments:

Post a Comment