随笔-312  评论-11831  文章-2  trackbacks-216
English Version: http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html

 

在这个系列中,我将介绍一些Atlas Sys.UI.Data中较高级的控件,包括:

    1. Sys.UI.Data.ListView使用ASP.NET Atlas ListView控件显示列表数据
    2. Sys.UI.Data.ItemView使用ASP.NET Atlas ItemView控件显示集合中的单个数据
    3. Sys.UI.Data.DataNavigator使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航 
    4. Sys.UI.Data.SortBehavior使用ASP.NET Atlas SortBehavior实现客户端排序
    5. Sys.UI.Data.XSLTView使用ASP.NET Atlas XSLTView控件用XSLT修饰并显示XML数据
    这篇是其中的第三篇:使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航

    把所有的记录统统放在一个页面上绝对不是一个好主意,特别是当您有成百上千条记录时。您的用户需要不停的拖动滚动条,甚至使用Control+F来找到所期待的内容,这将带来相当差的用户体验。这时,将数据以分页的方式显示给用户将友好的多。 一些ASP.NET服务器端控件拥有内建的分页及页面导航功能,例如DataGrid和GridView。同样的,Atlas客户端控件Sys.UI.Data.DataNavigator也提供了类似的功能,这将大大提高我们的开发效率。

    DataNavigator控件将与DataView(请参考:Atlas命名空间Sys.Data下控件介绍——DataView和DataFilter )控件一起工作。我们知道DataView控件没有提供页面导航相关方法,所以我们只能直接设置它的pageIndex属性来实现导航。虽然没有什么难度,但很多情况下这并不是一个好办法,因为像我这样好多粗心的开发者往往会忘记检查pageIndex的边界值,造成不必要的麻烦。这也是Atlas要提供DataNavigator控件的原因之一,DataNavigator控件将作为一个DataView控件的代理(proxy),提供易用的页面导航接口。

    DataNavigator对象只有一个属性:

    1. dataView:对某个DataView对象的引用,这个DataNavigator将把页面导航的操作应用到其上。您应该总是指定这个属性。

    另外,要使用DataNavigator控件,您还需要提供一些拥有一些指定commandName属性的Atlas Button,以触发相应的页面导航操作。这些Button的parent属性应该设定为此DataNavigator控件,以保证DataNavigator能够捕获到这些Button发出的命令。

    您可以指定您的Button的commandName属性为如下五个string,每个都有不同的含义:

    1. page:将当前页面索引转为命令参数(command argument)中指定的值。通过这个命令我们可以快速的改变页面的索引。
    2. nextpage:切换到下一页(如果存在下一页)。
    3. previouspage:切换到上一页(如果存在上一页)。
    4. firstpage:切换到第一页。
    5. lastpage:切换到最后一页。

    OK,MSDN般枯燥的介绍到此为止吧,让我们通过一个实例来熟悉DataNavigator的使用方法。

    首先我们需要暴露一个Web Service,以便Atlas页面使用。该Web Service将返回100条记录。下面就是这个Web Service的代码,非常易于理解,这里不赘。

    Web Service

    然后,在ASPX页面中我们需要考虑并定义如下四部分的内容:

    1. 一个ScriptManager控件,用来包含页面必须的Atlas Framework相关脚本文件。通常情况下,这也是每个Atlas页面必须包含的。
    2. 一个占位(place holder)的div(id为dataContents,见代码)。Atlas将会把渲染后的分页的ListView放置于此。
    3. 一个作为容器的div(DataNavigator控件),以及其中包含的一组按钮(命令按钮),用来实现页面导航功能。
    4. 一个隐藏的div,用来放置ListView的模版。

    下面是以上四部分内容的代码,关于ListView控件的模版,请参考我的这篇文章:使用ASP.NET Atlas ListView控件显示列表数据

     

    <!-- ScriptManager -->
    <atlas:ScriptManager runat="server" ID="scriptManager" />

    <!-- Element for paged ListView (container) -->
    <div id="dataContents">
    </div>

    <!-- PageNavigator -->
    <div id="pageNavigator">
        
    <input type="button" id="btnFirstPage" value="&lt;&lt;" />
        
    <input type="button" id="btnPrevPage" value="&lt;" />
        
    <span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
        
    <input type="button" id="btnNextPage" value="&gt;" />
        
    <input type="button" id="btnLastPage" value="&gt;&gt;" />
    </div>

    <!-- Templates -->
    <div style="visibility: hidden; display: none">
        
    <table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
            
    <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>
            
    </tbody>
        
    </table>
        
    <!-- Empty Template -->
        
    <div id="myList_emptyTemplate">
            No Data
        
    </div>
    </div>

    最后该书写Atlas的XML脚本定义了,有如下五个部分:

    第一部分:Atlas客户端控件DataSource,用来从我们上面定义的Web Service中取得数据。

    <dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />

    第二部分:一个DataView控件(请参考:Atlas命名空间Sys.Data下控件介绍——DataView和DataFilter ),用来将第一部分中取得的那100条数据分页。

    <dataView id="view" pageSize="12">
        
    <bindings>
            
    <binding dataContext="dataSource" dataPath="data" property="data" />
        
    </bindings>
    </dataView>

    第三部分:一个ListView控件(请参考: 使用ASP.NET Atlas ListView控件显示列表数据 ) , 用于显示分页好的数据。

    <listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
        
    <bindings>
            
    <binding dataContext="view" dataPath="filteredData" 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>
        
    <emptyTemplate>
            
    <template layoutElement="myList_emptyTemplate"/>
        
    </emptyTemplate>
    </listView>

    第四部分: DataNavigator控件以及命令按钮。注意到这里我们有四个按钮,每一个都有不同的commandName属性,也分别对应着DataNavigator对DataView的一种操作。同时这些按钮的parent属性都设置成了这个DataNavigator对象。

    <dataNavigator id="pageNavigator" dataView="view"/>
    <button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
    <button id="btnPrevPage" parent="pageNavigator" command="PreviousPage">
        
    <bindings>
            
    <binding property="enabled" dataPath="hasPreviousPage"/>
        
    </bindings>
    </button>
    <button id="btnNextPage" parent="pageNavigator" command="NextPage">
        
    <bindings>
            
    <binding property="enabled" dataPath="hasNextPage"/>
        
    </bindings>
    </button>
    <button id="btnLastPage" parent="pageNavigator" command="LastPage" />

    第五部分:两个Label,分别显示页面总数以及当前页的序号。

    <label id="lblPageNumber">
        
    <bindings>
            
    <binding dataContext="view" property="text" dataPath="pageIndex" transform="Add"/>
        
    </bindings>
    </label>
    <label id="lblPageCount">
        
    <bindings>
            
    <binding dataContext="view" property="text" dataPath="pageCount"/>
        
    </bindings>
    </label>

    OK,在浏览器中测试一下:


    这个DEMO的源文件可以在此下载:http://files.cnblogs.com/dflying/DataNavigatorDemo.zip

    posted on 2006-04-18 15:55 Dflying Chen 阅读(4159) 评论(28)  编辑 收藏 所属分类: ASP.NET AJAX (Atlas)

    评论:
    #1楼  2006-04-19 10:18 | 随风飘散      
    不错,收藏
      回复  引用  查看    
    #2楼 [楼主] 2006-04-19 10:23 | Dflying Chen      
    @随风飘散
    -_-
      回复  引用  查看    
    #3楼  2006-05-24 11:13 | lfzx_1227 [未注册用户]
    很受用!
      回复  引用    
    #4楼 [楼主] 2006-05-24 15:38 | Dflying Chen      
    @lfzx_1227
    呵呵,这东西会被慢慢重视起来的
      回复  引用  查看    
    #5楼  2006-05-29 17:38 | 李.net      
    我在做分页的时候,有数据了,是一行一行下来的
    没有连贯性,第一次还好,但当我点击分页按钮时,也是从上到下一行一行的出现,感觉不好,有没有一种方法,我不要一行一行的下来,在数据没有全部读出来之前 我就提示数据加载中,等全部读出来了,再显示全部数据,可行不?
      回复  引用  查看    
    #6楼 [楼主] 2006-05-29 18:11 | Dflying Chen      
    @李.net
    恩,这个是Render的问题,我还没仔细研究过……找时间看看吧
      回复  引用  查看    
    #7楼  2006-06-26 19:57 | 阿不      
    学习了。
      回复  引用  查看    
    #8楼  2006-06-26 19:58 | 阿不      
    这里的分页也是到客户端才分页的?能不能做到类似于ObjectDataSource的分页的方式?每次只读一页数据?
      回复  引用  查看    
    #9楼  2006-06-26 19:59 | 阿不      
    提了个问题,继续往下。
      回复  引用  查看    
    #10楼 [楼主] 2006-07-04 16:21 | Dflying Chen      
    @阿不
    当然可以了,需要继承并自定义ObjectDataSourc的某些行为。
      回复  引用  查看    
    #11楼 [楼主] 2006-07-04 16:21 | Dflying Chen      
    @阿不
    什么问题?
      回复  引用  查看    
    #12楼  2006-07-31 09:58 | zitiger      
    DataNavigator是返回所有数据,然后在客户端分页的吗?

      回复  引用  查看    
    #13楼 [楼主] 2006-08-05 09:10 | Dflying Chen      
    @zitiger
    是的,当然可以自行设计,只返回一部分的数据
      回复  引用  查看    
    #14楼  2006-08-18 09:47 | spiderNet      
    问一个对您来说是很菜的问题:
    在您的web service 中的开头命名空间引用代码
    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.IO;
    using System.Web;
    using System.Web.Caching;
    using System.Web.Services;
    using System.Web.Services.Protocols;
    using Microsoft.Web.Services;
    您是如何确定需要填写哪些引用的呢?
      回复  引用  查看    
    #15楼 [楼主] 2006-08-26 13:35 | Dflying Chen      
    @spiderNet
    有一些是VS自动添加的,其中自行添加的部分在MSDN上均有介绍。
      回复  引用  查看    
    #16楼  2006-09-11 18:19 | 111[匿名] [未注册用户]
    怎样从数据库读取数据呢?
      回复  引用    
    #17楼  2006-09-11 18:20 | 111[匿名] [未注册用户]
    没说明白,我是说从数据库读取数据然后分页显示。我把webservice的内容改写成从数据库读取可运行时数据不显示!怎么回事?
      回复  引用    
    #18楼 [楼主] 2006-09-11 19:00 | Dflying Chen      
    @111[匿名]
    您可以随便采用任何方法读取数据阿?
      回复  引用  查看    
    #19楼  2006-09-12 09:16 | 111[匿名] [未注册用户]
    大侠能否给个从数据库读取数据然后分页的实例?我把webservice改为从数据库读取后运行显示“No Data”由于客户端脚本无法调试,我也不知错误出在哪里。如果不能从数据库读取就没有实际价值了,请大侠帮忙!
      回复  引用    
    #20楼  2006-09-13 14:13 | 111[匿名] [未注册用户]
    大侠怎么不回答啊?
      回复  引用    
    #21楼 [楼主] 2006-09-14 20:34 | Dflying Chen      
    @111[匿名]
    您直接在浏览器中测试一下Web Service可以么?
    不好意思这两天比较忙……
      回复  引用  查看    
    #22楼  2006-10-17 11:17 | Evila [未注册用户]
    在写客户端脚本时,用的都是类似XML的ATLAS脚本块,请问下是不是这种写法是不是更流行?
      回复  引用    
    #23楼 [楼主] 2006-10-18 22:00 | Dflying Chen      
    @Evila
    是啊,这种就是所谓“声明式语法”,非常简洁的。
      回复  引用  查看    
    #24楼  2006-11-08 10:02 | sdf [未注册用户]
    sdf
      回复  引用    
    #25楼  2006-11-08 10:04 | sdf [未注册用户]
    fd
      回复  引用    
    #26楼  2006-11-08 10:04 | sdf [未注册用户]
    @sdf
    g
      回复  引用    
    #27楼 [楼主] 2006-11-08 23:39 | Dflying Chen      
    @sdf
    ??
      回复  引用  查看    

    标题  
    姓名  
    主页
    Email (只有博主才能看到) 
    验证码 *  看不清,换一张 [登录][注册]
    内容(请不要发表任何与政治相关的内容)  
      登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
    该文被作者在 2006-05-09 11:59 编辑过
     
    另存  打印