使用ASP.NET Atlas ListView控件显示列表数据
点击次数：22 次 发布日期：2008-11-26 12:45:49 作者：源代码网
|
源代码网推荐 源代码网推荐 在这个系列中，我将介绍一些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); 源代码网推荐 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）。 源代码网推荐 源代码网推荐 大功告成，运行一下吧。 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
