Today’s post is a response to a comment I’ve got from Rajesh. Before I go on with the post, I’d like to thank Rajesh for being one of my readers and giving a feedback. So, first the comment:
“I have a scenario of client binding where I’m facing problems. I have two select boxes which will be loaded on load using client side data binding. On selecting data of one select box, data in the second select box needs to be re-binded accordingly. (like selecting ASIA in one selectbox should only load Asian counties in the second select box).”
So, in today’s post I’ll make a following example : we’ll have two select elements. First one will have the names of countries, the second one will display the names of cities, based on which country we’ve chosen in the first select element. I’m not going to use Rajesh’s example with continents and countries, because I’ve already have this web service done (countries/cities) so I can reuse it. However, the principle is identical.
The list of countries we will load as soon as the page loads, but the list of cities we will load once user chooses the country.
For getting data we’ll need a web service. It is the same web service I’ve used in Master / Detail post with ListView, only this time we’ll use two select elements. We’ll name the web service geography.asmx. This is how this file looks like:
The code behind for this file looks like this:
As you can see the GetCountries Function has DataObjectMethodType.Select attribute, and that is because we want the countries to load as soon as page loads, so we’ll use dataSource component in xml-script. As you can see, here I’ve simply created manually a DataTable and return it. You would probably retrieve data from SQLServere here.
Now, let’s go to the default.aspx page, where we are going to set up our select elements. First make sure you register ScriptManager. You’ll also need here a reference to geography.asmx web service so that we can call its methods from java script. This part of code should look like this:
Now, we need to create two html select elements. One we’ll name selCountries and other selCities. For selCountries, we’ll define onchange event to call “selCountries_Change” function in javacript (this function will be called every time user changes the selected index > in our case every time user chooses different country). For selCities we’ll define onchange event to call “selCities_Change”. This function will simply show user a message that says something like “You have selected New York as your favourite city!” > obviously the name of the city is actually variable and depends on which city user chose. This part of code looks like this:
Now let’s see our xml-script. Take a look at the code first and I’ll explain it then:
First we set up the dataSource. I’ve explained this many times, so just briefly. We want it to load as soon as page loads, and use the geography.asmx as its web service. Then we’ll declare selCountries select element and bind it to this data source. If in doubt about this part of code, please read first Drop Down List – Client Side Data Binding Post.
First function is the selCountries_Change() function, which is invoked every time user chooses a different country. We don’t want to do anything if selectedIndex is 0, because first item in our select element is simply an instruction (“Choose a country”). If user selected something else, we find the value of that choice (that is the IDCountry value) and call BindCities function with that value as a parameter.
The BindCities function will call GetCities function on our webservice and send it the IDCountry parameter, so that GetCities functions knows which cities to return. The second parameter is the name of the callback function. Callback function is the function that web service will call once it has the data and to which it will send the data.
The BindCities_Callback function is called by web service and receives data table with list of cities for chosen country in results parameter. You see how we first get reference to the atlas representation of our selCities select element (we do that with dollar sign). Then we call selCities.control.set_data(results) function. This is something similar to asp.net’s data source property (e.g. in asp.net with drop down list you would do selCities.DataSource = results). Last thing we do here is call evaluateIn method on selCities (in asp.net that would be selCities.DataBind()). So to wrap it all up, we get the reference to select element, set it’s data source with set_data method and finally bind the data to the control.
At the end there is just a simple selCities_Change function. This function is called every time user selects different city. Here we just find which city user chose and give an alert message telling him that he chose that particular city. Obviously, you would replace this code with something more useful.
The whole project you can download from reBlogger lab.
This blog is being delivered to you by
“Do you know what your employees are blogging about?”