c#和Javascript操作同一json对象的实现代码


Posted in Javascript onJanuary 17, 2012

能否让客户端和服务端操作同一json对象呢?目前想到的方式是通过客户端隐藏控件来实现。
以下是一个泛型列表对象 List<TrainingImplement> ,转为json后,客户端和服务端如何操作
1、json对象与C#泛型相互转换代码

//将json数据转换为泛型 
public static T ConvertByteDataToObject<T>(string byteData) 
{ 
T obj; 
using (var ms = new MemoryStream(Encoding.UTF8.GetBytes(byteData))) 
{ 
var serializer = new DataContractJsonSerializer(typeof(T)); 
obj = (T)serializer.ReadObject(ms); 
} 
return obj; 
} 
//将泛型转换为json 
public static string ConvertObjectToByteData<T>(T obj) 
{ 
string result; 
using (var ms = new MemoryStream()) 
{ 
var serializer = new DataContractJsonSerializer(typeof(T)); 
serializer.WriteObject(ms, obj); 
ms.Position = 0; 
result = Encoding.UTF8.GetString(ms.ToArray()); 
} 
return result; 
}

2、json数据源存入在客户端隐藏控件中
<input type="hidden" id="hideDataSource" runat="server" />

3、注意隐藏控件放json数据后,因为包含"/",会使request请示发生错误,所以页头请设置ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="true"

4、页面加载Page_Load时,初始化json数据源
protected void Page_Load(object sender, EventArgs e) 
{ 
#region 加载数据源 
if (!IsPostBack) 
{ 
List<TrainingImplement> list= new List<TrainingImplement> (){ 
new TrainingImplement (){ 
Code="aaa", 
c_name ="bbb" 
} 
.... 
}//初始化数据源 
hideDataSource.Value = ConvertObjectToByteData(list); 
} 
else 
{ 
//如果是回传,数据源从客户端读取 
List<TrainingImplement> list = ConvertByteDataToObject<List<TrainingImplement>>(hideDataSource.Value); 
hideDataSource.Value = ConvertObjectToByteData(list); 
} 
#endregion

4、客户端js操作json数据源示例
<script type="text/javascript" src="../Scripts/jquery-1.4.3.js"></script> 
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.7.custom.min.js"></script> 
<script type="text/javascript" src="../Scripts/jquery.json-2.2.min.js"></script> 
<script type ="text/javascript" > 
var DataSourceHidName = "hideDataSource"; 
var dataSourceDom; 
var dataSourceJson; 
$(document).ready 
(function () { 
//获取数据源 
dataSourceDom = document.getElementById(DataSourceHidName); 
dataSourceJson = eval("(" + dataSourceDom.value + ")"); 
}); 
//修改第1个TrainingImplement对象的Code值示例方法 
function ModifiedCode() { 
dataSourceJson[0]._code = "Code001"; 
//将更新值后的json对象重新写入隐藏控件中 
dataSourceDom.value = $.toJSON(dataSourceJson); 
} 
</script>

5、服务端C#操作Json数据源
List<TrainingImplement> list = ConvertByteDataToObject<List<TrainingImplement>>(hideDataSource.Value);
Javascript 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
react中Suspense的使用详解
Sep 01 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 #Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 #Javascript
javascript椭圆旋转相册实现代码
Jan 16 #Javascript
Prototype源码浅析 Number部分
Jan 16 #Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 #Javascript
Prototype源码浅析 String部分(二)
Jan 16 #Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 #Javascript
You might like
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
基于node实现websocket协议
2016/04/25 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Python中turtle作图示例
2017/11/15 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python 实现多维数组(array)排序
2020/02/28 Python
用python绘制樱花树
2020/10/09 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
应届毕业生求职信范例分享
2013/12/17 职场文书
高一数学教学反思
2014/02/07 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书