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

介绍
我们已经看过了 第二部分(译者注: 中文在这里)和 第三部分(译者注: 中文在这里)的教程,如果一个客户端类型在它的类型描述符中暴露了一个事件,我们就可以使用xml-script去声明式的处理。在xml-script中使用action去处理事件是一种非常棒的办法,本文我们将看到如何创建自定义action去以声明的方式处理事件。


Actions
一个action封装了事件被激发后所执行的一段javascript代码块。有一个例子就是SetProperty action,这个action允许设置客户端组件暴露出来的属性的值,又比如InvokeMethod action,它可以调用一个方法并传递参数。

Microsoft Ajax Library定义了一个被称作PostBackAction的第三方内置action。这个action的作用是当一个事件被激发的时候后回发页(使用asp.net的回发机制,调用__doPostBack函数)

接下来的代码出示了PostBack action,当一个button被单击后引起页面的回发
<% @ Page Language="C#"  %>

<! 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 > Simple Button PostBack </ title >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
     
< scripts >
            
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
     
</ scripts >
    
</ asp:ScriptManager >
    
    
< input  type ="button"  id ="btnPostBack"  value ="PostBack"   />

    
< script  type ="text/xml-script" >
     
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
        
<components>
         
<button id="btnPostBack">
             
<click>
                 
<postBackAction target="btnPostBack" eventArgument="some_argument" />
             
</click>
         
</button>
        
</components>
     
</page>
    
</ script >
    
</ form >
</ body >
</ html >

在这个例子中,单击按钮会引起下面这段javascript代码被执行
__doPostBack('btnPostBack', 'some_argument');


自定义action
我们如果想创建一个自定义action,简单的方法就是创建一个继承自Sys.Preview.Action的类并重写它的performAction方法。

接下来的例子出示了一个AlertAction,它可以在屏幕上显示一个警告框。创建一个javascript文件,命名为AlertAction.js,然后把它存在你的安装了ajax-ctp的站点的ScriptLibrary文件夹内并增加如下代码
Type.registerNamespace('Samples');

Samples.AlertAction 
=   function ()  {
    
this._message;
}

Samples.AlertAction.prototype 
=   {
    get_message : 
function() {
        
return this._message;
    }
,
    
    set_message : 
function(value) {
        
this._message = value;
    }
,
    
    performAction : 
function() {
        
return alert(this._message);
    }

}

Samples.AlertAction.descriptor 
=   {
    properties: [ 
{name: 'message', type: String} ]
}

Samples.AlertAction.registerClass('Samples.AlertAction', Sys.Preview.Action);

AlertAction类暴露了一个message属性,这个属性的值就是弹出框的信息。performAction被重写了,它会调用javascript的alert方法来在屏幕上显示信息。注意AlertAction类继承自Sys.Preview.Action并且暴露了一个类型描述符,允许在声明代码中使用这个类

最后,这里有一段代码说明如何使用这个AlertAction。
<% @ 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 > Alert Action </ title >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< asp:ScriptManager  ID ="TheScriptManager"  runat ="server" >
        
< Scripts >
            
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
            
<asp:ScriptReference Path="ScriptLibrary/AlertAction.js" />
        
</ Scripts >
    
</ asp:ScriptManager >
    
    
< div >
        
< input  type ="button"  id ="myButton"  value ="Click Me"   />
    
</ div >

    
< script  type ="text/xml-script" >
        
<page xmlns="http://schemas.microsoft.com/xml-script/2005" xmlns:cc="Samples">
         
<components>
            
<button id="myButton">
                
<click>
                    
<cc:alertAction message="Hello Xml-script!" />
                
</click>
            
</button>
         
</components>
        
</page>
    
</ script >
    
</ form >
</ body >
</ html >


命名空间
上面那段代码简单易懂,因为自定义action的使用与Microsoft Ajax Library提供的内置action的使用基本相同。但是,因为AlertAction类在Samples命名空间下,所以我们必须把这个命名空间绑定到一个自定义的xml命名空间上。

做这件事的话,我们就要在page元素下增加一个属性,说明命名空间的前缀。
xmlns:cc="Samples" 

然后就可以在alertAction标签下使用我们所定义的前缀了
< cc:alertAction  message ="Hello Xml-script!"   />

我们不能使用像button,label,textBxo,postBackAction之类的前缀,因为xml-script解析器会在一套默认的命名空间内根据这些前缀搜索到相应的类。
·Sys
·Sys.UI
·Sys.Net
·Sys.Preview
·Sys.Preview.UI
·Sys.Preview.Net
·Sys.Preview.Data
·Sys.Preview.UI.Data
·Sys.Preview.Services.Components

所有这些类存在于不同的命名空间里,我们需要把它们的命名空间映射到一个xml命名空间才能正确的使用声明代码。

不管怎样,在xml代码中的根元素至少会有一个全局命名空间,像如下这样的page元素
< page  xmlns ="http://schemas.microsoft.com/xml-script/2005" >


总结
本文(教程的第四部分)中我们了解了如何使用PostBack action去回发一个页,如何创建一个继承自Sys.Action的自定义action,如何重写performAction方法。action是通过声明代码执行封装javascript代码的非常棒的办法。

本教程的下一部分我们将专注于学习绑定。 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值