Flex與.NET互操作(三)：基於WebService的資料訪問(下)

在上一篇文章《Flex與.NET互操作(二)：基於WebService的資料訪問(上) 》中介紹了通過<mx:WebService>標籤來訪問Webservice。實際上我們也可以通過編程的方式動態訪問WebService，Flex SDK為我們提供了WebService類。

使用WebService類來訪問WebService其實也就是將<mx:WebService>標籤的屬性通過類對象的屬性形式來表示，相比之下使用WebService類比使用<mx:WebService>標籤要靈活。下面我們來看看編程方式怎麼串連和調用遠程方法：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1 internalfunctiononClick():void
2{
3varservice:WebService=newWebService();
4service.loadWSDL("http://localhost:1146/FlashFlexService.asmx?wsdl");
5service.addEventListener(ResultEvent.RESULT,onResult);
6service.addEventListener(FaultEvent.FAULT,onFault);
7service.GetBook();
8}

直接通過類對象的loadWSDL()方法調用遠程WebService，動態為類對象指定相關的處理函數，然後和標籤一樣調用遠程WebService方法既可。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1 internalfunctiononResult(evt:ResultEvent):void
2{
3Alert.show(evt.result.Id);
4}
5
6internalfunctiononFault(evt:FaultEvent):void
7{
8Alert.show(evt.fault.faultDetail.toString());
9}

如上便完成了使用WebService類通過編程的方式訪問遠程WebService方法的調用。

下面來看看WebService返回DataTable等負責類型，在Flex用戶端該怎麼解析。首先定義WebService方法如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1[WebMethod(Description="該方法將返回DataTable類型的資料")]
2publicDataTableGetDataTable()
3{
4DataTabledt=newDataTable("Books");
5dt.Columns.Add("Id",typeof(int));
6dt.Columns.Add("Name",typeof(string));
7dt.Columns.Add("Author",typeof(string));
8dt.Columns.Add("Price",typeof(double));
9
10DataRowdr=dt.NewRow();
11dr["Id"]=1;
12dr["Name"]="《Flex遊戲開發》";
13dr["Author"]="張三";
14dr["Price"]=54.85;
15dt.Rows.Add(dr);
16
17dr=dt.NewRow();
18dr["Id"]=2;
19dr["Name"]="《Flash遊戲開發》";
20dr["Author"]="李四";
21dr["Price"]=65.50;
22dt.Rows.Add(dr);
23
24returndt;
25}

同樣在Flex用戶端通過WebService來訪問就可以了，下面是使用<mx:WebServive>標籤訪問（這裡需要注意，<mx:operation>標籤的name必須與服務端的WebService方法同名）：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1<mx:WebServiceid="myService"
2wsdl="http://localhost:1146/DataWebService.asmx?wsdl"useProxy="false">
3<mx:operationname="GetDataTable">
4</mx:operation>
5</mx:WebService>

提供好了WebService，用戶端也串連上了WebService，現在只差調用WebService提供的遠程方法了。如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1 internalfunctiononTable():void
2{
3myService.addEventListener(ResultEvent.RESULT,onSuccess);
4myService.addEventListener(FaultEvent.FAULT,onFault);
5myService.GetDataTable.send();
6}
7
8internalfunctiononSuccess(evt:ResultEvent):void
9{
10//bookGrid.dataProvider=this.myService.GetDataTable.lastResult.Tables.Books.Rows;
11}
12
13internalfunctiononFault(evt:FaultEvent):void
14{
15Alert.show("調用WebService方法失敗，詳細："+evt.fault.faultDetail.toString());
16
17}

將WebService的傳回值綁定在Flex的DataGrid組件，mxml的相關代碼如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1<mx:Panelx="41"y="123"width="480"height="279"layout="absolute"fontSize="12">
2<mx:DataGridx="10"y="10"width="436"id="bookGrid"
3dataProvider="{this.myService.GetDataTable.lastResult.Tables.Books.Rows}">
4<mx:columns>
5<mx:DataGridColumnheaderText="編號"dataField="Id"/>
6<mx:DataGridColumnheaderText="書名"dataField="Name"/>
7<mx:DataGridColumnheaderText="作者"dataField="Author"/>
8<mx:DataGridColumnheaderText="價格"dataField="Price"/>
9</mx:columns>
10</mx:DataGrid>
11<mx:ControlBar>
12<mx:Buttonlabel="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，

DataSet,DataTable相比泛型集合來說，效能上有很大的差距，複雜的序列化和還原序列化過程也很負責，自從.net 2.0推出泛型到現在，我一直就比較喜歡用泛型來傳遞大資料。OK，下面我將介紹下在Flex中怎麼去處理WebService方法返回的泛型集合資料。我們有如下WebService方法定義：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1 [WebMethod(Description="該方法返回泛型集合")]
2publicList<Book>BookList()
3{
4returnnewList<Book>
5{
6newBook
7{
8Id=1,
9Name="《Flex遊戲開發》",
10Author="張三",
11Price=54.85
12},
13newBook
14{
15Id=1,
16Name="《Flash遊戲開發》",
17Author="李四",
18Price=65.50
19}
20};
21}

相比DataSet,DataTable類型，使用List<>返回資料我個人認為更方面容易處理。

這就是以泛型結合(List<>)的形式返回的資料形式，相比DataTable的返回結果更為簡潔，明了。話說到此，我們在Flex下該怎麼去擷取這個傳回值和處理這個值呢？其實這裡已經很清楚的展現了我們可以通過什麼方式去處理，仔細看會發現"ArrayOfBook"？？？？這是什麼東西？莫非是在用戶端可以通過數組的形式得到這個傳回值。為了進一步搞清楚這裡面的的點點滴滴，我們需要深入到內部去瞭解下傳回值的具體構造，通過Flex Builder的調試環境可以得到如下資訊：

看清楚了嗎？BookList方法的lastResult結構集下有兩個對象，點開節點可知正是我們通過List<Book>返回的兩個Book對象，而lastResult的類型是：mx.collections.ArrayCollection，這不真是ActionScript中的數組集合嗎？好的，既然這樣，在Flex用戶端便可以直接通過lastResult得到WebService返回的泛型集合資料了。如下代碼塊：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1internalfunctiononTable():void
2{
3myService.addEventListener(ResultEvent.RESULT,onSuccess);
4myService.addEventListener(FaultEvent.FAULT,onFault);
5myService.BookList.send();
6}
7
8internalfunctiononSuccess(evt:ResultEvent):void
9{
10vararrC:ArrayCollection=this.myService.BookList.lastResultasArrayCollection;
11bookGrid.dataProvider=arrC;
12}
13
14internalfunctiononFault(evt:FaultEvent):void
15{
16Alert.show("調用WebService方法失敗，詳細："+evt.fault.faultDetail.toString());
17
18}

對應的mxml代碼如下(運行結果和上面返回DataTable類型一樣)：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1<mx:Panelx="41"y="123"width="480"height="279"layout="absolute"fontSize="12">
2<mx:DataGridx="10"y="10"width="436"id="bookGrid">
3<mx:columns>
4<mx:DataGridColumnheaderText="編號"dataField="Id"/>
5<mx:DataGridColumnheaderText="書名"dataField="Name"/>
6<mx:DataGridColumnheaderText="作者"dataField="Author"/>
7<mx:DataGridColumnheaderText="價格"dataField="Price"/>
8</mx:columns>
9</mx:DataGrid>
10<mx:ControlBar>
11<mx:Buttonlabel="DataTable"click="onTable()"/>
12</mx:ControlBar>
13</mx:Panel>

關於WebService的資料訪問就介紹到這裡，由於個人能力有限，文中有不足之處還望大家指正。如果有什麼好的建議也可以提出，大家相互討論，學習，共同進步！！

