快捷導(dǎo)航

Silverlight融合ajax實(shí)現(xiàn)前后臺(tái)數(shù)據(jù)交互

更新時(shí)間：2009年05月23日 22:17:22 作者：

兩年前Silverlight 還未起名，故事發(fā)生在WPF/E 的年代里。07年8月在中軟實(shí)習(xí)時(shí)，我承擔(dān)起了在. Net 中嵌入WPF/E 的任務(wù)，目的是增強(qiáng)用戶體驗(yàn)。

事出偶然，本來(lái)公司強(qiáng)調(diào)的是用WCF 做項(xiàng)目審批流程，WPF /E 增強(qiáng)用戶體驗(yàn)；由于個(gè)人的無(wú)知與偷懶，我產(chǎn)生了天真的想法：用WPF/E 來(lái)做審批流程，這不是一舉兩得嗎。
下面介紹的就是用Silverlight （微軟在07 年9 月將WPF/E 更名為Silverlight ）融合ajax 做的審批流程。界面上的審批流程從下向上包括3部分，部門(mén)審批，科技處審批，廠長(zhǎng)審批。實(shí)現(xiàn)的功能是可以定制審批流程，比如審批流程是部門(mén)審批--> 廠長(zhǎng)審批，也可以定制成科技處審批--> 廠長(zhǎng)審批。定制的數(shù)據(jù)存在后臺(tái)xml 文件中。
前臺(tái)Silverlight 表現(xiàn)層語(yǔ)言xaml , 后臺(tái)服務(wù)器腳本語(yǔ)言C# ，數(shù)據(jù)存儲(chǔ)格式xml ，中間數(shù)據(jù)傳輸技術(shù)ajax 。
.Net中嵌入Silverlight Page 的方法是在aspx 中調(diào)用js 函數(shù)傳遞xaml 文件相對(duì)于服務(wù)器的路徑，如下：

復(fù)制代碼代碼如下:

<div style="width: 662px;height: 622px" id="SilverlightControlHost" > 
<script type="text/javascript"><!-- 
createsL( 'workflow.xaml' ); 
// --></script> 
</div> 

函數(shù)調(diào)用Silverlight 的createObjectEx 方法指定xaml source 、parentElement 、events 等，相應(yīng)代碼如下：

復(fù)制代碼代碼如下:

function createSL(xamlpage) 
{ 
Silverlight.createObjectEx({ 
source: xamlpage, 
parentElement: document.getElementById("SilverlightControlHost"), 
id: "SilverlightControl", 
properties: { 
width: "100%", 
height: "100%", 
version: "1.1", 
enableHtmlAccess: "true" 
}, 
events: { 
onLoad:OnLoaded 
} 
}); 
// Give the keyboard focus to the Silverlight control by default 
document.body.onload = function() { 
var silverlightControl = document.getElementById('SilverlightControl'); 
if (silverlightControl) 
silverlightControl.focus(); 
} 
} 

還要做的工作是在xaml 后臺(tái)cs 文件中[ Scriptable ] 表現(xiàn)層WPF 類(lèi)(當(dāng)初是Cavas)，將該類(lèi)注冊(cè)為可腳本化對(duì)象(RegisterScriptableObject)和可腳本化event ，并且在js 的events 設(shè)定表現(xiàn)層中的event ，實(shí)現(xiàn)方法如下：
xaml代碼：
[Scriptable]

復(fù)制代碼代碼如下:

public partial class workflow : Canvas 
{ 
public workflow() 
{ 
WebApplication.Current.RegisterScriptableObject("wpfe", this); 
} 
...... 
[Scriptable] 
public event EventHandler workflowFunc; 
} 

js代碼：

復(fù)制代碼代碼如下:

function OnLoaded(sender,args) 
{ 
sender.Content.wpfe.workflowFunc = onWorkflow; 
} 

另外，如果js 調(diào)用xaml 中的可腳本化函數(shù)的方法是
var control = document.getElementById("SilverlightControl");
var onReturnWfResult = control.Content.wpfe;
將xaml 中數(shù)據(jù)傳輸給后臺(tái)處理就用到ajax 技術(shù)了，在本例中是在onWorkflow 事件中定義XMLHttpRequest，然后通過(guò)該ajax 對(duì)象將數(shù)據(jù)傳遞到后臺(tái)。該例中的后臺(tái)腳本語(yǔ)言是C# ，數(shù)據(jù)接收方法是Request.Params 。

您可能感興趣的文章: