ListView – client side data binding

As I continue to write my series on client side data binding, the next obvious choice was the listView. ListView is in my opinion as close as Atlas gets to Asp.Net’s GridView or DataList.

So anyway, basically what we want to do here is bind the very same datatable from our previous post (list of names and emails) to listView control. We’ll create the webservice file first. To add webservice file, you’ll right click on your project (in solution explorer), then click “Add new item”, then you’ll select WebService, name it dsNames.asmx and check “place code in separate file”.

The dsNames.asmx file will look like this :

OPEN CODE IN NEW WINDOW

As you can see it’s only one line of code. It’s code behind file, dsNames.vb should look like this:

OPEN CODE IN NEW WINDOW

Read the previous posts for the explanation of this class if you need it.

Now we’ll turn to the default.aspx file, the asp.net page that will hold our listView and xml-script that will bind the data from web service to the listView.

First thing we need to do is to define our listView but with html (remember that’s how client side atlas works!). To do that, we’ll put an empty <div element with id=”namesList”. So it will look like this:

OPEN CODE IN NEW WINDOW

Next thing we need to do is define the template look for this listView. Take a look at the html and I’ll explain it then:

OPEN CODE IN NEW WINDOW

First of all you can see we wrapped everything into a div that with set to be invisible. That’s been done because this is just like an instruction to xml-script how to make our listView look like, it’s not something we want to show the user. Next you see there is ListTemplate div, which represents the layoutTemplate for our listView. This div contains all the other templates in our case it’s only ListItemTemplate. The div that represents the ListItemTemplate you can think of as ItemTemplate in DataList (or in TemplateColumn of GridView). Inside the ListItemTemplate we declared how we want each item to look like… notice only that we have two spans with ids _name and _email. Those obviously we’ll be bound to the data.

At the end we have a button that will bind the listView to dataSource once when clicked. If you are wondering how to bind it automatically, check out the previous post.

The last thing we need to do is, write our xml-script. Take a look first at how it looks like and then I’ll explain it:

OPEN CODE IN NEW WINDOW

First we have dataSource component. We set it’s id to dsNames (we need this to be able to reference it), serviceURL is dsNames.asmx (our web service).

Next you see is our listView. Now, as I’ve said all the controls in client side atlas need html elements to represent them. In our case listView is represented by an empty <div element with the id=”namesList”. We set it’s itemTemplateParentElementId=”ListTemplate” (take a look at the template html that’s invisible to find and element with same id).

Now, we need to set up the binding for the listView to our dataSource. So we set dataContext=”dsNames” (our dataSource id), dataPath=”data” and property=”data” (remember that this is always data when we are returning datatable, dataset or that kind of data).

Following this, we declare our layoutTemplate. This is simply our ListTemplate <div element.

Now last thing in listView we need to set up is the itemTemplate. As you can see we first set the layoutElement to the “ListItemTemplate” <div element (take a look at the hidden html part we wrote to find the element with such id). Then we have two labels, representing those spans in our hidden html. One is _name and one is _email. Two each of these we need to set the binding. We bind its text property to the Name/Email column (those are the column names in our datatable) from the dataSource that we bound in the first place to our listView.

At the end we have only one more thing to do. When we press the btnLoad button, we want the dsNames dataSource to load and bind the data to listView. So we invoke load method on the dsNames target.

And that’s it.

You can download the whole project from reBlogger lab.


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


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: