使用ASP.NET Atlas ListView控制項顯示清單數據

作者：Eve Cole 更新時間：2009-06-30 16:12:55

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.ListViewViewView. ：使用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" />

<div id="myList"></div>

<div style="display: none;">
</div>
在上面的標記中，我們加入了三個標記：一個必須的ScriptManager控制項。一個id為myList的div，用來讓Atlas把渲染後的ListView放在這裡。一個隱藏的div，用來定義我們的模版。這個隱藏div中的元素在頁面上是不可見的，只是用來提供給Atlas必要的模版。

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

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

<tbody id="myList_itemTemplateParent">

<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>

<tr id="myList_separatorTemplate">
<td colspan="3">Separator</td>
</tr>
</tbody>
</table>

<div id="myList_emptyTemplate">
No Data
</div>

上面的程式碼中您可以看到我提到的所有四種模版。另外也要指定每一個模版一個id，將用於下面的Atlas腳本聲明中。在這個範例中我將以HTML Table的形式渲染這個ListView，很抱歉分隔元素將會很醜陋（一個空白行）。

最後在頁面中加入Atlas腳本聲明：

這裡我新增了一個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 ）。

大功告成，運行一下吧。