Add, delete, and delete sub-tables of the Parent and Child tables based on the jquery Ajax HTML template. Record the operation to avoid repeated work, which is concise and easy to expand.

<! -- Extended attributes --> <Div tabpanel = "propetytabpanel" class = "form_table_input"> <Table id = "tablist" class = "datatable" border = "1" cellspacing = "0" bordercolorlight = "# dddddd" bordercolordark = "# ffffff" cellpadding = "0" width = "100%"> <tbody> <tr> <TH width = "20%"> attribute name </Th> <TH width = "20%"> English attribute names </Th> <TH width = "20%"> sort </Th> <TH width = "10%"> operation </Th> </tr> </tbody> <tbody id = "extendpropetycontent"> </tbody> <TB Ody id = "extendpropetycontentccontenttemple" style = "display: none; "> <tr dataid =" {ID} "> <TD> {propertyname} </TD> <TD> {propertyenglishname} </TD> <input type =" text "class =" sort "value =" {sort} "/> </TD> <a href =" javascript: delextendpropety ({ID }) "> Delete </a> </TD> </tr> </tbody> </table> <SCRIPT> var template = JQ (" # extendpropetycontentccontenttemple ").html (); vaR $ content = JQ ("# extendpropety Content "); var producttypeid = JQ (" # producttypeid "). val (); var sort = 0; function delextendpropety (ID) {If (confirm ('Are you sure you want to permanently delete this information? Deleted files cannot be restored! ') {Var Param = "option = delpropety & producttypeid =" + producttypeid + "& id =" + ID; var Options = {method: 'post', parameters: Param, oncomplete: function (Transport) {var retv = transport. responsetext; If (retv. indexof ("successful")> 0) {$ content. find ("* [dataid =" + ID + "]"). remove () ;}else {alert (retv) ;}}} else {return false;} new Ajax. request ('product _ type_edit_ajax.ashx', options);} funct Ion addextendpropety (rowdata) {var T = template; // Automatically sorts rowdata. sort = sort ++; For (var p in rowdata) {var Reg = new Regexp ("{" + P + "}", "ig "); // only regular expressions can replace all t = T. replace (Reg, rowdata [p]);} // bind the data var c = JQ (t) on the first element; var rowhtml = C. first (). data (rowdata )//. click (function () {// alert (JQ (this ). data (). ID); //}); $ content. append (c);} // load the extended attribute function loadextendpropety () {JQ. ajax ({type: "P Ost ", datatype:" JSON ", URL:" product_type_edit_ajax.ashx ", data: {" producttypeid ": producttypeid," option ":" getextendpropety "}, success: function (data) {for (VAR I = 0; I <data. length; I ++) {addextendpropety (data [I]) ;}});} // load the data loadextendpropety (); function showfuhaowindow () {var returnvalue = Window. showmodaldialog ('product _ existfuhao. aspx? Propertyid = '+ producttypeid, null, 'dialogheight = 600; dialogwidth = 800; edge = raised; center = yes; resizable = yes; status = yes ;'); for (VAR I = 0; I <returnvalue. length; I ++) {addextendpropety ({"propertyname": returnvalue [I], "ID": 0, "propertyenglishname ":""});}} // assemble the series extension attributes and upload them to the backend function joinextendproperty () {var datas = []; $ content. children (). each (function () {var d = JQ (this ). data (); D. propertyvalue = ""; D. typeid = producttypeid; // These are business operations that can be modified as needed. sort = JQ (this ). find ("input. sort "). val (); // update the input datas. push (d) ;}); var JSON = JQ. tojson (datas); JSON = eval (JSON); // This sentence is the string returned by tojson to replace "with \". Therefore, JQ ("# extendpropty") needs to be converted once "). val (JSON) ;}</SCRIPT> <br/> <a class = "inputbutton_a" target = "_ blank" onclick = "javascript: showfuhaowindow () "> Add symbol attributes </a> <br/> <input type =" hidden "value =" "id =" extendpropty "name =" extendpropty "/> </div>

 

Product_type_edit_ajax.ashx

Background code

 

<% @ Webhandler Language = "C #" class = "product_type_edit_ajax" %> using system; using system. web; using system. web. sessionstate; public class product_type_edit_ajax: ihttphandler, irequiressessionstate {public void processrequest (httpcontext context) {context. response. contenttype = "text/plain"; if (request ["option"]! = String. empty) {string option = context. request. form ["option"]. trim (); int propertyid = pagerequest. getformint ("producttypeid"); If (option = "delpropety") {int id = pagerequest. getformint ("ID"); context. response. write (delpropety (ID, propertyid);} else if (option = "getextendpropety") {context. response. write (getpropertylist (propertyid);} context. response. end (); Return ;}} /// <summary> /// obtain the HTML of the product series attributes /// </Summary> /// <returns> </returns> protected string getpropertylist (INT producttypeid) {// shop. bll. product. producttype BLL = new shop. bll. product. producttype (); var datapage = new list <user> (); // BLL. getproductpropertyallbywhere (producttypeid, "1 = 1"); // The javascriptserializer class is in the system. web. extensions. DLL, pay attention to add this reference system. web. script. serialization. optional criptserializer serializer = new system. web. script. serialization. javascriptserializer (); // JSON serialized string result = serializer. serialize (datapage); return result; // console. writeline ("serialized result using javascriptserializer: {0}, Length: {1}", result, result. length); // JSON deserialization // user = serializer. deserialize <user> (result); // console. writeline ("result after deserialization using javascriptserializer: userid: {0}, Username: {1}, createdate: {2}, priority: {3}", user. userid, user. username, user. createdate, user. priority) ;}/// <summary> /// Delete the extended property of the product type) /// </Summary> /// <Param name = "ID"> </param> /// <Param name = "propertyid"> </param> private string delpropety (int id, int propertyid) {/* delete operation */Return "deleted successfully";} public bool isreusable {get {return false ;}}}

There is also a piece of code stored in the background

/// <Summary> /// Save the extended attributes /// </Summary> /// <Param name = "producttypeid"> product series id </param> private void saveextendpropty (INT producttypeid) {string JSON = request ["extendpropty"]; system. web. script. serialization. optional criptserializer serializer = new system. web. script. serialization. javascriptserializer (); // JSON deserialization product series extension property var extendproperty = serializer. deserialize <list <model. product. producttypeproperty >>( JSON); If (extendproperty = NULL) return; shop. bll. product. producttype BLL = new shop. bll. product. producttype (); foreach (model. product. producttypeproperty extend in extendproperty) {If (extend. id> 0) {BLL. updateproductproperty (extend, extend. typeid);} else {BLL. addproductproperty (extend) ;}// console. writeline ("result after deserialization using javascriptserializer: userid: {0}, Username: {1}, createdate: {2}, priority: {3}", user. userid, user. username, user. createdate, user. priority );}

 

 

My jquery here is abbreviated as JQ. If you need it, you can change it to $

In addition, the JQ. tojson () function here comes from the jquery. json-2.2.js with an open source Library

This code is mainly used for implementation. The main table is attached with a tape table,

Before saving, edit the table... when the master table is saved, the child table is saved. The master table is not saved, and the child table is not saved ..

This Code is applicable to the one-to-multiple relationship data editing interface ..