`
ilinker
  • 浏览: 65262 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

[转]Flex与ASP.NET互操作系列3:基于WebService的数据访问(下)

    博客分类:
  • Flex
阅读更多

在上一篇文章《Flex与.NET互操作(二):基于WebService的数据访问(上) 》中介绍了通过<mx:WebService>标签来访问Webservice。实际上我们也可以通过编程的方式动态的访问WebService,Flex SDK为我们提供了WebService类。

     使用WebService类来访问WebService其实也就是将<mx:WebService>标签的属性通过类对象的属性形式来表示,相比之下使用WebService类比使用<mx:WebService>标签要灵活。下面我们来看看编程方式怎么连接和调用远程方法:

1     internal function onClick():void
2     {
3         var service:WebService = new WebService();
4         service.loadWSDL("http://localhost:1146/FlashFlexService.asmx?wsdl");
5         service.addEventListener(ResultEvent.RESULT,onResult);
6         service.addEventListener(FaultEvent.FAULT,onFault);
7         service.GetBook();
8     }
 

     直接通过类对象的loadWSDL()方法调用远程WebService,动态为类对象指定相关的处理函数,然后和标签一样调用远程WebService方法既可。

1     internal function onResult(evt:ResultEvent):void
2     {
3         Alert.show(evt.result.Id);
4     }
5    
6     internal function onFault(evt:FaultEvent):void
7     {
8         Alert.show(evt.fault.faultDetail.toString());
9     }
 

     如上便完成了使用WebService类通过编程的方式访问远程WebService方法的调用。

     下面来看看WebService返回DataTable等负责类型,在Flex客户端该怎么解析。首先定义WebService方法如下:

 1 [WebMethod(Description="该方法将返回DataTable类型的数据")]
 2 public DataTable GetDataTable()
 3 {
 4     DataTable dt = new DataTable("Books");
 5     dt.Columns.Add("Id", typeof(int));
 6     dt.Columns.Add("Name", typeof(string));
 7     dt.Columns.Add("Author", typeof(string));
 8     dt.Columns.Add("Price", typeof(double));
 9
10     DataRow dr = dt.NewRow();
11     dr["Id"] = 1;
12     dr["Name"] = "《Flex游戏开发》";
13     dr["Author"] = "张三";
14     dr["Price"] = 54.85;
15     dt.Rows.Add(dr);
16
17     dr = dt.NewRow();
18     dr["Id"] = 2;
19     dr["Name"] = "《Flash游戏开发》";
20     dr["Author"] = "李四";
21     dr["Price"] = 65.50;
22     dt.Rows.Add(dr);
23
24     return dt;
25 }
 

     同样在Flex客户端通过WebService来访问就可以了,下面是使用<mx:WebServive>标签访问(这里需要注意,<mx:operation>标签的name必须与服务端的WebService方法同名):

1     <mx:WebService id="myService"
2         wsdl="http://localhost:1146/DataWebService.asmx?wsdl" useProxy="false">
3         <mx:operation name="GetDataTable">
4         </mx:operation>
5     </mx:WebService>
 

     提供好了WebService,客户端也连接上了WebService,现在只差调用WebService提供的远程方法了。如下:

 1     internal function onTable():void
 2     {
 3         myService.addEventListener(ResultEvent.RESULT,onSuccess);
 4         myService.addEventListener(FaultEvent.FAULT,onFault);
 5         myService.GetDataTable.send();
 6     }
 7    
 8     internal function onSuccess(evt:ResultEvent):void
 9     {
10         //bookGrid.dataProvider=this.myService.GetDataTable.lastResult.Tables.Books.Rows;
11     }
12    
13     internal function onFault(evt:FaultEvent):void
14     {
15         Alert.show("调用WebService方法失败,详细:" + evt.fault.faultDetail.toString());
16        
17     }
 

     将WebService的返回值绑定在Flex的DataGrid组件,mxml的相关代码如下:

 1 <mx:Panel x="41" y="123" width="480" height="279" layout="absolute" fontSize="12">
 2     <mx:DataGrid x="10" y="10" width="436" id="bookGrid"
 3         dataProvider="{this.myService.GetDataTable.lastResult.Tables.Books.Rows}">
 4         <mx:columns>
 5             <mx:DataGridColumn headerText="编号" dataField="Id"/>
 6             <mx:DataGridColumn headerText="书名" dataField="Name"/>
 7             <mx:DataGridColumn headerText="作者" dataField="Author"/>
 8             <mx:DataGridColumn headerText="价格" dataField="Price"/>
 9         </mx:columns>
10     </mx:DataGrid>
11     <mx:ControlBar>
12         <mx:Button label="DataTable" click="onTable()"/>
13     </mx:ControlBar>
14 </mx:Panel>
 

     通过DataGrid的dataProvider属性绑定DataGrid组件的数据源,除了直接通过"{}"绑定表达式帮定外我们也可以在调用远程方法成功的处理函数里给DataGrid指定数据源,见上面代码中注释的代码部分。{this.myService.GetDataTable.lastResult.Tables.Books.Rows}表示将远程WebService方法GetDataTable()的返回结果(DataTable)的所有行作为数据源与DataGrid组件进绑定,其中Books为数据源DataTable的name,详细见前面WebService方法的定义出。程序运行结果如下图:

        

    

     DataSet,DataTable相比泛型集合来说,性能上有很大的差距,复杂的序列化和反序列化过程也很负责,自从.net 2.0推出泛型到现在,我一直就比较喜欢用泛型来传递大数据。OK,下面我将介绍下在Flex中怎么去处理WebService方法返回的泛型集合数据。我们有如下WebService方法定义:

 

 1     [WebMethod(Description="该方法返回泛型集合")]
 2     public List<Book> BookList()
 3     {
 4         return new List<Book>
 5         {
 6             new Book
 7             {
 8                 Id = 1,
 9                 Name = "《Flex游戏开发》",
10                 Author = "张三",
11                 Price = 54.85
12             },
13             new Book
14             {
15                 Id = 1,
16                 Name = "《Flash游戏开发》",
17                 Author = "李四",
18                 Price = 65.50
19             }
20         };
21     }
 

     相比DataSet,DataTable类型,使用List<>返回数据我个人认为更方面容易处理。我们直接在WebService的调试环境下测试返回List<>的WebService方法可以看到如下结果:

       

     这就是以泛型结合(List<>)的形式返回的数据形式,相比DataTable的返回结果更为简洁,明了。话说到此,我们在Flex下该怎么去获取这个返回值和处理这个值呢?其实这里已经很清楚的展现了我们可以通过什么方式去处理,仔细看上图会发现"ArrayOfBook"????这是什么东西?莫非是在客户端可以通过数组的形式得到这个返回值。为了进一步搞清楚这里面的的点点滴滴,我们需要深入到内部去了解下返回值的具体构造,通过Flex Builder的调试环境可以得到如下信息: 

         

     看清楚了吗?BookList方法的lastResult结构集下有两个对象,点开节点可知正是我们通过List<Book>返回的两个Book对象,而lastResult的类型是:mx.collections.ArrayCollection,这不真是ActionScript中的数组集合吗?好的,既然这样,在Flex客户端便可以直接通过lastResult得到WebService返回的泛型集合数据了。如下代码块:

 1 internal function onTable():void
 2 {
 3     myService.addEventListener(ResultEvent.RESULT,onSuccess);
 4     myService.addEventListener(FaultEvent.FAULT,onFault);
 5     myService.BookList.send();
 6 }
 7
 8 internal function onSuccess(evt:ResultEvent):void
 9 {
10     var arrC:ArrayCollection = this.myService.BookList.lastResult as ArrayCollection;
11     bookGrid.dataProvider=arrC;
12 }
13
14 internal function onFault(evt:FaultEvent):void
15 {
16     Alert.show("调用WebService方法失败,详细:" + evt.fault.faultDetail.toString());
17    
18 }
 

     对应的mxml代码如下(运行结果和上面返回DataTable类型一样):

 1 <mx:Panel x="41" y="123" width="480" height="279" layout="absolute" fontSize="12">
 2     <mx:DataGrid x="10" y="10" width="436" id="bookGrid">
 3         <mx:columns>
 4             <mx:DataGridColumn headerText="编号" dataField="Id"/>
 5             <mx:DataGridColumn headerText="书名" dataField="Name"/>
 6             <mx:DataGridColumn headerText="作者" dataField="Author"/>
 7             <mx:DataGridColumn headerText="价格" dataField="Price"/>
 8         </mx:columns>
 9     </mx:DataGrid>
10     <mx:ControlBar>
11         <mx:Button label="DataTable" click="onTable()"/>
12     </mx:ControlBar>
13 </mx:Panel>
 

     关于WebService的数据访问就介绍到这里,由于个人能力有限,文中有不足之处还望大家指正。如果有什么好的建议也可以提出,大家相互讨论,学习,共同进步!!

 


文章来自学IT网:http://www.xueit.com/html/2009-02/21_573_00.html

分享到:
评论

相关推荐

    Flex基于WebService的数据访问

    Flex与.NET的互操作主要依赖于WebService,因为WebService提供了一种跨平台的数据交换方式。在.NET环境中,我们可以创建一个ASP.NET WebService(ASMX或WCF服务),然后在Flex中通过HTTPService调用这些服务的方法。...

    flex ,webservice(.net) 交互

    而.NET Webservice是微软.NET Framework提供的一种服务导向架构,用于构建可互操作的Web服务。 在Flex中,AS3.0是主要的编程语言,它允许开发者创建动态、交互式的用户界面并与服务器进行数据交换。AS3.0拥有面向...

    Flex+WebService附件上传下载

    在与.NET互操作时,通常使用HTTPHandler作为WebService的实现方式。HTTPHandler是ASP.NET中的一种处理器,它可以处理HTTP请求并返回响应。在文件上传的场景中,HTTPHandler接收由Flex客户端发送的文件数据,将其保存...

    flex+net实战

    在服务器端,可以使用ASP.NET或WCF(Windows Communication Foundation)来处理业务逻辑和数据访问,然后通过AMF将结果返回给Flex客户端。这种结合方式使得前后端通信高效、快速。 4. Flex端源码解析: Flex端源码...

    flex开发系列书籍:XML技术在RIA中的集成

    XML因其开放性、简单性、互操作性和可扩展性等特性,成为Flex与后台系统(如J2EE)之间数据交换的理想选择。XML文档可以轻松地从数据库获取数据,经过处理后传递给客户端的Flex应用程序,或者接收客户端修改后的数据...

    flex 4(flash builder 4)数据绑定教程(中文版)

    本章节主要介绍Flex框架及其与数据访问技术的关系,同时对比了Flex与其他传统技术如JSP、ASP等的不同之处。 **Flex与其它数据访问技术的比较** Flex作为一种灵活的用户界面框架,它的数据处理方式与传统的基于HTML...

    Flex附件上传下载

    文件`Flex与_NET互操作 使用FileReference+HttpHandler实现文件上传-下载_Flex_脚本之家.htm`可能包含一个完整的示例代码,演示了如何在Flex中使用`FileReference`类与.NET的HttpHandler协同工作,实现文件的上传和...

    FMS案例开发.pdf

    开发者通过一系列的文章分享了关于ActionScript 3.0、Flex与.NET互操作以及FMS3的相关知识,并计划通过一个视频聊天室的案例来深入探讨这些技术。 二、技术方案 1. 媒体服务器:选用Flash Media Server 3,它能处理...

    RIA及其基于Flex的应用开发模型

    RIA技术应当支持如HTML/HTTP、XML、SOAP/WebService等标准协议和技术,以确保与其他系统的互操作性。 ##### 2.4 保留现有的工具 开发者希望能够在现有的编辑器或集成开发环境中继续工作,如Eclipse、Borland ...

Global site tag (gtag.js) - Google Analytics