c#和Javascript操作同一json對(duì)象的實(shí)現(xiàn)代碼
2024-05-06 14:22:36
供稿：網(wǎng)友
能否讓客戶端和服務(wù)端操作同一json對(duì)象呢？目前想到的方式是通過客戶端隱藏控件來實(shí)現(xiàn)。
以下是一個(gè)泛型列表對(duì)象 List<TrainingImplement> ，轉(zhuǎn)為json后，客戶端和服務(wù)端如何操作
1、json對(duì)象與C#泛型相互轉(zhuǎn)換代碼
代碼如下:
//將json數(shù)據(jù)轉(zhuǎn)換為泛型
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;
}
//將泛型轉(zhuǎn)換為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數(shù)據(jù)源存入在客戶端隱藏控件中
代碼如下:
<input type="hidden" id="hideDataSource" runat="server" />
3、注意隱藏控件放json數(shù)據(jù)后，因?yàn)榘?/"，會(huì)使request請(qǐng)示發(fā)生錯(cuò)誤，所以頁頭請(qǐng)?jiān)O(shè)置ValidateRequest="false"
代碼如下:
<%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="true"
4、頁面加載Page_Load時(shí)，初始化json數(shù)據(jù)源
代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
#region 加載數(shù)據(jù)源
if (!IsPostBack)
{
List<TrainingImplement> list= new List<TrainingImplement> (){
new TrainingImplement (){
Code="aaa",
c_name ="bbb"
}
....
}//初始化數(shù)據(jù)源
hideDataSource.Value = ConvertObjectToByteData(list);
}
else
{
//如果是回傳，數(shù)據(jù)源從客戶端讀取
List<TrainingImplement> list = ConvertByteDataToObject<List<TrainingImplement>>(hideDataSource.Value);
hideDataSource.Value = ConvertObjectToByteData(list);
}
#endregion
4、客戶端js操作json數(shù)據(jù)源示例
代碼如下:
<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 () {
//獲取數(shù)據(jù)源
dataSourceDom = document.getElementById(DataSourceHidName);
dataSourceJson = eval("(" + dataSourceDom.value + ")");
});
//修改第1個(gè)TrainingImplement對(duì)象的Code值示例方法
function ModifiedCode() {
dataSourceJson[0]._code = "Code001";
//將更新值后的json對(duì)象重新寫入隱藏控件中
dataSourceDom.value = $.toJSON(dataSourceJson);
}
</script>
