ExtJs是一套非常不错的javascript UI库(第一次接触ExtJs的,可到官方网站http://www.extjs.com/deploy/dev/examples/samples.html看下示例。相信不少人会心动的),不仅组件丰富,效果漂亮,而且ExtJs集成的Ajax功能可以方便的与.Net的WCF进行交互.
这里我们将演示ExtJs的FormPanel从WCF加载数据,以及如何提交数据到WCF服务端
1.首先来定义一个用于传输信息的Class(实际开发中,可以是Linq to Sql的Class或任何可序列化的实体类)
public class MyData
{
[DataMember]
public string id;
[DataMember]
public string text;
}
正常简单,MyData中仅定义了二个成员id,text,加上[DataContract]与[DataMember]表明该类可以序列化
2.再定义几个用于跟ExtJs交互的方法(初次接触Ajax与WCF交互的同志,建议参考一下老张的"Ajax与WCF交互-WCF之美(http://www.cnblogs.com/jillzhang/archive/2008/06/13/1219201.html)")
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
这里定义了三个方法,GetMyData用来让ExtJs获取WCF端的数据,SaveMyData,SaveMyData2用来保存ExtJs提交过来的数据,区别是SaveMyData用于Get方法,SaveMyData2用于Post方法
需要说明的是[WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SaveMyData?id={id}&text={text}")]这一行,这里标明该方法可用Get/Post来处理数据,输出格式是Json字符串,UriTemplate表示该方法支持RESTFul风格,可用/MyService.svc?id=xxx&text=xxx来访问(关于RESTFul WCF,可参见雨痕的文章http://www.rainsts.net/article.asp?id=651 [RESTful WCF])
3.ExtJs前端页面
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormTest.aspx.cs" Inherits="Ajax_WCF.FormTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2.2/ext-all.js"></script>
<style>
*{font-size:9pt;line-height:120%;}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var form = new Ext.FormPanel({
title: "loadData from Server",
autoHeight: true,
labelAlign: "top",
width: 400,
frame: true,
renderTo: Ext.getBody(),
defaults: { labelWidth: 80, anchor: "95%" },
items: [{
xtype: "textfield",
fieldLabel: "id",
name: "id",
anchor: "90%"
}, {
xtype: "textfield",
fieldLabel: "text",
name: "text",
anchor: "90%"
}],
buttons: [{ text: "加载数据", handler: function() {
//form的load方法总是不成功,无奈只能用Ext.Ajax对象来处理
var loading = Ext.get("loading");
loading.dom.innerHTML = "正在加载。。。";
Ext.Ajax.request({
url: "MyService.svc/GetMyData", //服务器端地址
success: function(request) {
var data = Ext.util.JSON.decode(request.responseText); //将服务端wcf的返回值,格式化为Json对象
form.getForm().setValues(data); //更新form
loading.dom.innerHTML = "";
},
failure: function() {
alert("failure!");
}
});
}
}, {
text: "保存(Get方法)", handler: function() {
var loading = Ext.get("loading");
loading.dom.innerHTML = "正在保存。。。";
Ext.Ajax.request({
url: "MyService.svc/SaveMyData",
method: "GET",
params: { id: "001", text: "Get方法提交的数据" }, //这里为了演示用,随便给出几个值,实际开发时,可将测试值改为用Ext.get("id").dom.value之类
,如果提交成功,将从服务器返回处理结果
success: function(request) {
var data = request.responseText;
loading.dom.innerHTML = "";
alert(data);
},
failure: function() {
alert("failure!");
}
});
}
}, {
text: "保存(Post方法)", handler: function() {
var loading = Ext.get("loading");
loading.dom.innerHTML = "正在保存。。。";
Ext.Ajax.request({
url: "MyService.svc/SaveMyData2",
method: "POST",//注意这里
params: { id: "002", text: "Post方法提交的数据" },
success: function(request) {
var data = request.responseText;
loading.dom.innerHTML = "";
alert(data);
},
failure: function() {
alert("failure!");
}
});
}
}]
});
});
</script>
<div id="loading" style="color:red"> </div>
</body>
</html>
这里利用ExtJs的Ajax对象完成与WCF的交互(初次接触ExtJs Ajax的,可参见ExtJs学习笔记(5)_Ajax示例http://www.cnblogs.com/yjmyzz/archive/2008/08/30/1279918.html),相当简单!
最近学习了ExtJs和WCF后,个人强力推荐.net3.x时代web开发的绝佳组合: ExtJs(前端) + WCF(web服务层) + Linq To Sql(DAL,以后可能会换成Ado.Net Entity FrameWork),用起来简直是一种享受,目前用ExtJs的人似乎还不多,这里推荐一些学习的资源:http://www.cnblogs.com/yjmyzz/archive/2008/08/31/1280510.html
测试效果图:
1.加载数据
2.Get方法提交数据
3.Post方法提交数据