As I was trying today to find an example of how to bind data to the drop down list on the client side with xml-script (and refresh my memory), I was surprised just how few of those kind of examples are there on the internet. So, I’ve decided that in next several days I’ll write a little series with examples how to perform client side data binding with different kinds of controls. So, to kick it off with something simple I’ve chose drop down list.
There are two files that we need for this. First we need our good old default.aspx. On that page we will put the drop down list and the binding code (xml-script). The second file we need is a web service file, in my case named dsTest.asmx. That fill will give us the data that we are about to bind to the drop down. So let’s get the web service out of our way first.
We’ll add a new file to our project. From the list of files we’ll choose the “Web service”, we’ll name it dsTest.asmx and we’ll check the “Place code in separate file” checkbox.
The dsTest.asmx file has one line only and it looks like this :
The dsTest.vb file however, has the code that will give us our data when we request it. Take a look at this class first :
There are two very important things here. A) your class needs to inherit from the DataService class, which is a member of Microsoft.Web.Services namespace. And B) the GetMyData function that returns datatable needs to have it’s DataObjectMethodType attribute set to Select. You would do the same for update, delete or insert, but that exceeds the scope of this post.
Inside the GetMyData function you would typically substitute my code with some code that would return a table from SQL Server database or something like that. To make it simpler, I’ve just created a DataTable and populate it there in the code. I think I may have explained this part of the code, a while back in one of the other posts, but oh well… repetition is the mother of wisdom 🙂
Now, let’s go back to the default.aspx file. First we’ll set up our drop down list, which will contain the names of some people as its text property and email addresses of those people as its value property. When we change the name in the drop down list, we want the email address for that person to appear in a label. Now, all you Asp.NET freaks… we need to use html elements here, not your typical <asp: … kind of thing. So, the drop down list we represent with html <select> element, and label we represent with <span> element. If you ever looked at the source code Asp.NET generates you’ll see that indeed those are html equivalents of Asp.NET controls. So that would look something like this:
And now, last thing we have to do is add some xml-script code so these elements actually do something. The Atlas stuff. Take a peek at the code first and I’ll explain it then:
You’ll notice all the code is located between the components tags. First we have the dataSource component.
DataSource component will get our data. It’s rather similar to the SqlDataSource or ObjectDataSource controls from Asp.NET. First we set the id of this control (I’ve put dsNames). Then we set autoLoad=”true”, meaning that data will be loaded as soon page loads. And last property we set is the serviceURL. The serviceURL property we set to the dsTest.asmx – the web service file we’ve created in the first part of this post. Now, you may wonder how will this dataSource component know which function to call in our web service. Well it will call the one that has DataObjectMethodType.Select attribute, so that explains why was that very important.
Second component we want to declare here is our drop down list. Now, notice that for each html element we’ve created we need to make an atlas representation (so to say) of it inside the xml-script if we want to do anything with it. So we declare select component. We give it the exactly same id as we have to our html select element (this is very important, since that’s how it knows which element it represents). We then set dataContext=”dsNames”. You’ll notice that we named our dataSource “dsNames”, so this is like giving a datasource to this control. The firstItemText property sets the text of drop down for the first item, which is usually some kind of an instruction (like “Please select a name…” or something like that. And lastly, the two very important properties: textProperty should be set to the column name of your datatable that you want to act as text of your drop down item (in Asp.NET that would equal to DataTextField). valueProperty should be set to the column name of your datatable that you want to act as a value of your drop down item (in Asp.NET that would equal to DataValueField).
Next thing we need to define for our select (drop down list) element is the bindings. We set and id of binding that we may need later if we want to rebind this for some reason. dataContext is again the id of our dataSource. dataPath and property properties are set to data. Those two are always “data” if we are binding to some kind of datatable, dataset, array or that kind of thing.
And at the end of this element we’ll define a selectionChanged event. So basically what we do here is tell our select element that whenever selection changes it should invoke the “evaluateIn” method on bndEmail binding. We’ll get later to bndEmail element, so don’t worry about that. The “evaluateIn” method is roughly the same thing as DataBind is in Asp.NET, so whenever you want to rebind some binding you would typically call the evaluateIn method on that binding. And that’s exactly what we are doing here, rebinding every time selection changes.
The last element we have is label (the one that will display the email of the selected person). As you can see the id of this label is set to lblEmail, the very same id as we have set on our span html element (remember, we need to represent label in html elements, so that’s why we use span). We have declared the binding for this label and named it “bndEmail” (we need this id, so we can call “evaluateIn” on this binding every time selection in drop down changes). The dataContext this time is not our dataSource, but rather the selNames – our drop down list. Now, here it gets interesting. We have bound the text property (property=”text”) of our label to the selectedValue property (dataPath=”selectedValue”) of the selNames drop down list (dataContext=”selNames”). As you can see, data binding in xml-script can do a lot’s of things, not only get data from database.
I’m tired now. My mouth is dry. I hope it was worth it and you’ve got at least something out of this post.
Ahh yes, the whole project you can download from reBlogger lab.
p.s. What’s the deal with the peas? Well, I hate posts without images…
This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”
Coding Atlas 