ExtJs学习笔记(20)-利用ExtJs的Ajax与服务端WCF交互

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或任何可序列化的实体类)

 [DataContract]
 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)")

[ServiceContract(Namespace = "")]

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

    public class MyService

    {

    [OperationContract]

        [WebInvoke(ResponseFormat = WebMessageFormat.Json, Method = "*", UriTemplate = "GetMyData")]

        public MyData GetMyData()

        {

            System.Threading.Thread.Sleep(1000);

            MyData _Node = new MyData() { id = "1", text = "test text" };

            return _Node;

        }



     /**//// <summary>

        /// RESTFul WCF用于Get方式取得ExtJs提交的数据(Json)

        /// </summary>

        /// <param name="id"></param>

        /// <param name="text"></param>

        /// <returns></returns>

        [OperationContract]

        [WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SaveMyData?id={id}&text={text}")]

        public MyData SaveMyData(string id,string text)

        {           

            System.Threading.Thread.Sleep(1000);

            MyData _Node = new MyData() { id = id, text = text };

            return _Node;

        }





/**//// <summary>

        /// Post方法处理ExtJs提交的数据(Json格式)

        /// </summary>

        /// <param name="input"></param>

        /// <returns></returns>

        [OperationContract]

        [WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SaveMyData2")]

        public MyData SaveMyData2(Stream input)

        {

            string s = "";

            using (StreamReader sr = new StreamReader(input))

            {

                s = sr.ReadToEnd(); 

            }          

            NameValueCollection qs = HttpUtility.ParseQueryString(s); 

            string id = qs["id"]; 

            string text = qs["text"];



            System.Threading.Thread.Sleep(1000);

            MyData _Node = new MyData() { id = id, text = text };

            return _Node;

        }

}

这里定义了三个方法,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前端页面

<%@ 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">&nbsp;</div>
</body>
</html>

这里利用ExtJs的Ajax对象完成与WCF的交互(初次接触ExtJs Ajax的,可参见ExtJs学习笔记(5)_Ajax示例https://cloud.tencent.com/developer/article/1026518),相当简单!

最近学习了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方法提交数据

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

React函数式进阶

React让很多人让追捧的一个特性是它的所有的组件都是完全由JavaScript组成的。组件的定义是JavaScript,组件的模板也可以是JavaScript...

2376
来自专栏刘望舒

Android PMS处理APK的复制

在上一篇文章Android包管理机制之PackageInstaller安装APK中,我们学习了PackageInstaller是如何安装APK的,最后会将APK...

2215
来自专栏java学习

servlet实现文件上传功能

最新通知 ●回复"每日一练"获取以前的题目! ●【新】Android视频更新了!(回复【安卓视频】获取下载链接) ●【新】Ajax知识点视频更新了!(回复【学习...

34712
来自专栏技术小讲堂

使用WCF进行跨平台开发之一(WCF的实现、控制台托管与.net平台的调用)1.创建项目结构2.契约的设计3.实现服务4.控制台托管服务5.在.net平台中调用WCF

     WCF是Windows Communication Foundation的缩写,是微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,...

4139
来自专栏马洪彪

Java生成条码二维码

一、概述 可用barcode4j或zxing等第三方库,推荐zxing。 barcode4j资料链接:http://barcode4j.sourceforge....

5038
来自专栏子勰随笔

iMac使用过程中的简单故障解决

2241
来自专栏有趣的django

一个完整的Django入门指南(三)

第五部分  Introduction Welcome to the 5th part of the tutorial series! In this tutor...

4997
来自专栏c#开发者

使用JavaScript访问XML数据

使用JavaScript访问XML数据 在网络浏览器软件中,可以Internet Explorer (IE)现在是一种标准的软件。可以看到,运行不同版本的Wi...

2974
来自专栏圣杰的专栏

Asp.net mvc 知多少(三)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan,想...

2196
来自专栏landv

办公用品管理系统VB——库存数量导出EXCEL,SaveEXCEL

总体来说,VB的EXCEL导出效率还是蛮低的,就是一个小型化的办公用品管理软件,不再优化了。

2182

扫码关注云+社区

领取腾讯云代金券