json学习总结(2)
JSON进阶六-自动组装
现在很流行自动组装啊,为什么前台不行那?小弟不才也来个自动组装。
示例如下:
您可以看到,上述HTML中,我用红色标记出来的type为list,它代表了一个子集合。同时大家也应该看到我用绿色标记出来的地方(name="Score.Chinese"),它在JSON中表示:{Score:{Chinese:""}} 也就是说JsonSerializer不仅支持list还能够支持对象的对象,蓝色标记的Template属性是在反向绑定时使用的(表示要克隆行模板,是一个‘#’+ID)。同时您也应该看到了黄色标记的msg了把,对了这个就是验证提示信息(如果有特殊的需要,可以重写JsonSerializer.Message()),在看看深红色标记的dataType表示验证数据类型,而验证的代码使用的是Validator这个JSON,您可以按自己需求扩充,详情可以参考下面的JS示例代码。
function AddStudent() { // 找到template下的DIV既template1(行模板) var template = $("#template").children("div").clone(); $("#Stus").append(template); } function GetJson() { var json = JsonSerializer.TableToJson("#tab1"); if (JsonSerializer.IsAllow) { $.ajax({ type: "POST", url: '<%= Request.Url.AbsolutePath %>', data: "tabs=" + json, success: function(msg) { alert(msg); } }); } } // 删除学生信息(行) function DelStudent(obj) { $(obj).parent("samp").parent("div").remove(); } $(document).ready( function() { // 后台价值来的JSON数组结构的字符串,当然可以说从数据库查询而得,我这里是写死的。 var json = JSON2.parse('<%= this.json %>'); // 绑定前台ID为tab1的结构中。 JsonSerializer.JsonToTab("#tab1", json); // 重写验证类,len是对班级名做验证,text是对简介做验证,您可以通知扩充满足自己的需求 $.extend(Validator, { len: function(data) { var reg = new RegExp(/[0-9,a-z,A-Z]{6}/); return reg.test(data); }, text: function(date) { return date && date.length < 1000; } }); } );
可以看出除添加和删除动态行外,JSON的提取和绑定的代码是非常简单。
public partial class ExampleTwo : System.Web.UI.Page { public string json = "[{\"Name\":\"T31611\",\"Student\":[{\"ID\":1,\"Name\":\"张三\",\"Sex\":1,\"Score\":" +"{\"Chinese\":33,\"Math\":44,\"English\":55}},{\"ID\":2,\"Name\":\"李四\",\"Sex\":2," +"\"Score\":{\"Chinese\":55,\"Math\":66,\"English\":77}},{\"ID\":3,\"Name\":\"杨大\"," +"\"Sex\":1,\"Score\":{\"Chinese\":100,\"Math\":100,\"English\":100}}],\"About\":\"这" +"个是反序列化的JSON绑定。\"}]"; protected void Page_Load(object sender, EventArgs e) { if (!String.IsNullOrEmpty(Request["tabs"])) { List<Class> cls = Request["tabs"].DeJSON<List<Class>>(); Response.Write(cls.ToJSON()); Response.End(); } } } public class Class { public string Name; public string About; public List<Student> Student; } public class Student { public int ID; public string Name; public int Sex; public Score Score; } public class Score { public decimal Chinese; public decimal Math; public decimal English; } using System.Collections.Generic; using System.Web.Script.Serialization; // Json序列化反序列化代码。 public static class Json { /// <summary> /// JSON序列化 /// </summary> /// <param name="obj"></param> /// <returns>JSON格式的字符串,或者JSON数组格式的字符串</returns> public static string ToJSON(this object obj) { JavaScriptSerializer serializer = new JavaScriptSerializer(); var st = serializer.Serialize(obj); return st; } /// <summary> /// JSON反序列化 /// </summary> /// <param name="T">反序列化成什么对象例如:hashtable</typeparam> /// <param name="json">json格式的字符串,包括json数组格式的字符串"[{"key":"0"},{"key":"1"}]"</param> /// <returns>指定泛型对象</returns> public static T DeJSON(this string json) { JavaScriptSerializer serializer = new JavaScriptSerializer(); return serializer.Deserialize (json); } }
小弟最近很迷恋JSON,以至于俺媳妇也吃起JSON的醋来(开个玩笑,呵呵)。至于小弟举的例子算不算面向切面(AOP),仁者见仁,智者见智。只是小弟对JSON的一种使用小技巧。
我可能使用AJAX,然后从后台调用一段数据,该数据可能是JSON格式的。
例如:{name:"张三",sex:1}
好了我们需要做的就是把sex转换成中文,当然你可以选择在后台处理,当然我们也会选择在前台完成?
当我们把数据一个一个放进对应的位置事,我们一般会这样做。
var json = {name:"张三",sex:1};
for(var f in json){
if (f == “sex”){
document.getElementById(f).value = josn[f] == 1 ? "男" : "女";
} else {
document.getElementById(f).value = josn[f];
}
}
for(var f in json){
if (f == “sex”){
document.getElementById(f).value = josn[f] == 1 ? "男" : "女";
} else {
document.getElementById(f).value = josn[f];
}
}
如果在来一个证件类型什么的,是不是我们还要在判断一次?
在来N个,我们是不是用Switch?
不~我们选择更好的方式。
var jsonEnum = {
sex: function(val){
var a = val == 1 ? "男" : "女";
return a;
},
idType: function(val){
var a = null;
switch(val){
..
}
}
};
var jsonBean = {
json:NaN,
Get: function(key){
if (jsonEnum[key]){
return jsonEnum[key](this.json[key]);
}
else {
return this.json[key];
}
}
};
var json = {name:"张三",sex:1,idType:1};
jsonBean.json = json;
for(var f in json){
alert(jsonBean.Get(f));
}
sex: function(val){
var a = val == 1 ? "男" : "女";
return a;
},
idType: function(val){
var a = null;
switch(val){
..
}
}
};
var jsonBean = {
json:NaN,
Get: function(key){
if (jsonEnum[key]){
return jsonEnum[key](this.json[key]);
}
else {
return this.json[key];
}
}
};
var json = {name:"张三",sex:1,idType:1};
jsonBean.json = json;
for(var f in json){
alert(jsonBean.Get(f));
}
jsonBean我们姑且可以把这个东西看成类似于Spring的容器,同时把jsonEnum当成一个配置文件,以及可扩展的类?同样的我们是不是可以通过一定的方式,做数据验证,组合等等,只要我们有这样一个“容器”JSON。