ext异步请求一个aspx/ashx/web service取得数据,服务端返回一个json.然后客户端接收并显示.

最新推荐文章于 2013-11-14 09:00:03 发布

云烟，不再年轻

最新推荐文章于 2013-11-14 09:00:03 发布

阅读量5.1k

点赞数 1

分类专栏： Ext Ajax 框架 Asp.Net 文章标签： ext service function stylesheet asp.net button

Asp.Net 同时被 2 个专栏收录

339 篇文章

订阅专栏

Ext Ajax 框架

70 篇文章

订阅专栏

今天在论坛中有人问ext和asp.net是如何进行交互的,对于一个刚入门的新手来说,这个问题可能会使其比较迷惑,下面我写一个非常简单的例子来说明一下ext如何与asp.net来进行数据交互

Default.htm:

 
 <!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>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>  
</head>
<body>
<div id="listContainer"></div>
<script type="text/javascript">
var store = new Ext.data.JsonStore({
    url: 'DefaultHandler.ashx?method=getlist',
    root: 'items',
    remoteSort: true,
    fields: [
        'TestName',
        'TestValue'
            ],
    listeners:{
        load: function(store, records, options){
                 grid.render();
        },
        loadexception: function(proxy, options, response){
                Ext.Msg.alert('Load data error!', response.responseText);
        }
    }
});

Ext.onReady(function(){
    Ext.QuickTips.init();
    store.load();
});

var listContainer=Ext.get("listContainer"); 
var grid = new Ext.grid.GridPanel({
    el: 'listContainer',
    width:listContainer.getComputedWidth(),
    autoHeight: true,
    store: store,
    disableSelection: false,
    loadMask: true,
    deferRowRender: false,
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    columns:[
    {
    header: 'name',
    dataIndex: 'TestName',
    sortable: true
    },{
    header: 'value',
    dataIndex: 'TestValue',
    sortable: true
    }]
});

window.onresize=function(){
        grid.setWidth(listContainer.getComputedWidth());
};
function Button1_onclick() {
   //这里简单的来访问一下store中的数据
   alert(store.data.items[0].data.TestName);
   alert(store.data.items[0].data.TestValue);
}

</script>
    <input id="Button1" type="button" value="display" onclick="return Button1_onclick()" />
</body>
</html>

 

DefaultHandler.ashx:

 
 <%@ WebHandler Language="C#" Class="DefaultHandler" %>

using System;
using System.Web;
using System.Data;

public class DefaultHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string str = context.Request.QueryString["method"];
        if (string.IsNullOrEmpty(str))
        {
            context.Response.Write("error!");
            return;
        }

        switch (str)
        { 
            case "getlist":
                GetList(context);
                break;
            //下边还有可以接着写.                  
        }
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

    public void GetList(HttpContext context)
    {
        //这里模拟一个DataTable,实际应用中可能是去数据库里查询数据  
        DataTable dt = new DataTable();
        dt.Columns.Add("TestName", typeof(string));
        dt.Columns.Add("TestValue", typeof(string));
        for (int i = 0; i < 6; i++)
        {
            DataRow dr = dt.NewRow();
            dr["TestName"] = "TestName" + i.ToString();
            dr["TestValue"] = "TestValue" + i.ToString();
            dt.Rows.Add(dr);
        }
        //将一个DataTable中的数据转成json,实际开发中可以用Newtonsoft.Json等  
         //组件将集合类等,方便的转成json对象  
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("{items: [");
        foreach (DataRow dr in dt.Rows)
        {
            sb.Append("{");
            sb.AppendFormat("TestName:'{0}',TestValue:'{1}'", dr[0], dr[1]);
            sb.Append("},");
        }
        //输出拼成的json  
        context.Response.Write(sb.ToString().Trim(',') + "]}");
    }
}

 