Silverlight融合ajax實現(xiàn)前后臺數據交互
更新時間:2009年05月23日 22:17:22 作者:
兩年前Silverlight 還未起名,故事發(fā)生在WPF/E 的年代里。07年8月在中軟實習時,我承擔起了在. Net 中嵌入WPF/E 的任務,目的是增強用戶體驗。
事出偶然,本來公司強調的是用WCF 做項目審批流程,WPF /E 增強用戶體驗;由于個人的無知與偷懶,我產生了天真的想法:用WPF/E 來做審批流程,這不是一舉兩得嗎。
下面介紹的就是用Silverlight (微軟在07 年9 月將WPF/E 更名為Silverlight )融合ajax 做的審批流程。界面上的審批流程從下向上包括3部分,部門審批,科技處審批,廠長審批。實現(xiàn)的功能是可以定制審批流程,比如審批流程是部門審批--> 廠長審批,也可以定制成科技處審批--> 廠長審批。定制的數據存在后臺xml 文件中。
前臺Silverlight 表現(xiàn)層語言xaml , 后臺服務器腳本語言C# ,數據存儲格式xml ,中間數據傳輸技術ajax 。
.Net中嵌入Silverlight Page 的方法是在aspx 中調用js 函數傳遞xaml 文件相對于服務器的路徑,如下:
<div style="width: 662px;height: 622px" id="SilverlightControlHost" >
<script type="text/javascript"><!--
createsL( 'workflow.xaml' );
// --></script>
</div>
函數調用Silverlight 的createObjectEx 方法指定xaml source 、parentElement 、events 等,相應代碼如下:
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 后臺cs 文件中[ Scriptable ] 表現(xiàn)層WPF 類(當初是Cavas),將該類注冊為可腳本化對象(RegisterScriptableObject)和可腳本化event ,并且在js 的events 設定表現(xiàn)層中的event ,實現(xiàn)方法如下:
xaml代碼:
[Scriptable]
public partial class workflow : Canvas
{
public workflow()
{
WebApplication.Current.RegisterScriptableObject("wpfe", this);
}
......
[Scriptable]
public event EventHandler workflowFunc;
}
js代碼:
function OnLoaded(sender,args)
{
sender.Content.wpfe.workflowFunc = onWorkflow;
}
另外,如果js 調用xaml 中的可腳本化函數的方法是
var control = document.getElementById("SilverlightControl");
var onReturnWfResult = control.Content.wpfe;
將xaml 中數據傳輸給后臺處理就用到ajax 技術了,在本例中是在onWorkflow 事件中定義XMLHttpRequest,然后通過該ajax 對象將數據傳遞到后臺。該例中的后臺腳本語言是C# ,數據接收方法是Request.Params 。
下面介紹的就是用Silverlight (微軟在07 年9 月將WPF/E 更名為Silverlight )融合ajax 做的審批流程。界面上的審批流程從下向上包括3部分,部門審批,科技處審批,廠長審批。實現(xiàn)的功能是可以定制審批流程,比如審批流程是部門審批--> 廠長審批,也可以定制成科技處審批--> 廠長審批。定制的數據存在后臺xml 文件中。
前臺Silverlight 表現(xiàn)層語言xaml , 后臺服務器腳本語言C# ,數據存儲格式xml ,中間數據傳輸技術ajax 。
.Net中嵌入Silverlight Page 的方法是在aspx 中調用js 函數傳遞xaml 文件相對于服務器的路徑,如下:
復制代碼 代碼如下:
<div style="width: 662px;height: 622px" id="SilverlightControlHost" >
<script type="text/javascript"><!--
createsL( 'workflow.xaml' );
// --></script>
</div>
函數調用Silverlight 的createObjectEx 方法指定xaml source 、parentElement 、events 等,相應代碼如下:
復制代碼 代碼如下:
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 后臺cs 文件中[ Scriptable ] 表現(xiàn)層WPF 類(當初是Cavas),將該類注冊為可腳本化對象(RegisterScriptableObject)和可腳本化event ,并且在js 的events 設定表現(xiàn)層中的event ,實現(xiàn)方法如下:
xaml代碼:
[Scriptable]
復制代碼 代碼如下:
public partial class workflow : Canvas
{
public workflow()
{
WebApplication.Current.RegisterScriptableObject("wpfe", this);
}
......
[Scriptable]
public event EventHandler workflowFunc;
}
js代碼:
復制代碼 代碼如下:
function OnLoaded(sender,args)
{
sender.Content.wpfe.workflowFunc = onWorkflow;
}
另外,如果js 調用xaml 中的可腳本化函數的方法是
var control = document.getElementById("SilverlightControl");
var onReturnWfResult = control.Content.wpfe;
將xaml 中數據傳輸給后臺處理就用到ajax 技術了,在本例中是在onWorkflow 事件中定義XMLHttpRequest,然后通過該ajax 對象將數據傳遞到后臺。該例中的后臺腳本語言是C# ,數據接收方法是Request.Params 。
相關文章
asp.net實現(xiàn)的MVC跨數據庫多表聯(lián)合動態(tài)條件查詢功能示例
這篇文章主要介紹了asp.net實現(xiàn)的MVC跨數據庫多表聯(lián)合動態(tài)條件查詢功能,結合實例形式較為詳細分析了asp.net基于MVC架構的跨數據庫多表聯(lián)合查詢功能實現(xiàn)技巧,需要的朋友可以參考下2017-02-02在Apache環(huán)境下成功的運行ASP.NET的注意事項
在Apache環(huán)境下成功的運行ASP.NET的注意事項...2007-08-08Asp.NetCore1.1版本去掉project.json后如何打包生成跨平臺包
這篇文章主要為大家詳細介紹了Asp.NetCore1.1版本去掉project.json后如何打包生成跨平臺包 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06讀取XML并綁定至RadioButtonList實現(xiàn)思路及演示動畫
讀取XML的文檔,可以使用System.Data.DataSet類別中的ReadXml()方法,在aspx網頁上拉一個RadioButtonList控件,用來顯示XML的數據,接下來,用DataSet去讀取剛才寫好的獲取XML文件的屬性,即可完成2013-01-01