Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)delvpublished in(发表于) 2014/1/6 8:48:43 ASP.NET,Atlas,ListView显示列表数据_[Asp.Net教程]
在上面的标记中,我们加入了三个标记:一个必须的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)。 大功告成,运行一下吧。 装载中:装载完成:
赞