当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 利用ASP.NET和AJAX解决手工拼接HTML问题

ASP.NET
blog程序新版本V2.0 Beta完成,提供V1.0全部源码下载
“/”应用程序中的服务器错误
asp.net(c#)复数类(复数加减乘除四则运算)
asp.net(c#)不可访问，因为它受保护级别限制
asp.net(c#) 水仙花数
ASP.NET实现用图片进度条显示投票结果
asp.net(c#) MS AJAX的安装
asp.net(c#)有关 Session 操作的几个误区
ASP.net基础知识之常见错误分析
[.net] 操纵自如-页面内的配合与通信
c# static的全部用法收集整理
使CheckBoxList的Attributes属性生效（修改微软的一个bug）
在ASP.NET中使用Session常见问题集锦
[原创]完美解决Could not load file or assembly ''AjaxPro.2'' or one of its dependencies. 拒绝访问。
在Apache环境下成功的运行ASP.NET的注意事项
ClickOnce DIY全自动更新下载升级的自我实现
asp.net jscript 一句话木马
在ASP.Net中实现flv视频转换的代码
将DataTable中的一行复制到另一个DataTable的方法
在DataTable中执行Select("条件")后，返回DataTable的方法

No. « 42 43 44 45 »

技术文章搜索

关键字

利用ASP.NET和AJAX解决手工拼接HTML问题

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 117 ::
收藏到网摘: n/a

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编写好：

然后我们就可以基于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仅需要这样做：

以下为引用的内容：

<body
xmlns:sys="javascript:Sys"
xmlns:dataView="javascript:Sys.UI.DataView"
sys:activate="*">
<ul id="itemTemplate" class="sysTemplate"
sys:attach="dataView"
dataView:datasource="{{ new Sys.Data.AdoNetDataSource() }}"
dataView:serviceuri="WebDataService.svc"
dataView:query="OscarWinners">
<li>
<span class="award">{{ Award }}</span>
<span class="winner">{{ Winner }}</span>
<span class="film">{{ Film }}</span>
</li>
</ul>
</body>

我们所需要更改的代码包括：在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出来了再去好好看看源代码。