[flex 4]使用组件与asp.net程序交互

    学习FLEX，数据交互部分是很重要的一部分，没有数据交互就写不出什么有价值的程序了。下面演示一个<mx:HTTPService>和http程序交互的例子。实现的功能是：flex客户端传递操作参数给ASP.NET程序，ASP.NET程序计算全部参数的和，并将结果返回flex程序并进行显示。

  1、首先编写asp.net程序，使用vs2008，新建asp.net网站，在自动生成的默认页面default.aspx页面中编写default.aspx.cs文件代码，default.aspx.cs是default.aspx的后台代码页，主要代码为以下部分,实现连加功能，并返回xml。

//default.aspx.csusing System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { int sum = 0; string s = Request.QueryString["num"]; if (s != null) { string[] arr = s.Split(','); foreach (string i in arr){ sum += Convert.ToInt32(i); } } Response.Write("<ComputeResult>" + sum.ToString() + "</ComputeResult>"); }}

 

2、将该网站发布到iis服务器中，例如该网站的地址为:http://127.0.0.1

 

3、编flex应用程序，源码如下。

<?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"><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --><s:HTTPService id="httpser" showBusyCursor="true" result="httpHandle(event);" useProxy="false"/></fx:Declarations><fx:Script><!--[CDATA[import mx.rpc.events.ResultEvent;import mx.utils.StringUtil;private var arr:Array=new Array();//定义数组，存放参数private function httpHandle(e:ResultEvent):void{lblResult.text=e.result.ComputeResult;}private function addHandle():void{httpser.url="http://127.0.0.1/default.aspx"; //将请求发送到刚刚建立的网站上。if(arr.length>0){httpser.url+="?";}for(var i:int=0;i<arr.length;i++){if(i!=arr.length-1){httpser.url+="num="+arr[i].para.toString()+"&";}else httpser.url+="num="+arr[i].para.toString();}httpser.send();}private function addData():void{if(mx.utils.StringUtil.trim(txtpara.text)!=null){var obj:Object=new Object();obj.para=txtpara.text;arr.push(obj);dg.dataProvider=arr;txtpara.text="";dg.validateNow();}elsemx.controls.Alert.show("请正确输入","请正确输入");}private function delData():void{arr=null;dg.dataProvider=arr;dg.validateNow();}]]--></fx:Script><s:Panel x="10" y="10" width="398" height="371" title="使用httpService交互"><s:Label x="48" y="32" text="参数" width="29" height="18" fontSize="14"/><s:TextInput x="102" y="30" id="txtpara" width="195"/><mx:DataGrid id="dg" x="26" y="87" width="271"><mx:columns><mx:DataGridColumn headerText="参数" dataField="para"/></mx:columns></mx:DataGrid><s:Button x="316" y="30" label="添加" click="addData();"/><s:Button x="316" y="87" label="清空" click="delData();"/><s:Label x="26" y="290" text="连加结果为" fontSize="14"/><s:Label x="122" y="290" id="lblResult" width="177"/><s:Button x="316" y="290" label="计算" click="addHandle();"/></s:Panel></s:Application>

4、运行程序查看效果如下图