Extjs和Asp.NET后台的数据交互1

Ext.data.Connection应该说提供了最为简洁的与后台的异步调用功能

实例如下

首先是aspx页面内容(省略了head和对js文件引用的部分)

view plaincopy to clipboardprint?
<body> 
    <div id="form1"></div>                 
</body> 
<body>
    <div id="form1"></div>              
</body>

关于Extjs的内容写在jsdataConnection.js文件中

内容如下:

view plaincopy to clipboardprint?
Ext.onReady(function() {  
 
    var form1 = new Ext.form.FormPanel({  
        width: 350,  
        frame: true,  
        renderTo: "form1",  
        labelWidth: 80,  
        title: "form1",  
        bodyStyle: "padding:5px 5px 0",  
        defaults: { width: 150, xtype: "textfield" },  
        items: [  
        {  
            fieldLabel: "ID",  
            id: "ID",  
            anchor: "90%" 
        },  
        {  
            fieldLabel: "name",  
            id: "name",  
            anchor: "90%" 
        }  
        ],  
        buttons: [  
            { text: "確定", handler: function() { doUpdate(); } }  
        ]  
 
    });  
 
    //新建连接  
    var conn = new Ext.data.Connection({  
        autoAbort: false,  
        defaultHeaders: {  
            referer: 'http://localhost:1068' 
            //此处defaultHeaders可以不设置  
        },  
        disableCaching: false,  
        extraParams: {  
            params: 'Update' 
        },  
 
        method: 'post',  
        timeout: 300,  
        url: 'Handler.ashx'//此处如不指定,则默认访问当前页面  
    });  
    /* 
    其中 
    ①autoAbort:该request是否会自动断开(默认值false)。  
    ②disableCaching:设置为true就会添加一个独一无二的cache-buster参数来获取请求(默认值为true)。  
    ③extraParams:这些属性在该Connection发起的每次请求中作为外部参数使用 
    ④timeout:连接的超时时间  
    ⑤method:请求时使用的默认的http方法。【post】【get】  
    ⑥url:请求的网页地址,关于url最好使用ashx页面文件, 
    如果用aspx的话要把所有的页面元素都清除干净,否则前台接收到的内容会有问题。 
    */ 
 
    function doUpdate() {  
        //在创建了conn之后,可以调用request()函数发送请求,处理返回的结果,如下面的代码所示。  
        conn.request({  
            success: function(response) {  
                Ext.Msg.alert('info', response.responseText);  
                //response.responseText为返回的信息  
            },  
            failure: function() {  
                Ext.Msg.alert('warn', 'failure');  
            }  
        });  
    }  
 
    //success:成功后执行的方法(参数返回response)  
    //failure:失败时执行的方法  
 
}); 
Ext.onReady(function() {

    var form1 = new Ext.form.FormPanel({
        width: 350,
        frame: true,
        renderTo: "form1",
        labelWidth: 80,
        title: "form1",
        bodyStyle: "padding:5px 5px 0",
        defaults: { width: 150, xtype: "textfield" },
        items: [
        {
            fieldLabel: "ID",
            id: "ID",
            anchor: "90%"
        },
        {
            fieldLabel: "name",
            id: "name",
            anchor: "90%"
        }
        ],
        buttons: [
            { text: "確定", handler: function() { doUpdate(); } }
        ]

    });

    //新建连接
    var conn = new Ext.data.Connection({
        autoAbort: false,
        defaultHeaders: {
            referer: 'http://localhost:1068'
            //此处defaultHeaders可以不设置
        },
        disableCaching: false,
        extraParams: {
            params: 'Update'
        },

        method: 'post',
        timeout: 300,
        url: 'Handler.ashx'//此处如不指定,则默认访问当前页面
    });
    /*
    其中
    ①autoAbort:该request是否会自动断开(默认值false)。
    ②disableCaching:设置为true就会添加一个独一无二的cache-buster参数来获取请求(默认值为true)。
    ③extraParams:这些属性在该Connection发起的每次请求中作为外部参数使用
    ④timeout:连接的超时时间
    ⑤method:请求时使用的默认的http方法。【post】【get】
    ⑥url:请求的网页地址,关于url最好使用ashx页面文件,
    如果用aspx的话要把所有的页面元素都清除干净,否则前台接收到的内容会有问题。
    */

    function doUpdate() {
        //在创建了conn之后,可以调用request()函数发送请求,处理返回的结果,如下面的代码所示。
        conn.request({
            success: function(response) {
                Ext.Msg.alert('info', response.responseText);
                //response.responseText为返回的信息
            },
            failure: function() {
                Ext.Msg.alert('warn', 'failure');
            }
        });
    }

    //success:成功后执行的方法(参数返回response)
    //failure:失败时执行的方法

});
 

其中Handler.ashx的内容如下

(新建ashx文件,我对内容没有做任何改动,除了加上一句注释之外)

view plaincopy to clipboardprint?
<%@ WebHandler Language="C#" Class="Handler" %>  
 
using System;  
using System.Web;  
 
public class Handler : IHttpHandler {  
      
    public void ProcessRequest (HttpContext context) {  
        context.Response.ContentType = "text/plain";  
          
        //返回字符串Hello World          
        context.Response.Write("Hello World");          
    }  
   
    public bool IsReusable {  
        get {  
            return false;  
        }  
    }  
 


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/gishero/archive/2010/01/05/5133922.aspx

posted @ 2010-04-02 00:19  夜色狼  阅读(870)  评论(0编辑  收藏  举报