几点说明
- 所谓的与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文档,这个是一时说不清的。
- loadData(),这个是JsonStore类型实例的一个方法,用于将JSON数据加载到实例中。这个必须有,就算你成功了,也是没数据给Grid用的。
- Ext.Ajax.request 这里一共使用了两个属性(最简单的使用了,其实这里在文档中是用「配置」来标注的)
- 在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)将序列化好的字符串不回就好。
结果页面
测试浏览器:Opera 11
改变后台中给User实例赋予的值