?
Solved

how to load values of dropdown list  control using jquery in asp.net website

Posted on 2009-04-21
3
Medium Priority
?
1,605 Views
Last Modified: 2012-05-06
I have a web page which contains a country dropdown list which gets filled on page load.
I want to load the state list when a country is selected using jquery,

is it possible with sever control as both country and state list controls are server side.

if yes pls provide me some examples
0
Comment
Question by:ziorrinfotech
  • 3
3 Comments
 
LVL 1

Expert Comment

by:hb69
ID: 24205483
Let's presume you are getting the info from the drop down list from a db ... just to make it interesting.

FIRST - the JQUERY.  Get the data from (in this case) a generic handler.  We make an AJAX GET request (passing dummy data to the handler ... since I can't predict your data architecture).  When the info has been passed successfully, we have a callback function that hanldes the population of the dropdown.

        // asp dropdownlist
        $.getJSON(
            '/generichandlers/jq_GetFromDB.ashx',
            {firstname:'Mista', lastname:'Bigg', age:43},
                function(data) {
                //callback
                populateOffices(data);
                }
        );

I'm setting this up with a hander because it will be useful for those using databases who want to call server-side functionality without the burden of viewstate or ineffective .net postbacks.  Here's the JSON string/array that is being returned from the Generic Handler but if you don't like this just make any old array and it'll do.

context.Response.Write("{'44352' : 'East Desolation', '98872' : 'DownTown Branch', '56821' : 'South Side'}");

Here's the function that populates the asp:dropdownlist: VERY IMPORTANT you have to use the name of the control that is generated from the CLR (ctl00_ContentPlaceHolder1_drpOffices)  NOT drpOffices.

function populateOffices(genArray) {
    $.each(genArray, function(val, text) {
        $('#ctl00_ContentPlaceHolder1_drpOffices').append(
            $('<option></option').val(val).html(text)
        );
    });
}

And here's the dropdownlist:

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

I am presuming you are familiar with how to set this stuff up.  
       
0
 
LVL 1

Accepted Solution

by:
hb69 earned 500 total points
ID: 24205624
I might not have made it clear how this answers your question.  I *think* what you are saying is that you want to have cascading drop downs.  They pick a country and then the state dropdown gets populated.  All you do is you rig up the country to execute a call to a generic handler (or it could be a service, a class, a controller call ....) ... the Jquery handles the callback, using the param/value from the Country dropdownlist that you have selected, we employ the AJAX call that I provided, passing the Country param, and it returns an arraylist/stringarray of states which gets populated to the State dropdown (which I called drpOffices in my sample).

That will get you going.  If you want to know how to read the "country" value off of the first drop down, that should be a separate question.

Hope this helps.
0
 
LVL 1

Expert Comment

by:hb69
ID: 24206995
I forgot to mention, if you bypass the .net postback and use JQuery AJAX then you need to put EnableEventValidation="false" in the page directive.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month16 days, 15 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question