asp.net ajax xml-script教程(二)

概述
在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。 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值