JSON advanced 6-automatic assembly

Automatic Assembly is very popular now. Why isn't it possible at the front end? The younger brother does not need to assemble automatically.

Example:

Class:Add student Introduction:DisplayStudent ID:Name:Gender:
MaleFemaleLanguage:

Delete studentHTML:

<Div id = "tab1"> <div type = "row"> <div type = "text" class = "colTop" style = "width: 780px "msg =" * ""> <samp> class: </samp> <input type = "text" size = "8" name = "Name" dataType = "len"/> <samp style = "float: right; margin: 5px; "> <a href =" javascript: AddStudent (); "> Add students </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 type =" textarea "style =" clear: both; border: 1px solid # ccc; width: 780px; height: 115px; padding: 5px; "msg =" * "> <samp> description: </samp> <textarea name = "About" rows = "5" cols = "50" dataType = "text"> </textarea> </div> </div> <-- list template --> <div style = "display: none "id =" template "> <div id =" template1 "style =" overflow: hidden; height: 30px; width: 100% "> <div type =" text "class =" colBottom "msg =" * "> <samp> Student ID: </samp> <input type = "text" size = "8" name = "ID" dataType = "ints"/> </div> <div type = "text" class = "colBottom" msg = "*"> <samp> Name: </samp> <input type = "text" size = "8" name = "Name" dataType = "cn"/> </div> <div type = "select" class = "colBottom"> <samp> gender: </samp> <select name = "Sex"> <option value = "1"> male </option> <option value = "2"> female </option> </ select> </div> <div type = "text" class = "colBottom" msg = "*"> <samp> language: </samp> <input type = "text" size = "4" name = "Score. chinese "dataType =" money "/> </div> <div type =" text "class =" colBottom "msg =" * "> <samp> mathematics: </samp> <input type = "text" size = "4" name = "Score. math "dataType =" money "/> </div> <div type =" text "class =" colBottom "msg =" * "> <samp> language: </samp> <input type = "text" size = "4" name = "Score. english "dataType =" money "/> </div> <samp class =" colBottomEnd "> As you can see, in the preceding HTML, the type marked in red is list, which represents a subset. At the same time, you should also see the area marked in green (name = "Score. chinese "), which indicates in JSON: {Score: {Chinese:" "}}that is, JsonSerializer not only supports list but also objects, the Template attribute marked in blue is used in reverse binding (indicating that the row Template to be cloned is a '#' + ID ). At the same time, you should also see the yellow-marked msg. By the way, this is the verification prompt information (if you have special needs, you can rewrite JsonSerializer. message (). When you look at the ype marked in the deep red to verify the data type, the Verification Code uses the Validator JSON. You can expand it as needed, for details, refer to the following JS sample code. JavaScript:

Function AddStudent () {// find the DIV under the template, which is template1 (row template) 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) ;}}}// Delete student information (ROW) function DelStudent (obj) {$ (obj) . Parent ("samp "). parent ("div "). remove () ;}$ (document ). ready (function () {// string of the JSON Array Structure of the background value. Of course, it can be said that the string is queried from the database. I am writing it here. Var json = JSON2.parse ('<% = this. json %>'); // bind the foreground ID to the tab1 structure. JsonSerializer. jsonToTab ("# tab1", json); // rewrite the verification class. len verifies the class name and text verifies the description, you can notify the extension to meet your needs $. 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 ;}});});
It can be seen that in addition to adding and deleting dynamic lines, JSON extraction and binding code are very simple. C #:

Public partial class ExampleTwo: System. web. UI. page {public string json = "[{\" Name \ ": \" t000011 \ ", \" Student \ ": [{\" ID \ ": 1, \ "Name \": \ "Michael \", \ "Sex \": 1, \ "Score \": "+" {\ "Chinese \": 33, \ "Math \": 44, \ "English \": 55 }},{ \ "ID \": 2, \ "Name \": \ "Li Si \", \ "Sex \": 2, "+" \ "Score \": {\ "Chinese \": 55, \ "Math \": 66, \ "English \": 77 }},{ \ "ID \": 3, \ "Name \": \ "Yang da \", "+" \ "Sex \": 1, \ "Score \": {\ "Chinese \": 100, \ "Math \": 100, \ "English \": 100}], \ "Abo Ut \ ": \" this "+" is a deserialized JSON binding. \ "}]"; 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 {public string Name; public string About; public List <Student> Student;} public Class Student {public int ID; public string Name; public int Sex; public Score;} public class Score {public decimal Chinese; public decimal Math; public decimal En Glish;} using System. Collections. Generic; using System. Web. Script. Serialization; // Json deserialization code. Public static class Json {// <summary> // JSON serialization // </summary> /// <param name = "obj"> </param> // /<returns> string in JSON format, or a string in JSON array format </returns> public static string ToJSON (this object obj) {JavaScriptSerializer serializer = new JavaScriptSerializer (); var st = serializer. serialize (obj); return st ;} /// <summary> /// JSON deserialization /// </summary> /// <param name = "T"> deserialization of objects such: hashtable </typeparam> // <param name = "json"> A json string, including a string in the json array format "[{" key ":" 0 "}, {"key": "1"}] "</param> // <returns> specify a generic object </returns> public static T DeJSON
 
  
(This string json) {JavaScriptSerializer serializer = new JavaScriptSerializer (); return serializer. Deserialize
  
   
(Json );}}
  
 
The background code is very simple and does not need to be changed without any disruptive changes to the structure.
Download JsonSerializer