Chinaunix首页 | 论坛 | 博客
  • 博客访问: 69370
  • 博文数量: 65
  • 博客积分: 1410
  • 博客等级: 上尉
  • 技术积分: 658
  • 用 户 组: 普通用户
  • 注册时间: 2009-06-10 13:01
文章分类
文章存档

2011年(1)

2009年(64)

我的朋友

分类: 系统运维

2009-06-15 16:14:19

 Sys.UI.DataView

  为了解决展示数据的问题,我们需要用到一个全新的客户端控件,那就是Sys.UI.DataView了,简称DataView。我们会用DataView替换掉上一篇文章中所说到的人手拼接Html的部分,用于迭代生成一个ul中的li元素,因此看起来是把DataView当作Repeater来用。实际上,DataView的功能类似于ListView加上DetailsView。

  如果你把一个Array绑定到DataView上,它会显示为一个ListView。与ListView的LayoutTemplate相类似 的是,它也能够定义控件展示的整体布局,并且仅仅是迭代输出其中的一小部分。例如说,编写一个有thead的table,并且仅仅是迭代输出thead之 后的tr。在这方面,是DataView和ListView完全一致的。唯一不同的是,客户端暂时还没有DataPager这样的控件,所以 DataView必须一次性的完整显示整个Array的数据。

  如果你把单个Object绑定到DataView上,它就会显示为一个DetailsView。这使得你可以使用两个DetailsView就做出经典的Master-Details展示模式,和在服务器端分别用ListView和DetailsView做出来的一样。当然,你不能指望DataView能够好像DetailsView那样,自动帮你分析每一 个数据项并映射出对应的HTML模板,因此HTML模板还是要你自己手写的,但至少那是在HTML中编写模板,编写时能够享受IDE带来的各种好处,维护 时也更容易看懂自己(或别人)原来写下的HTML。

  JavaScript语法

  接下来,我们就要把DataView投入到实际应用中去了。首先,我们说一下如何用JavaScript来实例化一个DataView。有编写asp.net AJAX客户端代码经验的人对$create应该不会觉得陌生,因为DataView继承自Sys.UI.Control,我们仍然可以用$create来实例化它。不过,在此之前,我们先要把对应的HTML编写好:


     

  •     {{ Award }}
        {{ Winner }}
        {{ Film }}
     

  然后我们就可以基于itemTemplate这个HTML元素创建控件了:

$create(Sys.UI.DataView, {
    dataSource: new Sys.Data.AdoDataSource(),
    serviceUri: "webDataService.svc",
    query: "OscarWinners"
  }, {}, {}, $get("itemTemplate"));

  现在,页面显示出来的结果和之前我们人手拼接HTML的版本完全一致,不过我们已经不在需要维护嵌入在JavaScript中的HTML代码了。

  声明性语法

  如果你觉得上面的做法还不够好,要在pageLoad()里面写一个$create,那么声明性语法可能正是你需要的。大家应该记得很久很久之 前,在ASP.NET AJAX还叫做Atlas的时候,就已经有过声明性语法的设计,那就是xml-script。不知为何,后来microsoft放弃了这一设计,现在声明性语法又回来了,而且设计得比以前的xml-script还要更好。假如不用$create的话,通过声明性语法实例化一个DataView仅需要这样做:

  xmlns:sys="javascript:Sys"
  xmlns:dataView="javascript:Sys.UI.DataView"
  sys:activate="*">
 

        sys:attach="dataView"
        dataView:datasource="{{ new Sys.Data.AdoNetDataSource() }}"
        dataView:serviceuri="WebDataService.svc"
        dataView:query="OscarWinners">
       

  •       {{ Award }}
          {{ Winner }}
          {{ Film }}
       

  •  

  我们所需要更改的代码包括:

  在body元素上声明有关的xmlns,将JavaScript中的名字空间映射到HTML上,或者你可以理解为映射到XML/XHTML上。
  通过sys:activate="*"这个声明,让ASP.NET AJAX知道它需要去解释页面上所有的声明性语法,并激活对应的组件。
  将原本使用$create初始化时传递给实例的属性、事件、引用改为用声明性语法,直接写在HTML元素的定义上。
  经过这三步,我们就可以将原来使用$create创建的组件改为使用声明性语法创建了。

  小结

  DataView使得我们能够使用HTML模板,来避免手工拼接HTML带来的种种问题,同时声明性语法让我们能够如同声明服务器端控件一样声 明客户端组件。虽然在ASP.NET AJAX 4.0 Preview 3中这些功能仍有小bug,例如我想用声明性语法创建我自己编写的InPlaceEditoBehavior,这在初始化阶段毫无问题,但却会在页面卸载 销毁对象之时抛出脚本错误。

  由于我觉得ASP.NET AJAX 4.0 Preview 4很快就要出来了,所以我也就不准备去深入研究Preview 3了,等Preview 4出来了再去好好看看源代码。如果你有兴趣关注这方面的技术文章,欢迎订阅我的博客,点击侧栏上的订阅链接就可以了。

阅读(340) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~