Extjs4.0利用Json与Asp.net mvc3服务端进行交互

最近刚学习Extjs4,在项目开发过程中遇到了如何把js中的json数据提交到服务端进行数据处理的问题。

交互分二部分:

第一种:返回json,即用js调用服务端的Action,返回json数据,这部分网上有很多资料介绍,大家可以搜一下JsonHelper这个类。
第二种:提交Json,即用js调用服务端的Action,并将json数据提交到服务端。
这里主要介绍第二种情况,根据上传数据的复杂度,又分以下几种情况:
1.上传字符串
Extjs代码:
var data= '丹东一达软件开发有限公司'
Ext.Ajax.request({
method : 'POST',
url : '/Dept/SaveDept',
headers : {
contentType : 'application/json'
},
jsonData : {
Items : data
},
success : function(response) {
},
failure : function(resp, opts) {
}
});
服务端代码:
[HttpPost]
public JsonResult SaveDept(string Items )
{
//这里写代码
}
2.上传实体类

Extjs代码:
var data= {Id:1,DeptName:'软件部'}
Ext.Ajax.request({
method : 'POST',
url : '/Dept/SaveDept',
headers : {
contentType : 'application/json'
},
jsonData : {
Items : data
},
success : function(response) {
},
failure : function(resp, opts) {
}
});
服务端代码:
public class dept
{
public int Id { get; set; }
public string DeptName { get; set; }
}
[HttpPost]
public JsonResult SaveDept(dept Items )
{
//这里写代码
}

3.上传实体类集合
Extjs代码:
var store = g.getStore();
var records_add = store.getNewRecords();
var records_edit = store.getUpdatedRecords();
var data = [];
Ext.Array.each(records_add, function(model) {
data.push(model.data);
});
Ext.Ajax.request({
method : 'POST',
url : '/Dept/SaveDept',
headers : {
contentType : 'application/json'
},
jsonData : {
Items : data
},
success : function(response) {
},
failure : function(resp, opts) {
}
});
服务端代码:
public class dept
{
public int Id { get; set; }
public string DeptName { get; set; }
}
[HttpPost]
public JsonResult SaveDept(List<BLL.dept> Items)
{
//这里写代码
}

小结:基本上花了一天时间,百度和谷歌了很多文章,但都没有找到相关的处理办法,也可能是我搜的关键字有问题吧,我想
所有使用 ExtJs+asp.net mvc的朋友都会遇到这个问题,因此写在这和大家分享一下经验。
从上面的三个小例子可以看出,ExtJs上传的json数据的类型要与服务端接收的类型一致,
Extjs Asp.net Mvc
string string
object model
array list<T>
如此,asp.net mvc会自动的把json数据映射成服务端的变量、对象、对象集合,服务端可以方便的进行数据的业务逻辑处理了。

data.push(model.data); 这段代码,网上不少文章都是这样写 data.push(Ext.encode(model.data)); 我抄下来之后,会发现
里面的中文都变成了乱码,同时,传到服务端也不能正常被反序列化了。教训啊。

由于时间匆忙,写的比较简单,有一定基础的朋友应该能看明白的吧??呵呵,如果还是不懂,可以加我QQ:313366 .

enjoy it .

你可能感兴趣的:(Extjs4.0)