最近刚学习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 .
|
请发表评论