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 .

转载于:https://www.cnblogs.com/edsoft/archive/2011/12/19/2292970.html