JSON进阶六-自动组装

现在很流行自动组装啊，为什么前台不行那？小弟不才也来个自动组装。

示例如下：

班级： 添加学生

简介：

显示

学号：

姓名：

性别： 男 女

语文：

删除学生

HTML:

 <div id="tab1">
<div type="row">
<div type="text" class="colTop" style="width:780px" msg="*"">
<samp>班级：</samp><input type="text" size="8" name="Name" dataType="len"/>
<samp style="float:right; margin:5px;"><a href="javascript:AddStudent();">添加学生</a></samp>
</div>
<div type="list" Template="#template1" class="colTop" style="width:780px;">
<div name="Student" id="Stus" style="overflow:hidden; clear:both;">
</div>
</div>
<div type="textarea" style=" clear:both; border:1px solid #ccc; width:780px; height:115px; padding:5px;" msg="*">
<samp>简介：</samp><textarea name="About" rows="5" cols="50" dataType="text"></textarea>
</div>
</div>
</div>
<--list模板-->
<div style="display:none" id="template">
<div id="template1" style="overflow:hidden; height:30px; width:100%">
<div type="text" class="colBottom" msg="*">
<samp>学号：</samp><input type="text" size="8" name="ID" dataType="ints"/>
</div>
<div type="text" class="colBottom" msg="*">
<samp>姓名：</samp><input type="text" size="8" name="Name" dataType="cn"/>
</div>
<div type="select" class="colBottom">
<samp>性别：</samp>
<select name="Sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<div type="text" class="colBottom" msg="*">
<samp>语文：</samp>
<input type="text" size="4" name="Score.Chinese" dataType="money"/>
</div>
<div type="text" class="colBottom" msg="*">
<samp>数学：</samp>
<input type="text" size="4" name="Score.Math" dataType="money"/>
</div>
<div type="text" class="colBottom" msg="*">
<samp>语文：</samp>
<input type="text" size="4" name="Score.English" dataType="money"/>
</div>
<samp class="colBottomEnd">
<href="javascript:;" onclick="DelStudent(this)">删除学生</a>
</samp>
</div>
</div>

您可以看到，上述HTML中，我用红色标记出来的type为list，它代表了一个子集合。同时大家也应该看到我用绿色标记出来的地方（name="Score.Chinese"），它在JSON中表示：{Score:{Chinese:""}} 也就是说JsonSerializer不仅支持list还能够支持对象的对象，蓝色标记的Template属性是在反向绑定时使用的（表示要克隆行模板，是一个‘#’+ID）。同时您也应该看到了黄色标记的msg了把，对了这个就是验证提示信息（如果有特殊的需要，可以重写JsonSerializer.Message()），在看看深红色标记的dataType表示验证数据类型，而验证的代码使用的是Validator这个JSON，您可以按自己需求扩充，详情可以参考下面的JS示例代码。

JavaScript：

 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的提取和绑定的代码是非常简单。

C#：

 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);
}
}

后台代码是非常简单的，而且在结构没有发生颠覆性的改变的情况下，这块代码是不需要任何改变的。

下载JsonSerializer