现在很流行自动组装啊，为什么前台不行那？小弟不才也来个自动组装。
示例如下：
HTML:
<div id="tab1"> <div type="row"> <div type="text" class="colTop" style="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="780px;"> <div name="Student" id="Stus" style="overflow:hidden; clear:both;"> </div> </div> <div type="textarea" style=" clear:both; border:1px solid #ccc; 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; 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);
}
}
后台代码是非常简单的，而且在结构没有发生颠覆性的改变的情况下，这块代码是不需要任何改变的。