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);
&nbs
p; 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）。
大功告成，運行一下吧。
