• 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:  

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

  • 相关阅读:
    JavaScript类型转换
    JavaScript中的 typeof,null,和undefined
    JavaScript循环
    JavaScript条件语句
    JavaScript运算符
    JavaScript字符串
    JavaScript事件
    JavaScript对象,函数,作用域
    JavaScript基础
    数值数据的特征预处理
  • 原文地址:https://www.cnblogs.com/Mainz/p/Extjs_Aspnet_ashx_asmx.html
Copyright © 2020-2023  润新知