In two previous posts about client side data binding I have demonstrated how to bind data to drop down list and list view (atlas equivalent of DataList, resembles GridView as well). Now, since we know how to these two, let’s combine that knowledge to solve classic master detail task.
In our example we want to bind list of countries to drop down list. Then when user chooses any of these countries we will cities that are located in that country in a ListView. Very simple, but will prove the point.
Now, let’s go to our web service code-behind file, namely geography.vb. We need to add a namespace declaration here (Namespace Reblogger.Samples.Data – you could name this namespace anyway you wish). Second thing to change is the inheritance of our Geography class : instead of WebService, make it inherit from Microsoft.Web.Services.DataService. Anyway, take a look at the whole class :
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.
Ok, now we are going to default.aspx page. We need to set up drop down list and listView in code (take a look at previous posts about client side data binding if in doubt how to do this).
Now in xml-script we make DataSource for countries and bind it to the drop down list :
Next thing we do is define our listView. Everything is same as in this POST, but notice that we are not binding the listView itself to no dataSource. This is because we will do it dynamically based on the selected value of our drop down list :
As you can see here, first we have function that get’s the selected value of drop down every time selected index changes and calls BindCities function with that value. Note that selected index must be greater than 0, because first item in our drop down is not a name of a country, but “Choose a country…” text.
Next we have BindCities function. This function calls the Reblogger.Samples.Data.Geography.GetCities() function and sends it id_country as a parameter. The second parameter is the name of the so called callback function. Basically we are telling the web service that once it has data, it should send that data to that callback function.
And at the end the BindCities_Callback(results) function. Notice how it has parameter “results” > that parameter holds the data that server returned. First we need to find our listView (we do it with the $ sign), then we set it’s data source and at last call evaluateIn method on it. As I’ve already said before, evaluateIn is atlas equivalent of asp.net’s DataBind().
The whole project you can download from reBlogger lab. This project you should really download, because even though I’ve explained most of the things in the post, I think it’ll be much more easier to understand it if you can look at the working example. Just a thought :).
p.s. Do not forget to add service reference to your ScriptManager tag. It should look something like this :
This blog is being delivered to you by
“Do you know what your employees are blogging about?”