Flex 调用WebService将数据显示在DataGrid里面

 

最近在学习Flex，就把学习的过程记录下载，方便自己查看。

这里参考了两位的博客：http://www.cnblogs.com/zhaozhan/archive/2010/10/08/1846170.html

                               http://www.cnblogs.com/wayne23/archive/2010/07/15/1778090.html

WebService（C#）代码如下:

 [System.Web.Script.Services.ScriptService]
    public class Flex_WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public DataTable GetDataTable()
        {
            DataTable dt = new DataTable("Employees");
            dt.Columns.Add("id", typeof(int));
            dt.Columns.Add("name", typeof(string));
            dt.Columns.Add("age", typeof(int));

            DataRow dr = dt.NewRow();
            dr["id"] = 1;
            dr["name"] = "Shawn";
            dr["age"] = 25;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["id"] = 2;
            dr["name"] = "Jack";
            dr["age"] = 23;
            dt.Rows.Add(dr);

            return dt;
        }
        [WebMethod]
        public int sum(int num1, int num2)
        {
            return num1 + num2;
        }  
    }

Flex文档结构如下：

主要就是上面两个文件，现在看看Flex代码：

下面是ActionScript代码：

import mx.controls.Alert;  
import mx.rpc.events.ResultEvent;  
import mx.rpc.soap.WebService;  

private var ws :mx.rpc.soap.WebService = new mx.rpc.soap.WebService();  
protected function getWebService():void  
{  
    
    ws.wsdl= "http://localhost:23602/Flex_WebService.asmx?wsdl";  
    ws.addEventListener(ResultEvent.RESULT,resultFunction);//增加返回结果的监听  
    ws.getOperation("sum").send("1","2");  
    ws.loadWSDL();  
} 
protected function WebServiceGetTable():void  
{  
    //var ws :mx.rpc.soap.WebService = new mx.rpc.soap.WebService();  
    ws.wsdl= "http://localhost:23602/Flex_WebService.asmx?wsdl";  
    ws.addEventListener(ResultEvent.RESULT,resultFunctiontable);//增加返回结果的监听  
    ws.getOperation("GetDataTable").send();  
    ws.loadWSDL();  
}  


private function resultFunction(event:ResultEvent){  
    var s:int = event.result as int;  
    Alert.show(s.toString(),"返回结果");  
}  
private function resultFunctiontable(event:ResultEvent){  
    var funcName:String = event.target.name;
    var    object=event.result;
    Alert.show(funcName,"返回结果");  
    myGrid.dataProvider = ws.GetDataTable.lastResult.Tables.Employees.Rows;//这个地方的Employees是表的名字


}

设计代码如下：

<?xml version="1.0" encoding="utf-8"?>  
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
               xmlns:s="library://ns.adobe.com/flex/spark"   
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
    
    <s:layout>  
        <s:BasicLayout/>  
    </s:layout>  
    <fx:Script source="GetWebService/TableWebService.as"/>  
    <fx:Declarations>  
    </fx:Declarations>  
    <s:Button x="172" y="190" id="btn2" label="AS调用WebService" click="getWebService()"/>  
    <mx:Panel width="400">
        <mx:DataGrid id="myGrid" width="100%">
            <mx:columns>
                <mx:DataGridColumn headerText="ID" dataField="id"/>
                <mx:DataGridColumn headerText="Name" dataField="name"/>
                <mx:DataGridColumn headerText="Age" dataField="age"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:ControlBar>
            <mx:Button label="Get DataTable" click="WebServiceGetTable()"/>
        </mx:ControlBar>
    </mx:Panel>
</s:Application>  

运行效果如下：