english version: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html

在這個系列中，我將介紹一些atlas sys.ui.data中較高級的控件，包括：

sys.ui.data.listview：使用asp.net atlas listview控件顯示列表數據
sys.ui.data.itemview：待續
sys.ui.data.datanavigator：待續
sys.ui.data.xsltview：待續
這篇是其中的第一篇：使用asp.net atlas listview控件顯示列表數據

在目前的大部分web程序中，我們都需要顯示給用戶一些列表數據。asp.net中的gridview服務器控件提供了這種功能，atlas中的客戶端控件listview也可以在客戶端提供類似功能，并以ajax方式運行。雖然您可以使用傳統的gridview控件加上atlas的updatepanel提供同樣的ajax運行方式，但是這種實現方式較低效，也不是“純粹”的atlas方法。推薦的方法是采用atlas的客戶端控件listview來代替。不要擔心，atlas的listview控件和gridview一樣簡單，而其二者在很多概念方面是相似的，例如itemtemplate。但是需要注意的是目前ide中并沒有提供對atlas腳本的智能感知功能，加之atlas腳本也沒有編譯時期檢查，所以在書寫代碼的時候應該格外小心。

使用listview的時候應該提供給其一些必要的模版（template），以告訴atlas應該如何渲染您的內容。listview中有如下模版：

layouttemplate：這個模版用來渲染包含列表項目的容器（例如使用<table>標記），列表的頭部（例如使用<thead>標記），尾部等。您必須為listview指定一個layouttemplate。而且這個模版必須包含一個itemtemplate模版，也可選包含一個separatortemplate模版。
itemtemplate：這個模版用來渲染列表中的一個項目（例如使用<tr>標記）。這個模版必須被置于layouttemplate中。
separatortemplate：這個模版用來渲染列表中的項目之間的分隔元素（例如使用<hr>標記）。這個模版必須被置于layouttemplate中。
emptytemplate.：這個模版用來渲染沒有項目存在時的listview。此時可能與該listview相關的datasource對象中沒有項目，或是正在從服務器中取得的過程中。
listview中還有一些屬性：

itemcssclass：指定項目條目的css class。
alternatingitemcssclass：指定間隔的項目條目的css class。
selecteditemcssclass：指定被選中的項目條目的css class。
separatorcssclass：指定分隔元素的css class。
itemtemplateparentelementid：這個屬性指定了itemtemplate和separatortemplate的父元素。這樣itemtemplate和separatortemplate元素就可以在其中被重復渲染。
ok，讓我們通過一個實例來說明如何使用listview控件：

首先，我們編寫一個返回.net中datatable的web service。注意到在這里將繼承于microsoft.web.services.dataservice基類，并且為service方法加上定義在名稱空間system.componentmodel中的屬性dataobjectmethod。在service方法的開頭，我們使用system.threading.thread.sleep(2000)來模擬2秒鐘的網絡延遲，以便可以看到emptytemplate中的內容。

[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;
    }
}

然后，添加一些asp.net頁面中必須的控件/標記： <atlas:scriptmanager id="scriptmanager1" runat="server" />
<!-- element for mylist (container) -->
<div id="mylist"></div>
<!-- layout elements -->
<div >
</div>
在上面的標記中，我們加入了三個標記：一個必須的scriptmanager控件。一個id為mylist的div，用來讓atlas把渲染后的listview放置于這里。一個隱藏的div，用于定義我們的模版。這個隱藏div中的元素在頁面上是不可見的，只是用來提供給atlas必要的模版。

我們在這個隱藏的div中加入如下listview的模版：

<!-- 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>

上面的代碼中您可以看到我提到的所有四種模版。另外還要指定每一個模版一個id，將用于下面的atlas腳本聲明中。在這個例子中我將以html table的形式渲染這個listview，很抱歉分隔元素將會很丑陋（一個空行）。

最后在頁面中添加atlas腳本聲明：

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

這里我添加了一個atlas客戶端datasource對象以從web service中取得數據。這里我們暫且不多談datasource（可能在后續文章中有所介紹）。讓我們來看一下listview相關的定義：在listview的定義中，我們指定了itemtemplateparentelementid屬性。然后在listview的內部定義了一個binding段，用來把datasource中取得的數據與這個listview綁定起來。我們還定義了四個模版段，每個模版段都用layoutelement與上面定義過的四種模版關聯。注意到在layouttemplate模版中的第一個label控件，我們在其綁定中指定了一個add transformer以將從0開始的順序變為從1開始（關于atlas transformer，請參考我的這篇文章：http://dflying.cnblogs.com/archive/2006/04/05/367908.html）。

大功告成，運行一下吧。