CascadingDropDown is an ASP.NET AJAX extender that can be attached to an ASP.NET DropDownList control. It will automatically populate set of DropDownList controls without page postback. Each time the selection of one the DropDownList controls changes, the CascadingDropDown makes a call to a specified web service to retrieve the list of values for the next DropDownList in the set.

Here I’ll explain how to use Ajax Cascading DropDown to bind Country, State and City details from database. So first we have to create tables

Table design (Country):

Column Name

Data Type

CountryID

int

Country

varchar(50)

 

Table design (State):

Column Name

Data Type

CountryID

int

StateID

int

State

varchar(50)

 

Table design (City):

Column Name

Data Type

StateID

int

CityID

int

City

varchar(50)

 

Create web service:

Right click root folder -> select new item -> select web service (Ex. CCDDLWebService.cs)

 

Now we have to use following namespace in web service

using AjaxControlToolkit;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

 

Note:

Uncomment the following the line in web service for handling callbacks

[System.Web.Script.Services.ScriptService]

 At runtime, the extender will make callbacks to a web service we specify (which is decorated with the System.Web.Script.Services.ScriptService attribute). In that web service, it expects a WebMethod with the following signature

Then we have to create web methods for bind Country, State and City details from database

Sample code:

[WebMethod]

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

{

}

The knownCategoryValues parameter will return a string containing the currently selected category values, as well as the category to retrieve values for. For example, if the extender is populating the "Country" field, you will be passed the values for the "State" and "District" fields, as well as "Country" to specify the field to return values for.

 

The CascadingDropDown class has a helper method for unpacking the category values:

Sample code:

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

 

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

Full web service code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services; 

using AjaxControlToolkit;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

 

/// <summary>

/// Summary description for CCDDLWebService

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

 [System.Web.Script.Services.ScriptService]

public class CCDDLWebService : System.Web.Services.WebService { 

    SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString); 

    //Web method for bind country

    [WebMethod]

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

    {

        DataSet ds = new DataSet();

        conn.Open();

        SqlCommand cmd = new SqlCommand("select * from Country", conn);

        SqlDataAdapter adp = new SqlDataAdapter(cmd);

        cmd.ExecuteNonQuery();       

        adp.Fill(ds);

        conn.Close();

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

        foreach (DataRow DR in ds.Tables[0].Rows)

        {

            string CountryID = DR["CountryID"].ToString();

            string CountryName = DR["Country"].ToString();

            CountryDetails.Add(new CascadingDropDownNameValue(CountryName, CountryID));

        }

        return CountryDetails.ToArray();

    }

    //Web method for bind state

    [WebMethod]

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

    {

        DataSet ds = new DataSet();

        int CountryID;

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

        CountryID = Convert.ToInt32(CountryDetails["Country"]);

        conn.Open();

        SqlCommand cmd = new SqlCommand("select * from State where CountryID=@CountryID", conn);

        cmd.Parameters.AddWithValue("@CountryID", CountryID);

        cmd.ExecuteNonQuery();

        SqlDataAdapter adp = new SqlDataAdapter(cmd);       

        adp.Fill(ds);

        conn.Close();

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

        foreach (DataRow DR in ds.Tables[0].Rows)

        {

            string stateID = DR["StateID"].ToString();

            string statename = DR["State"].ToString();

            StateDetails.Add(new CascadingDropDownNameValue(statename, stateID));

        }

        return StateDetails.ToArray();

    }

    //Web method for bind city

    [WebMethod]

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

    {

        DataSet ds = new DataSet();

        int stateID;

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

        stateID = Convert.ToInt32(statedetails["State"]);

        conn.Open();

        SqlCommand cmd = new SqlCommand("Select * from City where StateID=@StateID", conn);

        cmd.Parameters.AddWithValue("@StateID", stateID);

        cmd.ExecuteNonQuery();

        SqlDataAdapter adp = new SqlDataAdapter(cmd);       

        adp.Fill(ds);

        conn.Close();

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

        foreach (DataRow DR in ds.Tables[0].Rows)

        {

            string CityID = DR["CityID"].ToString();

            string City = DR["City"].ToString();

            CityDetails.Add(new CascadingDropDownNameValue(City, CityID));

        }

        return CityDetails.ToArray();

    }   

}

 

Then we have to create designer aspx page

First we have to use following code to include AJAX Casacading DropDown in aspx page

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 

AJAX Cascading DropDown properties:

<ajaxToolkit:CascadingDropDown ID="CDD1" runat="server"

    TargetControlID="DropDownList2"

    Category="Model"

    PromptText="Please select a model"

    LoadingText="[Loading models...]"

    ServicePath="CarsService.asmx"

    ServiceMethod="GetDropDownContents"

    ParentControlID="DropDownList1"

    SelectedValue="SomeValue" />

 

You can refer all the properties AJAX Cascading DropDown here


Designer source code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Cascading DropDown</title>

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div>   

        <table align="center">

        <tr><td colspan="2"><b>Cascading Dropdown List</b></td></tr>

        <tr><td> Select Country:</td><td>

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

           <asp:CascadingDropDown ID="CountryCascading" runat="server" Category="Country"

            TargetControlID="ddlCountry" LoadingText="Loading Countries..." PromptText="Select Country"

            ServiceMethod="BindCountry" ServicePath="~/CCDDLWebService.asmx">

       </asp:CascadingDropDown> </td></tr>

        <tr> <td> Select State: </td> <td>

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

            <asp:CascadingDropDown ID="StateCascading" runat="server" Category="State" TargetControlID="ddlState"

                ParentControlID="ddlCountry" LoadingText="Loading States..." PromptText="Select State"

                ServiceMethod="BindState" ServicePath="~/CCDDLWebService.asmx">

            </asp:CascadingDropDown></td></tr>

        <tr><td>Select Region:</td><td>

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

        <asp:CascadingDropDown ID="CityCascading" runat="server" Category="Region"

            TargetControlID="ddlCity" ParentControlID="ddlState" LoadingText="Loading Cities..."

            PromptText="select" ServiceMethod="BindCity" ServicePath="~/CCDDLWebService.asmx">

        </asp:CascadingDropDown> </td></tr>

       </table>

    </div>

    </form>   

</body>

</html>

 

Note:

We have to disable EventValidation in aspx page

Sample code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %>

happy Coding.!!

cytotec abortion

http://www.extrageek.com/template/default.aspx?an-abortion-pill buy abortion pills online
medical abortion pill online cytotec abortion abortion pill


View demo Download
http://www.dotnetfox.com/Document/1078/0Demo2.gif

If you enjoyed this article, get email updates (it's free).


Related Articles
  • Ajax Accordian control in ASP.NET In this article I’m going to explain how to use Ajax Accordian control in asp.net. The Accordian is a web control that allows you to provide multiple panes and display them at a time and only one panes expanded at a time. Accordian control has a templates for header and content. Also we can add server controls to the Accordian.
  • Ajax Calendar Extender in ASP.NET In this article I’m going to explain how to use Ajax Calendar Extender control in asp.net. Ajax Calendar Extender provides client side date picking functionality with customizable date and UI in a popup control. You can interact with calendar by clicking today date, past and future date. Also you can modify date format, popup display position and set custom styles to the calendar.
  • How to use Ajax ModalPopup Extender in ASP.NETIn this article I’m going to explain how to use Ajax Modalpopup Extender control in asp.net. The ModalPopup extender allows a page to display content to the user in a “modal” manner which prevents the user from interacting with rest of the page. We can add any web controls inside the modal content. When modal popup displayed only the modal content can be interacted with the user and rest of the pa...
  • How to use Ajax CalenderExtender in ASP.NET GridViewIn this article I’m going to explain how to use Ajax CalenderExtender in ASP.NET GridView. Today one of my blog subscriber asked me a question that’s how to use Ajax CalenderExtender in ASP.NET GridView. I hope you already know how to use Ajax CalenderExtender in normal page. There is no different to use Ajax CalenderExtender in normal page and GridView.
  • How to use Ajax ColorPickerExtender in ASP.NETIn this article I’m going to explain how to use Ajax ColorPickerExtender in ASP.NET. Ajax ColorPickerExtender provides client-side color-picking functionality with UI in a popup control. It can be attached to any ASP.NET TextBox control.
  • Google Geo Chart or Geo map with custom Color and Tooltip in ASP.NET I have already written an article for implementing Geo Chart in ASP.NET. In this article I’m going to explain how to use custom colors and tooltip in Google Geo Chart. In this demo I have implemented Geo chart for countries and percentage of world populations. For that first we have to create table with following fields.
  • Ajax Cascading DropDown example with database in ASP.NETCascadingDropDown is an ASP.NET AJAX extender that can be attached to an ASP.NET DropDownList control. It will automatically populate set of DropDownList controls without page postback. Each time the selection of one the DropDownList controls changes, the CascadingDropDown makes a call to a specified web service to retrieve the list of values for the next DropDownList in the set.
  • AJAX FileUpload or multiple FileUpload with progress example in ASP.NETThe AjaxFileUpload control is used to upload multiple files to the server folder. AjaxFileUpload uses one of two methods of showing file upload progress. If you are using a browser which fully supports the HTML5 File API (such as Google Chrome or Mozilla Firefox) then upload progress is displayed using client-side events. If, on the other hand, you are using a browser which does not fully support ...
  • UpdatePanel with Triggers in ASP.NETASP.NET AJAX provides the most visible feature that the ability to partial or incremental page updates with PostBack to the server. Before AJAX implementation is ASP.NET page update require a round trip to the server which requires a page refresh. UpdatePanel control remove the requirement to refresh the whole page with each postback which improves user experience. While working with UpdatePanel ...
  • Using jQuery ajax to call ASP.NET page method to execute store procedureCall ASP.NET page method to execute store procedure with multiple parameters using jQuery ajax. One of my blog reader asked me a question that how to execute store procedure directly using jQuery. Actually we can’t execute store procedure directly by jQuery. But we can call ASP.NET page method to execute store procedure.

Comments
comments powered by Disqus

Thanks for downloading..!!

×
Subscribe via Email
    
message to display in fancybox