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控件顯示列表數(shù)據(jù)
Sys.UI.Data.ItemView：待續(xù)
Sys.UI.Data.DataNavigator：待續(xù)
Sys.UI.Data.XSLTView：待續(xù)
這篇是其中的第一篇：使用ASP.NET Atlas ListView控件顯示列表數(shù)據(jù)

在目前的大部分Web程序中，我們都需要顯示給用戶一些列表數(shù)據(jù)。ASP.NET中的GridView服務(wù)器控件提供了這種功能，Atlas中的客戶端控件ListView也可以在客戶端提供類似功能，并以Ajax方式運行。雖然您可以使用傳統(tǒng)的GridView控件加上Atlas的UpdatePanel提供同樣的AJAX運行方式，但是這種實現(xiàn)方式較低效，也不是“純粹”的Atlas方法。推薦的方法是采用Atlas的客戶端控件ListView來代替。不要擔心，Atlas的ListView控件和GridView一樣簡單，而其二者在很多概念方面是相似的，例如ItemTemplate。但是需要注意的是目前IDE中并沒有提供對Atlas腳本的智能感知功能，加之Atlas腳本也沒有編譯時期檢查，所以在書寫代碼的時候應(yīng)該格外小心。

使用ListView的時候應(yīng)該提供給其一些必要的模版（Template），以告訴Atlas應(yīng)該如何渲染您的內(nèi)容。ListView中有如下模版：

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

itemCSSClass：指定項目條目的css class。
alternatingItemCssClass：指定間隔的項目條目的css class。
selectedItemCssClass：指定被選中的項目條目的css class。
separatorCssClass：指定分隔元素的css class。
itemTemplateParentElementId：這個屬性指定了itemTemplate和separatorTemplate的父元素。這樣itemTemplate和separatorTemplate元素就可以在其中被重復(fù)渲染。
OK，讓我們通過一個實例來說明如何使用ListView控件：

首先，我們編寫一個返回.NET中DataTable的Web Service。注意到在這里將繼承于Microsoft.Web.Services.DataService基類，并且為service方法加上定義在名稱空間System.ComponentModel中的屬性DataObjectMethod。在service方法的開頭，我們使用System.Threading.Thread.Sleep(2000)來模擬2秒鐘的網(wǎng)絡(luò)延遲，以便可以看到emptyTemplate中的內(nèi)容。

[WebService(Namespace = "[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 style="display: none;">
</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中取得數(shù)據(jù)。這里我們暫且不多談DataSource（可能在后續(xù)文章中有所介紹）。讓我們來看一下ListView相關(guān)的定義：在ListView的定義中，我們指定了itemTemplateParentElementId屬性。然后在ListView的內(nèi)部定義了一個binding段，用來把DataSource中取得的數(shù)據(jù)與這個ListView綁定起來。我們還定義了四個模版段，每個模版段都用layoutElement與上面定義過的四種模版關(guān)聯(lián)。注意到在layoutTemplate模版中的第一個label控件，我們在其綁定中指定了一個Add transformer以將從0開始的順序變?yōu)閺?開始（關(guān)于Atlas Transformer，請參考我的這篇文章：http://dflying.VEVb.com/archive/2006/04/05/367908.html）。

大功告成，運行一下吧。