cascading dropdownlist without reloading the page in asp.net

Question

Hi I am developing one asp.net web application, In that I am creating one registration form. On Registration form page, I have three Dropdownlists named as country, state, city. So When User selects any country, states in that country will be shown in dropdownlist of state and when user selects state from State dropdownlist He can see lists of cities in in dropdownlist.

I have implemented the functionality, but When User selects value in dropdownlist, post-back occurs. In my case I don't want to reload the page when User selects country or state, So I have tried to implement the same functionality by using ajax toolkit. But I am not able to achieve the same functionality using ajax.

So in brief my problem is: selecting country, state and city from dropdownlist in asp.net without reloading the page.

Here I am giving you the aspx part.

Please help me.

CountryDropDown

<asp:DropDownList ID="DropDownListCountry" runat="server" Enabled="false"  
        OnSelectedIndexChanged="DropDownListCountry_OnSelectedIndexChanged" 
        AutoPostBack ="false">
     <asp:ListItem>India</asp:ListItem>
     <asp:ListItem>Other</asp:ListItem>
</asp:DropDownList>

StateDropDown

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DropDownListCountry" EventName="OnSelectedIndexChanged" />
    </Triggers>
    <ContentTemplate>
        <asp:DropDownList runat="server" ID="DropDownListState"  Enabled="false"
           OnSelectedIndexChanged="DropDownListState_OnSelectedIndexChanged">
        </asp:DropDownList>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

First create a web service to retrieve data for your dropdownlists

Create webservice: CascadingDropdown.asmx in your CascadingDropdown.asmx.cs write code retrieve data for Country, State and City from the database, see this is how i did, you can do something like this, i have used entity framework to fetch the data from the database.

    [WebMethod]
    public CascadingDropDownNameValue[] FetchCountries()
    {
        GetLookupResponse countryLookupResponse = commonService.GetLookup("Country");
        List<CascadingDropDownNameValue> countries = new List<CascadingDropDownNameValue>();
        foreach (var dbCountry in countryLookupResponse.LookupItems)
        {
            string countryID = dbCountry.ID.ToString();
            string countryName = dbCountry.Description.ToString();
            countries.Add(new CascadingDropDownNameValue(countryName, countryID));
        }
        return countries.ToArray();
    }

    [WebMethod]
    public CascadingDropDownNameValue[] FetchStates(string knownCategoryValues)
    {
        int countryID;
        StringDictionary strCountries = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        countryID = Convert.ToInt32(strCountries["Country"]);
        GetLookupResponse stateLookupResponse = commonService.GetLookup("State");
        List<CascadingDropDownNameValue> states = new List<CascadingDropDownNameValue>();
        foreach (var dbState in stateLookupResponse.LookupItems.Where(id => id.DependencyID == countryID))
        {
            string stateID = dbState.ID.ToString();
            string stateName = dbState.Description.ToString();
            states.Add(new CascadingDropDownNameValue(stateName, stateID));
        }
        return states.ToArray();
    }

    [WebMethod]
    public CascadingDropDownNameValue[] FetchCities(string knownCategoryValues)
    {
        int stateID;
        StringDictionary strStates = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        stateID = Convert.ToInt32(strStates["State"]);
        GetLookupResponse cityLookupResponse = commonService.GetLookup("City");
        List<CascadingDropDownNameValue> cities = new List<CascadingDropDownNameValue>();
        foreach (var dbCity in cityLookupResponse.LookupItems.Where(id => id.DependencyID == stateID))
        {
            string cityID = dbCity.ID.ToString();
            string cityName = dbCity.Description.ToString();
            cities.Add(new CascadingDropDownNameValue(cityName, cityID));
        }
        return cities.ToArray();
    }

then in your aspx file, you need to register AjaxControlToolkit on top of the page below

, if you haven't installed AjaxControlToolkit, then install it from Nuget packages.

then your dropdownlist code:

<label class="col-sm-3 col-form-label required">Country</label>
<div class="col-sm-9">
    <asp:DropDownList ID="ddlCountry" runat="server" CssClass="form-control"></asp:DropDownList>
    <ajax:CascadingDropDown ID="csdCountry" runat="server"
        Category="Country"
        TargetControlID="ddlCountry"
        LoadingText="Loading Countries..."
        ServiceMethod="FetchCountries"
        ServicePath="~/CascadingDropdown.asmx"></ajax:CascadingDropDown>
</div>

<label class="col-sm-3 col-form-label required">State</label>
<div class="col-sm-9">
    <asp:DropDownList ID="ddlState" runat="server" CssClass="form-control"></asp:DropDownList>
    <ajax:CascadingDropDown ID="csdState" runat="server"
        ParentControlID="ddlCountry"
        Category="State"
        TargetControlID="ddlState"
        LoadingText="Loading States..."
        ServiceMethod="FetchStates"
        ServicePath="~/CascadingDropdown.asmx"></ajax:CascadingDropDown>
</div>

<label class="col-sm-3 col-form-label required">City</label>
<div class="col-sm-9">
    <asp:DropDownList ID="ddlCity" runat="server" CssClass="form-control"></asp:DropDownList>
    <ajax:CascadingDropDown ID="csdCity" runat="server"
        ParentControlID="ddlState"
        Category="City"
        TargetControlID="ddlCity"
        LoadingText="Loading Cities..."
        ServiceMethod="FetchCities"
        ServicePath="~/CascadingDropdown.asmx"></ajax:CascadingDropDown>
</div>

What i am doing in this is when we select country frop country dropdownlist, I am passing country id to FetchStates webmethod that is in our CascadingDropdown.asmx.cs web service to fetch the states based on country id, and same goes for city, pass state id to FetchCities webmethod to fetch cities.

Hope it helps.

Answer 2

wow you manage to make a big mess of explaining whats wrong.... but ill do my best to try to help. first of, first DDL should be defined like so:

<asp:DropDownList ID="Contries" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Contries_SelectedIndexChanged">
    <asp:ListItem Text="country1" />
    <asp:ListItem Text="country2" />
</asp:DropDownList>

2nd DDL :

   <asp:UpdatePanel runat="server" >
    <ContentTemplate> 
        <asp:DropDownList ID="States" runat="server" AutoPostBack="true">
    <asp:ListItem Text="state1" />
    <asp:ListItem Text="state2" />


</asp:DropDownList>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Contries" EventName="OnSelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

and so on, auto post back must be true in DDL that should do async post back,

try to remove DDLs one by one and start only with 2 then move forward.