您的位置：首页 > 编程语言 > ASP

ASP.NET AJAX客户端编程之旅（五）——以组件的思想开发Ajax应用：行为、绑定及xml-script

2009-09-16 15:36 651 查看

ASP.NET AJAX客户端编程之旅（五）——以组件的思想开发Ajax应用：行为、绑定及xml-script

摘要

本文将首先介绍“行为组件”的意义和使用方法，然后介绍ASP.NET AJAX中一种重要的技术：绑定。最后向大家展示一种新的客户端编程模式：xml-script的使用方法，并使用这种开发方法重新编写绑定技术的例子。

初识行为组件

行为组件一词中的“行为”是从单词Behavior直译过来的。但是我个人认为，就其作用来说，应该叫“属性赋予组件”更合适一点。因为行为组件实际的作用是：为某一控件赋予某种属性。例如ClickBehavior是为某个控件添加“具有单击事件”这个属性，而OpacityBehavior则是为控件添加“透明显示”这一属性。所以，我各人觉得行为组件和“行为”关系不大，而主要是“属性赋予”。

行为组件发威-让DIV可以被Click

我们知道，div元素是没有onclick事件的，如果您的某个程序需要在单击某个div时产生一个事件，那肯定是要大费一番周折。而ASP.NET AJAX的ClickBehavior组件可以让我们轻松做到这一点。废话不多讲，直接看Demo。

我们要做这么一个例子：在页面中有一个DIV，当单击此DIV时，将使用alert语句弹出一个提示框，程序运行效果如下图：

[align=center]
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>Untitled Page</title>
7</head>
8<body>
9 <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div id="clickme">
<h1>点击我！！！</h1>
</div>
</div>
</form>
</body>
</html>[/align]

ajax.js:

1var lblClickMe;
2var behaviorClickMe;
3
4Sys.Application.add_init(onPageInit);
5
6function onPageInit()
7
function lblClickMe_onClick()

3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>Untitled Page</title>
7</head>
8<body>
9 <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<input id="checkboxHide" type="checkbox" /><span>显示/隐藏元素</span>
<div id="divElement">
<h1>DIV元素</h1>
</div>
</div>
</form>
</body>
</html>

ajax.js:

1var lblElement;
2var chkHide;
3var binding;
4
5Sys.Application.add_init(onPageInit);
6
7function onPageInit()
8
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>Untitled Page</title>
7
8
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<input id="checkboxHide" type="checkbox" /><span>显示/隐藏元素</span>
<div id="divElement">
<h1>DIV元素</h1>
</div>
</div>
</form>
</body>
</html>

我们删除了ajax.js文件，自然在这里也去掉了对它的引用。也就是说，现在程序里已经没有一行JavaScript代码了，但是运行程序看看，运行效果依然存在。那是怎么回事呢？注意<head>里面多了一段<script>代码，它的类型是xml-script，正是这段代码，代替原有的JavaScript代码完成了工作。其实，就做的事情来说，这段代码和ajax.js中的代码是完全等价的。也是先声明了两个控件，然后声明了一个绑定组件，并将相应属性绑定起来。所不同的是，这里用的不是JavaScript那种编程的方式，而是使用一种类似书写html代码的方式，将各个组件直接写在页面中。可以看到，相比JavaScript，这段脚本更加简洁，可读性也更好。由于其具有的良好自解释能力，即使是第一次接触xml- script的朋友，也可以不费力地读懂其中的意思。所以，在这里就不做过多解释。

由于xml-script还是没正式发布的技术，资料也非常少。所以，这里我不打算仔细讨论这项技术，而只是通过这个例子给大家一个直观性的认识。

结束语

我们回顾一下，这篇文章首先通过一个例子展示了行为组件的用法。然后又显示了绑定组件的威力，最后我们用一种新的脚本语言——xml-script重写了第二个例子，使其代码更加简洁。这里需要说明，因为xml-script目前还处于Preview阶段，微软官方并没有正式发布也没有提供详细的文档，所以目前学习的话，资料很少，最好的方法就是多读一些别人的源代码，自己揣摩。相信当xml-script成熟后，配套的官方文档和各种教程书籍也会随之而来，到时学习起来资料就丰富多了。下一篇中，我们将创建一个自定义控件，借此了解一下ASP.NET AJAX自定义客户端组件的方法。

本文的Demo可以在这里下载：BehaviorTest.rar BindingTest.rar XmlScriptTest.rar

主要参考文献

[1] 陈黎夫，ASP.NET AJAX程序设计-第II卷：客户端，人民邮电出版社，2007年10月

[2] ASP. NET AJAX Roadmap Documentation，http://www.asp.net/ajax/documentation/live

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航