Tuesday 3 September 2013

How to Use Asp.net ajax Cascading DropDown List

How to Use Asp.net ajax Cascading DropDown List


1) Create Website2) Add aspx page
3) Add toolkitScriptManager
4) If you don't have ajax control toolkit  download from codeplex
5) Add CascadeDropDown Extender


asp:CascadingDropDown Properties1) TargetControlID -  DROPDOWNLIST
2) PromtpText --> Puporse of the dropdownlist Text displayed in gray
3) ServiceMethod --> pulls/filters Data

4) ParentControlID --> If Dropdown list depends on another DropDown then set this ID
   In this case Parent DropDown has Countries, Child DropDown States depends on Countries.




    <b>Country:</b>
    <asp:DropDownList ID="dropCountries" runat="server" Height="22px" Width="169px"></asp:DropDownList>
        <asp:CascadingDropDown ID="CascadingDropDown1" runat="server"
        
                 ContextKey="Countries" 
          Category="Countries" LoadingText="Loading States"
           TargetControlID="dropCountries" PromptText="Select Country" 
            ServiceMethod="GetDropDownContents" UseContextKey="True"

        >
        </asp:CascadingDropDown>
        <br />
        <br />
        <b>State:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:DropDownList ID="dropStates" runat="server" Height="16px" Width="168px"></asp:DropDownList>
        <asp:CascadingDropDown ID="CascadingDropDown2" runat="server"
         ContextKey="States" 
          Category="States" LoadingText="Loading States"
           TargetControlID="dropStates" PromptText="Select State"
            ParentControlID="dropCountries" ServiceMethod="GetDropDownContents2" UseContextKey="True"
           
        >
        </asp:CascadingDropDown>

    </div>


3) Page Methods
        

    [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
    {
        CascadingDropDownNameValue[] dropCountries=  new CascadingDropDownNameValue[3];
            dropCountries[0] =  new CascadingDropDownNameValue("INDIA","INDIA");
        dropCountries[1] =  new CascadingDropDownNameValue("USA","USA");
        dropCountries[2] =  new CascadingDropDownNameValue("UK","UK");



        return dropCountries;
    }

    [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static CascadingDropDownNameValue[] GetDropDownContents2(string knownCategoryValues, string category)
    {
   // Child DropDown has knownCategory as countries:Countryname;

        String country = knownCategoryValues.Split(':')[1].Replace(';', ' ').Trim();
        CascadingDropDownNameValue[] dropCountries = new CascadingDropDownNameValue[3];

        if (country.ToLower() == "india")
        {
            dropCountries[0] = new CascadingDropDownNameValue("AP", "Andhra Pradesh");
            dropCountries[1] = new CascadingDropDownNameValue("TN", "Tamil Nadu");
            dropCountries[2] = new CascadingDropDownNameValue("KA", "Karnataka");
        }
        else if (country.ToLower() == "usa")
        {
            dropCountries[0] = new CascadingDropDownNameValue("CA", "California");
            dropCountries[1] = new CascadingDropDownNameValue("TX", "Texas");
            dropCountries[2] = new CascadingDropDownNameValue("WA", "Washington");

        }
        return dropCountries;
    }



5) Run the Web Page



No comments:

Post a Comment