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

ASP.NET
FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用方法
.NET 常用功能和代码小结
在 .NET Framework 2.0 中未处理的异常导致基于 ASP.NET 的应用程序意外退出
asp.net IList查询数据后格式化数据再绑定控件
asp.net sql存储过程
asp.net 简单实现禁用或启用页面中的某一类型的控件
asp.net(c#)获取内容第一张图片地址的函数
The remote procedure call failed and did not execute的解决办法
ASP.NET 在线文件管理
asp.net 读取并修改config文件实现代码
ASP.NET Cookie 操作实现
asp.net Silverlight中的模式窗体
Silverlight中动态获取Web Service地址
asp.net Silverlight应用程序中获取载体aspx页面参数
asp.net 水晶报表隔行换色实现方法
asp.net 获取Gridview隐藏列的值
手动把asp.net的类生成dll文件的方法
asp.net 使用ObjectDataSource控件在ASP.NET中实现Ajax真分页
动态指定任意类型的ObjectDataSource对象的查询参数
asp.net Md5的用法小结

No. « 164 165 166 167 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 85 ::
收藏到网摘: 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出来了再去好好看看源代码。