Master / Detail – client side data binding

Master detail client side data binding
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.

First thing we need to do is to add a WebService. Add new item to your project (Web Service), name it geography.asmx and check “Place code in separate file”. We will need to change the Class attribute from “geography” to “Reblogger.Samples.Data.Geography” (we need the namespace attribute in order to call the functions from javascript). Here is how the geography.asmx file will look like :

OPEN CODE IN NEW WINDOW

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 :

OPEN CODE IN NEW WINDOW

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.

Next method you can see is GetCities. This is a simple WebMethod, because we will call it from javascript (we won’t use it with dataSource component). It takes one parameter, namely IDCountry, and returns the cities located in that country. Last function in this class, simple creates and fills DataTable with cities.

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).

OPEN CODE IN NEW WINDOW

Now in xml-script we make DataSource for countries and bind it to the drop down list :

OPEN CODE IN NEW WINDOW

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 :

OPEN CODE IN NEW WINDOW

Last this we have to do, is provide javascript code that will bind listView with the list of appropriate cities every time user changes the country.

OPEN CODE IN NEW WINDOW

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 :

OPEN CODE IN NEW WINDOW


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


One Response to “Master / Detail – client side data binding”

  1. khris Says:

    i cant see your codes…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: