Menu:

Recent Entries

Categories

Archives

Links

Blogs
- Dflying's Night
- David's Untitled Life
- Dflying's Blog in Chinese

This blog is hosted by DreamHost!

Syndicate

RSS 0.90
RSS 1.0
RSS 2.0
Atom 0.3

Display Listible Data Using ASP.NET Atlas ListView Control

 Dflying | 08 April, 2006 06:27

I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:

  1. Sys.UI.Data.ListView: Display Listible Data Using ASP.NET Atlas ListView Control
  2. Sys.UI.Data.ItemView: Display One Item in a Collection using ASP.NET Atlas ItemView Control
  3. Sys.UI.Data.DataNavigator: Paging Your List Using ASP.NET Atlas PageNavigator Control
  4. Sys.UI.Data.SortBehavior: Sorting Your List Using ASP.NET Atlas SortBehavior
  5. Sys.UI.Data.XSLTView: Apply XSLT to XML Using ASP.NET Atlas XSLTView Control

This is the first post: Display Listible Data Using ASP.NET Atlas ListView Control.

You have to find a way to show user a table of data in most of the current web applications. Just like the ASP.NET GridView server control does, Atlas ListView control provides the same behavior on client side in the AJAX way. Though you can use traditional ASP.NET GridView server control and then simply add an Atlas UpdatePanel to let you GridView work in AJAX way, but this is low efficient and not the ‘pure’ Atlas way. You may need to use the full client side Atlas control ListView to make it better. Do not be afraid, this is just as simple as the GridView with similar concepts such as ItemTemplate, but keep in mind there’s no IntelliSence provided by the IDE so you must pay more attention on typing the code.


To use a ListView, you have to provide Atlas some templates to let Atlas know how to render your content. There are several templates you can use:

  1. layoutTemplate: This template is used for rendering the list container (e.g., use a <table> tag), header (e.g., use a <thead> tag) and footer. You must specify a layoutTemplate for a ListView. This template must contain an itemTemplate, and may contain a separatorTemplate.
  2. itemTemplate: This template is used for rendering a single item in the list (e.g., use a <tr> tag). It must be contained in the layoutTemplate.
  3. separatorTemplate: This template is used for rendering a separator between items in the list (e.g., use a <hr> tag). It must be contained in the layoutTemplate.
  4. emptyTemplate: This template is used for rendering an empty message if there’s no item in the data source, or the ListView is still waiting for the data from server.

There are also some properties you can use:

  1. itemCssClass: Specify the css class for items.
  2. alternatingItemCssClass: Specify the css class for alternating items.
  3. selectedItemCssClass: Specify the css class for selected items.
  4. separatorCssClass: Specify the css class for separators.
  5. itemTemplateParentElementId: This property defines the parent element of itemTemplate and separatorTemplate. So the items and separators can be repeated in this element (e.g., use a <tbody> tag).

Ok, let’s go though a demo to run a ListView.

Firstly, let’s expose a Web Service which returns a DataTable. Note we inherit from Microsoft.Web.Services.DataService and the service method is marked with Attribute DataObjectMethod which is in the name space System.ComponentModel. Also at the beginning of the service method, we use System.Threading.Thread.Sleep(2000) to simulate a 2 seconds network work round, so we can see the emptyTemplate for 2 seconds.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyService  : Microsoft.Web.Services.DataService {
 
    [DataObjectMethod(DataObjectMethodType.Select)]
    public DataTable GetListData()
    {
        System.Threading.Thread.Sleep(2000);
        
        DataTable dt = new DataTable("MyListData");
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Email", typeof(string));
        DataRow newRow;
        for (int i = 0; i < 5; ++i)
        {
            newRow = dt.NewRow();
            newRow["Name"] = string.Format("Dflying {0}", i);
            newRow["Email"] = string.Format("Dflying{0}@dflying.net", i);
            dt.Rows.Add(newRow);
        }
        return dt;
    }
}

Then, let’s start adding essential controls/tags to our ASP.NET page:

<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- Element for myList (container) -->
<div id="myList"></div>
<!-- Layout Elements -->
<div style="display: none;">
</div>

In the markups above, we’ve added three tags: A ScriptManager, which is required in Atlas pages. A <div> with id: myList, which is used for Atlas to place the ListView in this tag. A hidden <div>, which is used to define the templates. Tags in this section are invisible on the page, just used to provide Atlas the templates.

We should add the ListView templates in the template section above:

<!-- Layout Template -->
<table id="myList_layoutTemplate" border="1" cellpadding="3">
    <thead>
        <tr>
            <td><span>No.</span></td>
            <td><span>Name</span></td>
            <td><span>Email</span></td>
        </tr>
    </thead>
    <!-- Repeat Template -->
    <tbody id="myList_itemTemplateParent">
        <!-- Repeat Item Template -->
        <tr id="myList_itemTemplate">
            <td><span id="lblIndex" /></td>
            <td><span id="lblName" /></td>
            <td><span id="lblEmail" /></td>
        </tr>
        <!-- Separator Item Template -->
        <tr id="myList_separatorTemplate">
            <td colspan="3">Separator</td>
        </tr>
    </tbody>
</table>
<!-- Empty Template -->
<div id="myList_emptyTemplate">
    No Data
</div>

You may find all the four kinds of templates I mentioned above. Remember to add an id to each of the templates to let Atlas know in the following Atlas script. In this demo I just render the ListView as a table.

At last is the Atlas script also defined on the ASP.NET page:

<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
 
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
    <bindings>
        <binding dataContext="listDataSource" dataPath="data" property="data" />
    </bindings>
    <layoutTemplate>
        <template layoutElement="myList_layoutTemplate" />
    </layoutTemplate>
    <itemTemplate>
        <template layoutElement="myList_itemTemplate">
            <label id="lblIndex">
                <bindings>
                    <binding dataPath="$index" transform="Add" property="text"/>
                </bindings>
            </label>
            <label id="lblName">
                <bindings>
                    <binding dataPath="Name" property="text" />    
                </bindings>
            </label>
            <label id="lblEmail">
                <bindings>
                    <binding dataPath="Email" property="text" />
                </bindings>
            </label>                    
        </template>
    </itemTemplate>
    <separatorTemplate>
        <template layoutElement="myList_separatorTemplate" />
    </separatorTemplate>
    <emptyTemplate>
        <template layoutElement="myList_emptyTemplate"/>
    </emptyTemplate>
</listView>

I’ve added an Atlas client side DataSource object in the script to get data from the Web Service, which I may introduce in other posts. Now let’s look at the ListView script. At the definition of ListView, we specified the itemTemplateParentElementId attribute. Then in the ListView, we defined the binding section to bind this ListView to the DataSource and the four kinds of templates. Each of these template sections is assigned an attribute layoutElement to point to our templates id defined above. Note the first label in the layoutTemplate, where we added an ‘Add’ transformer to the binding which may add a number (default is 1) to the incoming binding value, to show the entry number.

Done! Test in browser:

Loading:

Loaded:

Posted in Atlas. Comment: (2). Trackbacks:(389). Permalink
«Next post | Previous post»

Referers

Comments

  1. 1. xing7514  |  04/16,2006 at 19:35

    hello,how are you!

  2. 2. Daniel  |  09/20,2006 at 08:28

    great job.

    But, if I need to load the data with a dynamic parameter?

    For example: the url to the page is: /ListClients.aspx?countryID=2

    and it must load all clients of that country. But there is a DropDown with other countries and the list of clients will be updated on dropdowns change...

    any ideas?

    thanks

Leave a Reply

Auth Image