[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.cs using 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(); }else mx.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、运行程序查看效果如下图