• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

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

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

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

 1: var user = {"Id":1,"Name":"Hubery","Age":23,"Email":[email protected]}; 
 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":"[email protected]" 
 18: }, 
 19: { 
 20: "Id":2, 
 21: "Name":"Chris", 
 22: "Age":24, 
 23: "Address":{"City":"Beijing","ZipCode":"100085"}, 
 24: "Email":"[email protected]" 
 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:  

或许您对以下相关文章有兴趣:


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
基于ASP.NETAJAX的级联菜单发布时间:2022-07-10
下一篇:
回头再学Asp.net系列--基础篇(一)发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap