ExtJS之ASP.NET服务器端实现ashx和asmx处理客户端请求

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

ExtJS是一个客户端JS和UI控件框架，不管服务器端的实现，你可以使用ASP.NET，JAVA，Ruby，PHP等做服务器端实现，都可以。这里简单说一下使用ASP.NET做服务器端和ExtJS的交互。

先说一下交互的数据格式：JSON。示例：

var user = {"Id":1,"Name":"Hubery","Age":23,"Email":[email protected]}; 
  
//数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
  
var users = 
  
[ 
{ 
"Id":1, 
"Name":"Hubery", 
"Age":23, 
"Address": 
[ 
{"City":"Beijing","ZipCode":"111111"}, 
{"City":"Langfang","ZipCode":"222222"} 
], 
"Email":"[email protected]" 
}, 
{ 
"Id":2, 
"Name":"Chris", 
"Age":24, 
"Address":{"City":"Beijing","ZipCode":"100085"}, 
"Email":"[email protected]" 
} 
] ;
  
//注意有特殊字符需要反斜线转义。
  

服务器端返回单个对象，或对象list（数组），必须是JSON格式。

然后说一下服务器端的实现，大家知道，ASP.NET服务器端的handler有3种： aspx页面，自定义HttpHandler，和Webservice。

1. 服务器端使用ashx ( HttpHandler ) 处理客户端请求，返回list

客户端：

var store = new Ext.data.JsonStore({ 
url: 'DefaultHandler.ashx?method=getlist', 
  
// ….
  
})

服务器端：

using System;
using System.Web;
using System.Collections.Generic; 
using System.Web.Script.Serialization;
  
public class DefaultHandler : IHttpHandler { 
public void ProcessRequest (HttpContext context) 
{
string response = string.Empty;
string str = context.Request.QueryString["method"]; 
  
if (string.IsNullOrEmpty(str)) 
{ 
context.Response.Write("error!"); 
return; 
} 
  
switch (str) 
{ 
case "getlist": 
response = GetList(context); 
break; 
//下边还有可以接着写. 
} 
context.Response.Write(response);
context.Response.End();
  
} 
  
public bool IsReusable { 
get { 
return false; 
} 
} 
  
public string GetList(HttpContext context) 
{
  
//从数据库取得list数据： 
List<myEntity> data = DAL.GetData();
  
return ToJson(data.ToArray());
  
} 
  
//序列化对象为json数据 
public string ToJson(object o) 
{ 
JavaScriptSerializer j = new JavaScriptSerializer(); 
return j.Serialize(o); 
}

} 
  

本例也可以进一步优化成: 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非常方便:

<asp:ScriptManager ID="SM1" runat="server">
<Services>
<asp:ServiceReference Path="WebServiceSample.asmx"/>
</Services>
</asp:ScriptManager>

或者动态声明WebService：

 1: ScriptManager sm = getScriptManager();
 2: sm.Services.Add(new ServiceReference(servicePath));//"WebServiceSample.asmx"

WebService实现：

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Collections.Generic; 
  
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[ScriptService] //[ScriptService]一定要，这样script才能调用web service
[ToolboxItem(false)]
public class WebServiceSample: System.Web.Services.WebService
{
[WebMethod] 
public string TestMethod()
{
return “hello world”;
}
}
  

在JS中就可以调用：WebServiceSample.TestMethod(param, onSuccessCallback)。

当然，你也可以测试一下下面的Ext调用方法：

Ext.Ajax.request({
　　method: "post",
　　url: "WebServiceSample.asmx/TestMethod",
　　jsonData: {sourceID: 1, targetID: 2, type: "above"}, //如果WebMethod有参数的话, int:sourceID, int:targetID, string:type
  
　　success: function(request) {
　　　　var root = forumTree.root;
　　　　removeChildNodes(root); // remove root is all child nodes
　　　　appendChildNodesFromServerData(root); // load data
　　},
　　failure: function() {
　　　　Ext.MessageBox.show({
　　　　　　title: '版块管理',
　　　　　　msg: '对不起,操作执行失败,请重试!',
　　　　　　buttons: Ext.MessageBox.OK,
　　　　　　icon: Ext.MessageBox.ERROR
　　　　});
　　}
});
  