[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、运行程序查看效果如下图