• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

『ExtJS』ExtJSGrid与Asp.NET通信

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

几点说明


  1. 所谓的与Asp.NET通信,并不是说 ExtJS 用HTML写,然后再与Asp.NET通信。
  2. 我们可以选择使用Html作为 ExtJS 的主体容器的。
  3. 所谓的通信,主要是通过 ExtJS 中的 Ajax 访问一个独立的 Asp.NET 页面(就是ASPX为扩展名的页面)来进行的。
  4. 这里只使用一条记录的数据,主要是因为做起来比较方便,如果需要,可以通过序列List<T>来回传 JSON
  5. 这里我使用 JSON 做为通信的数据格式,还可以用XML等(我没试过,抱歉)。
  6. 请不要直接Copy文中的代码,虽然它们很简单,因为可能会出现因环境、版本等原因而造成的异常。

 

 

主要代码


IDE: VS 2010 SP1

ExtJS 版本:3.4.0

参考文档:http://docs.sencha.com/ext-js/3-4/#!/api

 

new Ext.data.JsonStore({
                    // store configs
                    autoDestroy: true,
                    storeId: 'store',
                    // reader configs
                    idProperty: 'id',
                    fields: ['id', 'title']

                });

                Ext.Ajax.request({
                    url: 'WebForm1.aspx',
                    success: function (response, options) {
                        var storeJson = Ext.decode(response.responseText);
                        store.loadData(storeJson);
                    }
                });

                // Grid
                var grid = new Ext.grid.GridPanel({
                    renderTo: document.body,
                    title: 'Move Database',
                    height: 200,
                    width: 500,
                    store: store,
                    columns: [
                        { header: "Id", dataIndex: 'id' },
                        { header: "Title", dataIndex: 'title' }
                        ]
                });
            }); 
     </script>

class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            User user = new User();

            user.success = true;
            user.id = 1;
            user.title = "title";

            //JavaScriptSerializer类在System.Web.Extensions.dll中,注意添加这个引用  
            JavaScriptSerializer serializer = new JavaScriptSerializer();

            //JSON序列化  
            string result = serializer.Serialize(user);

            Response.Write(result);
        }
    }
    public class User
    {
        private bool _success;

        public bool success
        {
            get { return _success; }
            set { _success = value; }
        }

        private int _id;

        public int id
        {
            get { return _id; }
            set { _id = value; }
        }

        private string _title;

        public string title
        {
            get { return _title; }
            set { _title = value; }
        }

    }

说明:

  1. ExtJS :test.aspx
    1. Ext.onReady(),这个是必须的,至于为什么,不是这里的重点。
    2. function(),这个也不是这里的重点。
    3. Ext.data.JsonStore,这个是用于给Grid绑定数据的,类似数据字典一样的东西,具体见API文档,这个是一时说不清的。
      1. 这里的fields用于指定可用的 JSON 字段,可以与最终获取到的不同,结果是最后Grid中只显示在这里和 JSON 中都有的字段。
      2. 具体的参见API文档。
    4. loadData(),这个是JsonStore类型实例的一个方法,用于将JSON数据加载到实例中。这个必须有,就算你成功了,也是没数据给Grid用的。
    5. Ext.Ajax.request 这里一共使用了两个属性(最简单的使用了,其实这里在文档中是用「配置」来标注的)
      1. url:提供数据的后台Asp.NET页面地址。
      2. success:这个是request的方法,用于产生相应结果时调用,还有failure(用于失败时)等等。
      3. Ext.decode(response.responseText),Ext.decode是一个类似解码的方法,将后台response回来的 JSON 解释成我们用的形式。
      4. store.loadData(storeJson),加载返回数据到 JsonStore 中。
    6. 在Grid中
      1. 要注意,没有renderTo,可能会造成显示不出Grid。
      2. 使用store来指定JsonStore
      3. columns用于指定要显示的字段,其中dataIndex指定的是JSON「名/值」中的名。
  2. Asp.NET:WebForm1.aspx.cs
    1. 为了方便,这里使用了.NET自带的序列化JSON的类JavaScriptSerializer,它的命名空间是System.Web.Script.Serialization。
    2. 类User是我做为参考的一个伪Model类,这里如果你可以换成你自己的。
    3. 在User中,success是ExtJS的Ext.data.JsonStore这个类需要的。
    4. id 和 title 是User类里面的字段。
    5. 在序列化之前,一定要确定有值,不然在store.loadData(storeJson)这里会出现错误。
    6. result = serializer.Serialize(user),这里的Serialize是序列化的一个方法,其将类的属性和其值制成一个JSON样式的字符串。
    7. 如果没有特殊的事情要做,直接response.write(result)将序列化好的字符串不回就好。

 

 

结果页面


测试浏览器:Opera 11

改变后台中给User实例赋予的值


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NETMVC---分部类的使用发布时间:2022-07-10
下一篇:
【ASP.Net】PetShop4.0学习笔记1(VB)发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap