ExtJS Grid 与 Asp.NET 通信
来源:互联网 发布:淘宝情趣用品 编辑:程序博客网 时间:2024/05/30 05:09
几点说明
- 所谓的与Asp.NET通信,并不是说 ExtJS 用HTML写,然后再与Asp.NET通信。
- 我们可以选择使用Html作为 ExtJS 的主体容器的。
- 所谓的通信,主要是通过 ExtJS 中的 Ajax 访问一个独立的 Asp.NET 页面(就是ASPX为扩展名的页面)来进行的。
- 这里只使用一条记录的数据,主要是因为做起来比较方便,如果需要,可以通过序列List<T>来回传 JSON 。
- 这里我使用 JSON 做为通信的数据格式,还可以用XML等(我没试过,抱歉)。
- 请不要直接Copy文中的代码,虽然它们很简单,因为可能会出现因环境、版本等原因而造成的异常。
主要代码
IDE: VS 2010 SP1
ExtJS 版本:3.4.0
参考文档:http://docs.sencha.com/ext-js/3-4/#!/api
ExtJS 代码<script type="text/javascript"> Ext.onReady(function () { var store = 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>
后台Asp.NET页面代码 public partial 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; } } }
说明:
- ExtJS :test.aspx
- Ext.onReady(),这个是必须的,至于为什么,不是这里的重点。
- function(),这个也不是这里的重点。
- Ext.data.JsonStore,这个是用于给Grid绑定数据的,类似数据字典一样的东西,具体见API文档,这个是一时说不清的。
- 这里的fields用于指定可用的 JSON 字段,可以与最终获取到的不同,结果是最后Grid中只显示在这里和 JSON 中都有的字段。
- 具体的参见API文档。
- loadData(),这个是JsonStore类型实例的一个方法,用于将JSON数据加载到实例中。这个必须有,就算你成功了,也是没数据给Grid用的。
- Ext.Ajax.request 这里一共使用了两个属性(最简单的使用了,其实这里在文档中是用「配置」来标注的)
- url:提供数据的后台Asp.NET页面地址。
- success:这个是request的方法,用于产生相应结果时调用,还有failure(用于失败时)等等。
- Ext.decode(response.responseText),Ext.decode是一个类似解码的方法,将后台response回来的 JSON 解释成我们用的形式。
- store.loadData(storeJson),加载返回数据到 JsonStore 中。
- 在Grid中
- 要注意,没有renderTo,可能会造成显示不出Grid。
- 使用store来指定JsonStore。
- columns用于指定要显示的字段,其中dataIndex指定的是JSON「名/值」中的名。
- Asp.NET:WebForm1.aspx.cs
- 为了方便,这里使用了.NET自带的序列化JSON的类JavaScriptSerializer,它的命名空间是System.Web.Script.Serialization。
- 类User是我做为参考的一个伪Model类,这里如果你可以换成你自己的。
- 在User中,success是ExtJS的Ext.data.JsonStore这个类需要的。
- id 和 title 是User类里面的字段。
- 在序列化之前,一定要确定有值,不然在store.loadData(storeJson)这里会出现错误。
- result = serializer.Serialize(user),这里的Serialize是序列化的一个方法,其将类的属性和其值制成一个JSON样式的字符串。
- 如果没有特殊的事情要做,直接response.write(result)将序列化好的字符串不回就好。
0 0
- ExtJS Grid 与 Asp.NET 通信
- ExtJS Grid 与 Asp.NET 通信
- asp。net 和 extjs 结合grid 分页
- ExtJS 6 Grid使用示例(ASP.NET MVC4 项目)
- ExtJs 4 Grid filter in asp.net mvc action表格 查询与过滤的最佳解析解决方案
- Flex 与asp.net通信
- Flex与ASP.Net通信
- EXTjs grid与json数据
- EXTjs grid与json数据
- Extjs、ASP.net前后台Grid分页 数据库多表交互
- Extjs、ASP.net前后台Grid分页 数据库多表交互
- Extjs、ASP.net前后台Grid分页 数据库多表交互
- Extjs ASp.net
- extjs asp.net 乱码
- asp.net之extjs
- 实现flash与asp.net通信【转】
- matlab与asp.net通信交互
- ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)
- JSON资料整理
- NYOJ589 糖果
- repeater行中的TextBox利用datepicker输入日期
- LNMP环境搭建
- POJ 1953 World Cup Noise
- ExtJS Grid 与 Asp.NET 通信
- LAMP环境搭建
- linux centos nginx 配置虚礼主机
- extjs官网+extjs官网案例
- boost log库使用 十二 架构研究和主要使用总结
- hdu 1166 树状数组 线段树入门
- linux centos nginx 虚礼主机 反向代理 配置
- 杯子与水
- hdu 3586 Information Disturbing(二分+树dp)