Flex与asp.net完美集合-51CTO.COM

本文和大家重点讨论一下Flex与asp.net的结合，将Flex编译后的程序插入到asp.net页面和Flex程序与asp.net程序交互两大部分内容，希望本文的介绍能让你有所收获。

Flex与asp.net结合使用

1.将Flex编译后的程序插入到asp.net页面

Flex的最终输出就是一张网页+一个flash(.swf文件)就是用他生成的网页的方式把那个.swf文件插入asp.net页面就可以了。

Flex3项目名字叫TestApp，最简单直接的办法就是，把"bin-debug"目录下的：
◆TestApp.html
◆TestApp.swf
◆AC_OETags.js
◆playerProductInstall.swf
这4个文件复制到asp.net网站下面，打开TestApp.html，把内容复制到asp.net程序页面(.aspx文件)中。
比如Default.aspx：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%> 
//把TestApp.html的内容全部复制到这里  
//....  
//...

总而言之Flex3最后编译成了一个.swf文件而已，这个文件在网站里面插入的方法和普通的flash动画的那种.swf文件的使用方法是一样的。
还有其他的要求：Flex3程序和网页还有交互，请用"Flexexternalinterface"搜索

2.Flex程序与asp.net程序交互

可以使用Flex的Loader往asp.net发送请求，获取xml。
也可以使用ExternalInterface和网页中的js交互，让js发送ajax请求到asp.net。

下面有一实例，目标是：在Flex端将数据Post到asp.net页面中，并将返回的xml数据显示出来

//Asp.net端代码
//getxml.aspx代码，保留一行即可，删除其他的html代码

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="getxml.aspx.cs"Inherits="getxml"%> 
 
//getxml.aspx.cs  
//usingSystem...  
usingSystem.Xml;  
publicpartialclassgetxml:System.Web.UI.Page  
{  
protectedvoidPage_Load(objectsender,EventArgse)  
{  
stringuser_pkid=System.Web.HttpContext.Current.Request.Form["user_pkid"];  
ifuser_pkid!=null)  
{  
CreateXml();//创建Xml的方法，可使用XmlTextWriter、XmlDocument，或者直接读取Xml文件等待  
}  
}  
 
privatevoidCreateXml()  
{  
XmlDocumentdoc=newXmlDocument();  
XmlNoderoot=doc.CreateElement("channel");  
 
XmlElementtitleElm=doc.CreateElement("title");  
titleElm.InnerText="blogweather";  
 
//...  
 
root.AppendChild(titleElm);  
doc.AppendChild(root);  
 
XmlTextWriterxw=newXmlTextWriter(Response.OutputStream,System.Text.Encoding.UTF8);//写到页面返回值中  
xw.Formatting=Formatting.Indented;//将Xml格式化  
doc.Save(xw);  
xw.Flush();  
xw.Close();  
}  
}

Xml数据如下：

<?xmlversionxmlversion="1.0"encoding="UTF-8"?> 
<channel> 
<title>blogweather</title> 
<link>http://www.blogweather.net</link> 
<description>博客天气预报</description> 
</channel>

方法一：
如果所有值均在xml数据中，而且不需要拿这些数据做二次分析，则推荐使用HTTPService控件

Flex端代码：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"initialize="init()"> 
<mx:Script> 
<![CDATA[  
importmx.messaging.AbstractConsumer;  
importflash.events.MouseEvent;  
importmx.controls.Alert;  
 
privatefunctioninit():void  
{  
getxml.url="http://www.blogweather.net/getxml.aspx";//接收Post方法的页面  
vardata:Object=newObject();  
data["user_pkid"]=this.parameters.user_pkid;  
getxml.send(data);  
}  
]]> 
</mx:Script> 
<mx:HTTPServiceidmx:HTTPServiceid="getxml"showBusyCursor="true"useProxy="false"method="POST"> 
</mx:HTTPService> 
<mx:TextAreawordWrapmx:TextAreawordWrap="true"editable="false"enabled="true"id="lb_title"> 
<mx:text>{getxml.lastResult.channel.title}</mx:text> 
</mx:TextArea> 
</mx:Application>

方法二：
如果要将数据进行分析，则要使用URLLoader和URLRequest
Flex端代码：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"initialize="init();"> 
<mx:Script> 
<![CDATA[  
importmx.messaging.AbstractConsumer;  
importmx.messaging.channels.StreamingAMFChannel;  
importflash.events.MouseEvent;  
importmx.controls.Alert;  
 
publicvarmyLoader:URLLoader=newURLLoader();  
publicvarmyRequest:URLRequest;  
publicvaruser_pkid:String;  
 
privatefunctioninit():void  
{  
varhttp://www.cnblogs.com/glaivelee/admin/String="http://www.blogweather.net/getxml.aspx";  
myRequest=newURLRequest(url);  
myRequest.method=URLRequestMethod.POST;  
vardata:URLVariables=newURLVariables();  
//接收来自flash的参数调用,比如flash文件为loadxml.swf，带参数loadxml.swf?user_pkid=10001  
data.user_pkid=this.parameters.user_pkid;//获取10001  
myRequest.data=data;  
myLoader.load(myRequest);  
myLoader.addEventListener(Event.COMPLETE,onLoadComplete);  
}  
 
privatefunctiononLoadComplete(event:Event):void  
{  
varmyxml:XML;  
varloader:URLLoader=URLLoader(event.target);  
myxml=newXML(loader.data);  
 
lb_title.text=myxml.child("channel")[0].child("title");  
if(lb_title.text=="blogweather")  
{  
Alert("页面名称为:博客天气预报");  
}  
}  
 
]]> 
</mx:Script> 
<mx:TextAreawordWrapmx:TextAreawordWrap="true"editable="false"enabled="true"id="lb_title"> 
<mx:text>lb_title</mx:text> 
</mx:TextArea> 
</mx:Application>

【编辑推荐】