• 丰搜首页
• 文档中心
• 视频中心
• 丰搜贴吧
• 问题集锦
• 更多功能

选择显示字体大小

• 最大
• 较大
• 标准

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中有如下模版：

1. layouttemplate：这个模版用来渲染包含列表项目的容器（例如使用 ＜table＞标记），列表的头部（例如使用 ＜thead＞标记），尾部等。您必须为listview指定一个layouttemplate。而且这个模版必须包含一个itemtemplate模版，也可选包含一个separatortemplate模版。
2. itemtemplate：这个模版用来渲染列表中的一个项目（例如使用 ＜tr＞标记）。这个模版必须被置于layouttemplate中。
3. separatortemplate：这个模版用来渲染列表中的项目之间的分隔元素（例如使用 ＜hr＞标记）。这个模版必须被置于layouttemplate中。
4. emptytemplate.：这个模版用来渲染没有项目存在时的listview。此时可能与该listview相关的datasource对象中没有项目，或是正在从服务器中取得的过程中。

　　listview中还有一些属性：

1. itemcssclass：指定项目条目的css class。
2. alternatingitemcssclass：指定间隔的项目条目的css class。
3. selecteditemcssclass：指定被选中的项目条目的css class。
4. separatorcssclass：指定分隔元素的css class。
5. itemtemplateparentelementid：这个属性指定了itemtemplate和separatortemplate的父元素。这样itemtemplate和separatortemplate元素就可以在其中被重复渲染。

　　listview还有一些继承于sys.ui.data.datacontrol基类的方法/属性，因为在下面的代码中我们不需要使用，这里暂且略过。如果您感兴趣。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" /＞
＜!-- 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中取得数据。这里我们暂且不多谈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）。

　　大功告成，运行一下吧。

　　装载中：



装载完成：

 

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

标准 网站致力的规范