ExtJS之ASP.NET服务器端实现ashx和asmx处理客户端请求
ExtJS是一个客户端JS和UI控件框架，不管服务器端的实现，你可以使用ASP.NET，JAVA，Ruby，PHP等做服务器端实现，都可以。这里简单说一下使用ASP.NET做服务器端和ExtJS的交互。
先说一下交互的数据格式：JSON。示例：
1: var user = {"Id":1,"Name":"Hubery","Age":23,"Email":hubery@163.com};
2:
3: //数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
4:
5: var users =
6:
7: [
8: {
9: "Id":1,
10: "Name":"Hubery",
11: "Age":23,
12: "Address":
13: [
14: {"City":"Beijing","ZipCode":"111111"},
15: {"City":"Langfang","ZipCode":"222222"}
16: ],
17: "Email":"hubery@163.com"
18: },
19: {
20: "Id":2,
21: "Name":"Chris",
22: "Age":24,
23: "Address":{"City":"Beijing","ZipCode":"100085"},
24: "Email":"chris@163.com"
25: }
26: ] ;
27:
28: //注意有特殊字符需要反斜线转义。
29:
服务器端返回单个对象，或对象list（数组），必须是JSON格式。
然后说一下服务器端的实现，大家知道，ASP.NET服务器端的handler有3种： aspx页面，自定义HttpHandler，和Webservice。
1. 服务器端使用ashx ( HttpHandler ) 处理客户端请求，返回list
客户端：
1: var store = new Ext.data.JsonStore({
2: url: 'DefaultHandler.ashx?method=getlist',
3:
4: // ….
5:
6: })
服务器端：
1: using System;
2: using System.Web;
3: using System.Collections.Generic;
4: using System.Web.Script.Serialization;
5:
6: public class DefaultHandler : IHttpHandler {
7: public void ProcessRequest (HttpContext context)
8: {
9: string response = string.Empty;
10: string str = context.Request.QueryString["method"];
11:
12: if (string.IsNullOrEmpty(str))
13: {
14: context.Response.Write("error!");
15: return;
16: }
17:
18: switch (str)
19: {
20: case "getlist":
21: response = GetList(context);
22: break;
23: //下边还有可以接着写.
24: }
25: context.Response.Write(response);
26: context.Response.End();
27:
28: }
29:
30: public bool IsReusable {
31: get {
32: return false;
33: }
34: }
35:
36: public string GetList(HttpContext context)
37: {
38:
39: //从数据库取得list数据：
40: List<myEntity> data = DAL.GetData();
41:
42: return ToJson(data.ToArray());
43:
44: }
45:
46: //序列化对象为json数据
47: public string ToJson(object o)
48: {
49: JavaScriptSerializer j = new JavaScriptSerializer();
50: return j.Serialize(o);
51: }
52:
53: }
54:
本例也可以进一步优化成: url: 'DefaultHandler.ashx?provider=myproviderA&method=getlist', 在DefaultHandler 中处理provider参数，用工厂模式创建其他的provider，返回list。最后不要忘了在web.config配置相应的handler的类或httpHandlerFactory。
2. 服务器端使用asmx ( Web Service ) 处理客户端请求，返回单个值或对象。
有了ASP.NET AJAX，有了ScriptManager，在JS中调用服务器端WebService非常方便:
1: <asp:ScriptManager ID="SM1" runat="server">
2: <Services>
3: <asp:ServiceReference Path="WebServiceSample.asmx"/>
4: </Services>
5: </asp:ScriptManager>
或者动态声明WebService：
1: ScriptManager sm = getScriptManager();
2: sm.Services.Add(new ServiceReference(servicePath));//"WebServiceSample.asmx"
WebService实现：
1: using System;
2: using System.Web;
3: using System.Web.Services;
4: using System.Web.Services.Protocols;
5: using System.Web.Script.Services;
6: using System.Collections.Generic;
7:
8: [WebService(Namespace = "http://tempuri.org/")]
9: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
10: // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
11: [ScriptService] //[ScriptService]一定要，这样script才能调用web service
12: [ToolboxItem(false)]
13: public class WebServiceSample: System.Web.Services.WebService
14: {
15: [WebMethod]
16: public string TestMethod()
17: {
18: return “hello world”;
19: }
20: }
21:
在JS中就可以调用：WebServiceSample.TestMethod(param, onSuccessCallback)。
当然，你也可以测试一下下面的Ext调用方法：
1: Ext.Ajax.request({
2: method: "post",
3: url: "WebServiceSample.asmx/TestMethod",
4: jsonData: {sourceID: 1, targetID: 2, type: "above"}, //如果WebMethod有参数的话, int:sourceID, int:targetID, string:type
5:
6: success: function(request) {
7: var root = forumTree.root;
8: removeChildNodes(root); // remove root is all child nodes
9: appendChildNodesFromServerData(root); // load data
10: },
11: failure: function() {
12: Ext.MessageBox.show({
13: title: '版块管理',
14: msg: '对不起,操作执行失败,请重试!',
15: buttons: Ext.MessageBox.OK,
16: icon: Ext.MessageBox.ERROR
17: });
18: }
19: });
20:
或许您对以下相关文章有兴趣：
