asp.net ajax xml-script教程（二）
概述在xml-script教程的第一部分（译者注：中文在这里）里我们介绍了类型描述符并且知道了如何看懂它们。在本文（第二部分）中我们将了解如何在声明代码里通过客户端控件处理事件。处理事件在教程的第一部分讨论类型描述符的时候，我们使用xml-script实例化有类型描述符的客户端组件。有了类的类型描述符，我们就知道如何使用xml-script创建一个实例。例如，Sys.Preview.UI.Butt
·
概述
在xml-script教程的 第一部分（译者注： 中文在这里）里我们介绍了类型描述符并且知道了如何看懂它们。在本文（第二部分）中我们将了解如何在声明代码里通过客户端控件处理事件。
处理事件
在教程的第一部分讨论类型描述符的时候，我们使用xml-script实例化有类型描述符的客户端组件。有了类的类型描述符，我们就知道如何使用xml-script创建一个实例。例如，Sys.Preview.UI.Button和Sys.Preview.UI.Label类包含在PreviewScript.js文件下，其暴露出的类型描述符如下：
Sys.Preview.UI.Button.descriptor = 
{
properties: [ { name: 'command', type: String },
{ name: 'argument', type: String } ],
events: [ { name: 'click' } ]
}
Sys.Preview.UI.Label.descriptor = {
properties: [ { name: 'htmlEncode', type: Boolean },
{ name: 'text', type: String } ]
}
在接下来的示例代码中包含了上述的所有描述符。这段代码是一段标准的xml-script代码块。创建了一个Button和一个Label实例，Button的click事件调用一段javascript函数，该函数用于在Label上显示一条信息。
<% @ Page %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head id ="Head1" runat ="server" >
< title > Hello XML-script </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< asp:ScriptManager ID ="TheScriptManager" runat ="server" >
< Scripts >
<asp:ScriptReference Assembly="Microsoft.Web.Preview"
Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" />
</ Scripts >
</ asp:ScriptManager >
< div >
< input type ="button" id ="btnSay" value ="Click Me" />
</ div >
< div >
< h1 >< span id ="lblHello" ></ span ></ h1 >
</ div >
< script type ="text/xml-script" >
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<components>
<label id="lblHello" />
<button id="btnSay" click="btnSay_click" />
</components>
</page>
</ script >
< script type ="text/javascript" >
<!--
function btnSay_click(evt) {
$find('lblHello').set_text('Hello XML-script!');
}
//-->
</ script >
</ form >
</ body >
</ html >
我们主要来看看页中xml-script代码，和在components节点下的一些元素。第一个是Label标签，它把一个客户端类型映射到了Sys.Preview.UI.Label实例，双方的映射是通过id属性来相关联的。第二个标签是button，通过id属性把相关联的客户端类型映射到了Sys.Preview.UI.Button实例。
button的click属性是我们感兴趣的部分，它的值是一个全局javascript函数的名字 - btnSay_click，该javascript函数写在后面的javascript代码块里。类型描述符中的一个事件被映射到了xml属性中的同名事件，这个属性的值就是用来处理该事件的javascript函数的名称。
让我们来看看第二种触发事件的方法 - 通过客户端控件。用下面这段代码取代上面的button标签。
< button id ="btnSay" >
< click >
< setPropertyAction target ="lblHello" property ="text"
value ="Hello XML-script!" />
</ click >
</ button >
现在运行这个页，它将做如代码改变之前一样的工作，这是怎么回事呢？
Actions
类型描述符中的事件可以用与事件名相同的名字作为xml标签而被解析。它包括一个或多个子元素用来调用action。
一个action就是一个内置了一个事件的执行逻辑的对象。在最后的那个例子中我们用一个被称作SetProperty的action来处理click事件。这个action实际上就是Sys.Preview.SetPropertyAction类的实例，它也有自己的一些类型描述符
Sys.Preview.SetPropertyAction.descriptor = {
properties: [ {name: 'property', type: String},
{name: 'propertyKey' },
{name: 'value', type: String} ]
}
你可以比较一下SetPropertyAction类和其相关的xml标签，事实上类的名字就映射到了相关的xml元素。xml中的target属性的值就是Lable控件的id，该Label控件的text属性将被更改。value属性的值就是设置Lable控件的text属性的值。
SetPropertyAction还有一个被称作propertyKey的类型描述符。它的作用是设置一些属性的子属性，下面就是一段示例代码，你可以用它替换掉原来的相关代码
< button id ="btnSay" >
< click >
< setPropertyAction target ="lblHello"
property ="text"
value ="Hello XML-script!" />
< setPropertyAction target ="lblHello"
property ="element"
propertyKey ="style.backgroundColor"
value ="#FFFF00" />
</ click >
</ button >
这样，我们就有两个action了。第一个action用于设置Lable的text属性，第二个action用户把Label的背景颜色设为黄色。第二个action的property属性设置成了“element”，它返回一个关联到Label的DOM（span标签）。我们通过get_的方式来取得属性，propertyKey属性包含了扩展属性，如果我们要访问style对象的backgroundColor属性的话，应该使用像下面这样的javascript语句
$find('lblHello').get_element().style.backgroundColor = '#FFFF00';
总结
xml-script允许通过声明代码实例化有类型描述符的客户端组件。它允许调用一段javascript函数，或者执行一个或多个action去处理事件。
在下一篇教程里，我们将继续讨论事件，并且介绍一下Microsoft Ajax Library里的其它一些内置action。
在xml-script教程的 第一部分（译者注： 中文在这里）里我们介绍了类型描述符并且知道了如何看懂它们。在本文（第二部分）中我们将了解如何在声明代码里通过客户端控件处理事件。
处理事件
在教程的第一部分讨论类型描述符的时候，我们使用xml-script实例化有类型描述符的客户端组件。有了类的类型描述符，我们就知道如何使用xml-script创建一个实例。例如，Sys.Preview.UI.Button和Sys.Preview.UI.Label类包含在PreviewScript.js文件下，其暴露出的类型描述符如下：
Sys.Preview.UI.Button.descriptor = { properties: [ { name: 'command', type: String }, { name: 'argument', type: String } ], events: [ { name: 'click' } ]} Sys.Preview.UI.Label.descriptor = { properties: [ { name: 'htmlEncode', type: Boolean }, { name: 'text', type: String } ]}
在接下来的示例代码中包含了上述的所有描述符。这段代码是一段标准的xml-script代码块。创建了一个Button和一个Label实例，Button的click事件调用一段javascript函数，该函数用于在Label上显示一条信息。
<% @ Page %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head id ="Head1" runat ="server" > < title > Hello XML-script </ title > </ head > < body > < form id ="form1" runat ="server" > < asp:ScriptManager ID ="TheScriptManager" runat ="server" > < Scripts > <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" /> </ Scripts > </ asp:ScriptManager > < div > < input type ="button" id ="btnSay" value ="Click Me" /> </ div > < div > < h1 >< span id ="lblHello" ></ span ></ h1 > </ div > < script type ="text/xml-script" > <page xmlns="http://schemas.microsoft.com/xml-script/2005"> <components> <label id="lblHello" /> <button id="btnSay" click="btnSay_click" /> </components> </page> </ script > < script type ="text/javascript" > <!-- function btnSay_click(evt) { $find('lblHello').set_text('Hello XML-script!'); } //--> </ script > </ form > </ body > </ html >
我们主要来看看页中xml-script代码，和在components节点下的一些元素。第一个是Label标签，它把一个客户端类型映射到了Sys.Preview.UI.Label实例，双方的映射是通过id属性来相关联的。第二个标签是button，通过id属性把相关联的客户端类型映射到了Sys.Preview.UI.Button实例。
button的click属性是我们感兴趣的部分，它的值是一个全局javascript函数的名字 - btnSay_click，该javascript函数写在后面的javascript代码块里。类型描述符中的一个事件被映射到了xml属性中的同名事件，这个属性的值就是用来处理该事件的javascript函数的名称。
让我们来看看第二种触发事件的方法 - 通过客户端控件。用下面这段代码取代上面的button标签。
< button id ="btnSay" > < click > < setPropertyAction target ="lblHello" property ="text" value ="Hello XML-script!" /> </ click > </ button >
现在运行这个页，它将做如代码改变之前一样的工作，这是怎么回事呢？
Actions
类型描述符中的事件可以用与事件名相同的名字作为xml标签而被解析。它包括一个或多个子元素用来调用action。
一个action就是一个内置了一个事件的执行逻辑的对象。在最后的那个例子中我们用一个被称作SetProperty的action来处理click事件。这个action实际上就是Sys.Preview.SetPropertyAction类的实例，它也有自己的一些类型描述符
Sys.Preview.SetPropertyAction.descriptor = { properties: [ {name: 'property', type: String}, {name: 'propertyKey' }, {name: 'value', type: String} ]}
你可以比较一下SetPropertyAction类和其相关的xml标签，事实上类的名字就映射到了相关的xml元素。xml中的target属性的值就是Lable控件的id，该Label控件的text属性将被更改。value属性的值就是设置Lable控件的text属性的值。
SetPropertyAction还有一个被称作propertyKey的类型描述符。它的作用是设置一些属性的子属性，下面就是一段示例代码，你可以用它替换掉原来的相关代码
< button id ="btnSay" > < click > < setPropertyAction target ="lblHello" property ="text" value ="Hello XML-script!" /> < setPropertyAction target ="lblHello" property ="element" propertyKey ="style.backgroundColor" value ="#FFFF00" /> </ click > </ button >
这样，我们就有两个action了。第一个action用于设置Lable的text属性，第二个action用户把Label的背景颜色设为黄色。第二个action的property属性设置成了“element”，它返回一个关联到Label的DOM（span标签）。我们通过get_的方式来取得属性，propertyKey属性包含了扩展属性，如果我们要访问style对象的backgroundColor属性的话，应该使用像下面这样的javascript语句
$find('lblHello').get_element().style.backgroundColor = '#FFFF00';
总结
xml-script允许通过声明代码实例化有类型描述符的客户端组件。它允许调用一段javascript函数，或者执行一个或多个action去处理事件。
在下一篇教程里，我们将继续讨论事件，并且介绍一下Microsoft Ajax Library里的其它一些内置action。
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)