欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Silverlight融合ajax实现前后台数据交互

程序员文章站 2024-03-11 17:54:13
事出偶然,本来公司强调的是用wcf 做项目审批流程,wpf /e 增强用户体验;由于个人的无知与偷懒,我产生了天真的想法:用wpf/e 来做审批流程,这不是一举两得吗。 下...
事出偶然,本来公司强调的是用wcf 做项目审批流程,wpf /e 增强用户体验;由于个人的无知与偷懒,我产生了天真的想法:用wpf/e 来做审批流程,这不是一举两得吗。
下面介绍的就是用silverlight (微软在07 年9 月将wpf/e 更名为silverlight )融合ajax 做的审批流程。界面上的审批流程从下向上包括3部分,部门审批,科技处审批,厂长审批。实现的功能是可以定制审批流程,比如审批流程是部门审批--> 厂长审批,也可以定制成科技处审批--> 厂长审批。定制的数据存在后台xml 文件中。
前台silverlight 表现层语言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 ] 表现层wpf 类(当初是cavas),将该类注册为可脚本化对象(registerscriptableobject)和可脚本化event ,并且在js 的events 设定表现层中的event ,实现方法如下:
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 。