Populate One Asp.net Dropdown based on Selection in Another Dropdown withourt using postback

Question

2.09/5 (3 votes)

See more:

The Data in dropdownlist is come from database.

C#

If (!IsPostBack)
         {
             Bindcategorydown();
         }

    

    protected void Bindcategorydown()
    {
        SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=D:\site\SamsungClassifieds\App_Data\Dorknozzle.mdf;Integrated Security=True;User Instance=True");
        con.Open();
        SqlCommand cmd = new SqlCommand("SELECT * from CAT_DETAIL", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        con.Close();
        ddCat.DataSource = ds;
        ddCat.DataTextField = "CAT_DESC";
        ddCat.DataValueField = "CAT_ID";
        ddCat.DataBind();
        ddCat.Items.Insert(0, new ListItem("Select A Category...", "-1"));
        ddSubCat.Items.Insert(0, new ListItem("--Select--", "-1"));

    }


    protected void ddCat_SelectedIndexChanged(object sender, EventArgs e)
    {
        int Cat_ID = Convert.ToInt32(ddCat.SelectedValue);
        SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=D:\site\SamsungClassifieds\App_Data\Dorknozzle.mdf;Integrated Security=True;User Instance=True");
        con.Open();
        SqlCommand cmd = new SqlCommand("SELECT * FROM SUB_CAT_DETAIL WHERE CAT_ID=" + Cat_ID, con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        con.Close();
        ddSubCat.DataSource = ds;
        ddSubCat.DataTextField = "SUB_CAT_DESC";
        ddSubCat.DataValueField = "SUB_CAT_ID";
        ddSubCat.DataBind();
        ddSubCat.Items.Insert(0, new ListItem("Select A Sub-Category...", "-1"));

    }

I am using autopostback but i dont want to reload whole page as it reload.

Posted 15-Sep-13 4:55am

Harshit Wadhera

Updated 15-Sep-13 5:04am

Sampath Lokuge

v2

Add a Solution

3 solutions

Solution 2

Wrap both dropdowns in ASP.NET Update Panel and set the 2nd update panel 's Trigger As first dropdown's selected index change event

Posted 15-Sep-13 6:19am

Nitin Singh India

Comments

Harshit Wadhera 15-Sep-13 14:50pm

how it can be done??

Harshit Wadhera 15-Sep-13 16:06pm

solution 2 is has an error i.e if I select the one the it show the respective data in 2 dropdown and a the same time if i select the 2 option from 1 dropdown then it show both the data that i select first time and 2 time.

Nitin Singh India 16-Sep-13 13:52pm

you have to specify what you want to be dependent and what is the dependency. Based on the dependency's specific events, the dependent objects gets updated.
You need to separate both items distinctly else the use cases will get jumbled up

Solution 1

For that you have to use jQuery.

Sample one is as below:

<script type="text/javascript">
  Sys.require('jQuery', function () {
      var ownerKey = ui.draggable.data('owner-key');
                    var providerKey = '<%: Model.Provider.Key %>';

                    $.ajax({
                        url: "/Portal/GetPurchasedPackages",
                        dataType: 'json',
                        data: { ownerKey: ownerKey, providerKey: providerKey },
                        success: function (data) {
                            $("#purchasedPackages").fillSelect(data);
                            $("#purchasedPackages").sb("refresh");//for refresh after Ajax call
                        }
                    });

                    $.fn.fillSelect = function (data) {
                        return this.clearSelect().each(function () {
                            if (this.tagName == 'SELECT') {
                                var dropdownList = this;
                                $.each(data, function (index, optionData) {
                                    var option = new Option(optionData.Text, optionData.Value);
                                    if ($.browser.msie) {
                                        dropdownList.add(option);
                                    } else {
                                        dropdownList.add(option, null);
                                    }
                                });
                            }
                        });
                    };

                    $.fn.clearSelect = function () {
                        return this.each(function () {
                            if (this.tagName == 'SELECT')
                                this.options.length = 0;
                        });
                    };
</script>
});

For more info :

How to populate ASP.NET DropDownList using jQuery and Ajax

http://jquerybyexample.blogspot.com/2012/04/how-to-populate-aspnet-dropdownlist.html[^]

I hope this will help to you.

Posted 15-Sep-13 5:02am

Sampath Lokuge

Comments

Harshit Wadhera 15-Sep-13 14:32pm

sir how to write this code can you please explain me i am new in jquery....

Sampath Lokuge 15-Sep-13 14:40pm

If you're new to the jQuery,Task will little bit harder.But you may try the 2nd solution with update panel.

Harshit Wadhera 15-Sep-13 16:04pm

solution 2 is has an error i.e if I select the one the it show the respective data in 2 dropdown and a the same time if i select the 2 option from 1 dropdown then it show both the data that i select first time and 2 time.
can you give me link from which i can go through to perform this problem.

Sampath Lokuge 16-Sep-13 3:23am

I have put the link above as "How to populate ASP.NET DropDownList using jQuery and Ajax".Plz check that.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Harshit Wadhera · Accepted Answer · 2013-09-16T00:34:00

Solution 3

I have solved this problem using ajax cascading dropdown list...

http://www.aspdotnet-suresh.com/2011/01/introduction-here-i-will-explain-how-to.html

Posted 16-Sep-13 0:34am

Harshit Wadhera

Updated 16-Sep-13 1:28am

v2