【IT168技术文档】
在目前的大部分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：指定项目条目的cssclass。
alternatingItemCssClass：指定间隔的项目条目的cssclass。
selectedItemCssClass：指定被选中的项目条目的cssclass。
separatorCssClass：指定分隔元素的cssclass。
itemTemplateParentElementId：这个属性指定了itemTemplate和separatorTemplate的父元素。这样itemTemplate和separatorTemplate元素就可以在其中被重复渲染。
ListView还有一些继承于Sys.UI.Data.DataControl基类的方法/属性，因为在下面的代码中我们不需要使用，这里暂且略过。如果您感兴趣。我们通过一个实例来说明如何使用ListView控件。
首先，我们编写一个返回.NET中DataTable的WebService。注意到在这里将继承于Microsoft.Web.Services.DataService基类，并且为service方法加上定义在名称空间System.ComponentModel中的属性DataObjectMethod。在service方法的开头，我们使用System.Threading.Thread.Sleep(2000)来模拟2秒钟的网络延迟，以便可以看到emptyTemplate中的内容。
[WebService(Namespace="http://name.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
publicclassMyService:Microsoft.Web.Services.DataService{
[DataObjectMethod(DataObjectMethodType.Select)]
publicDataTableGetListData()
{
System.Threading.Thread.Sleep(2000);
DataTabledt=newDataTable("MyListData");
dt.Columns.Add("Name",typeof(string));
dt.Columns.Add("Email",typeof(string));
DataRownewRow;
for(inti=0;i<5;++i)
{
newRow=dt.NewRow();
newRow["Name"]=string.Format("name{0}",i);
newRow["Email"]=string.Format("name{0}@name.net",i);
dt.Rows.Add(newRow);
}
returndt;
}
}
然后，添加一些ASP.NET页面中必须的控件/标记：
<atlas:ScriptManagerID="ScriptManager1"runat="server"/>
<!--ElementformyList(container)-->
<divid="myList"></div>
<!--LayoutElements-->
<divstyle="display:none;">
</div>
在上面的标记中，我们加入了三个标记：一个必须的ScriptManager控件。一个id为myList的div，用来让Atlas把渲染后的ListView放置于这里。一个隐藏的div，用于定义我们的模版。这个隐藏div中的元素在页面上是不可见的，只是用来提供给Atlas必要的模版。
我们在这个隐藏的div中加入如下ListView的模版：
<!--LayoutTemplate-->
<tableid="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>
<!--RepeatTemplate-->
<tbodyid="myList_itemTemplateParent">
<!--RepeatItemTemplate-->
<trid="myList_itemTemplate">
<td><spanid="lblIndex"/></td>
<td><spanid="lblName"/></td>
<td><spanid="lblEmail"/></td>
</tr>
<!--SeparatorItemTemplate-->
<trid="myList_separatorTemplate">
<tdcolspan="3">Separator</td>
</tr>
</tbody>
</table>
<!--EmptyTemplate-->
<divid="myList_emptyTemplate">
NoData
</div>
上面的代码中您可以看到我提到的所有四种模版。另外还要指定每一个模版一个id，将用于下面的Atlas脚本声明中。在这个例子中我将以HTMLTable的形式渲染这个ListView。
最后在页面中添加Atlas脚本声明：
<dataSourceid="listDataSource"autoLoad="true"serviceURL="MyService.asmx"/>
<listViewid="myList"itemTemplateParentElementId="myList_itemTemplateParent">
<bindings>
<bindingdataContext="listDataSource"dataPath="data"property="data"/>
</bindings>
<layoutTemplate>
<templatelayoutElement="myList_layoutTemplate"/>
</layoutTemplate>
<itemTemplate>
<templatelayoutElement="myList_itemTemplate">
<labelid="lblIndex">
<bindings>
<bindingdataPath="$index"transform="Add"property="text"/>
</bindings>
</label>
<labelid="lblName">
<bindings>
<bindingdataPath="Name"property="text"/>
</bindings>
</label>
<labelid="lblEmail">
<bindings>
<bindingdataPath="Email"property="text"/>
</bindings>
</label>
</template>
</itemTemplate>
<separatorTemplate>
<templatelayoutElement="myList_separatorTemplate"/>
</separatorTemplate>
<emptyTemplate>
<templatelayoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
这里我添加了一个Atlas客户端DataSource对象以从WebService中取得数据。这里我们暂且不多谈DataSource（可能在后续文章中有所介绍）。让我们来看一下ListView相关的定义：在ListView的定义中，我们指定了itemTemplateParentElementId属性。然后在ListView的内部定义了一个binding段，用来把DataSource中取得的数据与这个ListView绑定起来。我们还定义了四个模版段，每个模版段都用layoutElement与上面定义过的四种模版关联。注意到在layoutTemplate模版中的第一个label控件，我们在其绑定中指定了一个Addtransformer以将从0开始的顺序变为从1开始。
完成了，运行即可。
