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

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

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

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

实例如下

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

view plaincopy to clipboardprint?
<body>
<div ></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的话要把所有的页面元素都清除干净，否则前台接收到的内容会有问题。
    */

//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;
        }
    }

}