The asp.net browser submits json data to the server.

The prototype interface is as follows:

Functions

1. drop-down box: dynamically BIND database data;

2. "+" button: when clicked, add a new Reward and Punishment entry directly below the entry;

3. "-" button: if there is only one reward and punishment entry, the content in the input box is cleared. Otherwise, the reward and punishment entry is deleted;

4. Cancel button: Click to refresh the page

5. Save button: When you click, verify the correctness of user input information, convert user input information to json data, and submit json data to the server asynchronously.

Code for implementing the page element content (body content)

Name of the municipal organization:<% -- Outer div -- %> <% -- Inner div -- %> Rewards and Punishments Project name:Score:                                                                                                

Page elements are composed of three parts. For details, refer to the prototype diagram. The most important part is the second part. This allows you to dynamically add elements and clone nodes.

Code for implementing the "+" Button Function

// Add a new Reward and Punishment project function AddRow (id) {// obtain the inner div Element Node var sElementNode = document. getElementById (id ). parentNode; // clone a new set of tag elements (inner div): Reward and Punishment name and score var clonedElementNode = sElementNode. cloneNode (true); // set the clone attributes (id and value) there is no impact on the clone attribute setting. // 1. Obtain the unified label var newId = parseInt ($ ("input [value = '+']" ). length); // 2. Set the id clonedElementNode of the div. id = "S" + newId; // 3. Set the attribute clonedElementNode of the element inside the div. childNodes. item (1 ). id = "txtAddName" + newId; $ (clonedElementNode. childNodes. item (1 )). val ("edit"); clonedElementNode. childNodes. item (3 ). id = "txtAddCount" + newId; $ (clonedElementNode. childNodes. item (3 )). val ("edit"); clonedElementNode. childNodes. item (5 ). id = "tailadd" + newId; $ (clonedElementNode. childNodes. item (5 )). val ("+"); clonedElementNode. childNodes. item (7 ). id = "mongodel" + newId; $ (clonedElementNode. childNodes. item (7 )). val ("-"); // Add the cloned element to the outer Div. // 1. var fElementNode = sElementNode, the outer div element node. parentNode; // 2. Add if (fElementNode. lastChild = sElementNode) {// the current node is the last element node, fElementNode. appendChild (clonedNode);} else {// the current node is not the last element node, fElementNode. insertBefore (clonedElementNode, sElementNode. nextSibling );}}

The attributes of the cloned element can be redefined or not used, because they are all operated through the class attribute of the element.

Code for implementing the "-" Button Function

// Delete the selected Reward and Punishment project function DelRow (id) {// 1. Obtain the inner div var sElementNode = document of the current node. getElementById (id ). parentNode; // 2. Obtain the outer div var fElementNode = sElementNode of the current node. parentNode; // 3. Delete the inner div if (fElementNode. childNodes. length> 3) {// a. The element node is greater than 2 fElementNode. removeChild (sElementNode);} else {// B, only one element node $ (sElementNode. childNodes. item (1 )). val (""); $ (sElementNode. childNodes. item (3 )). val (""); $ (sElementNode. childNodes. item (5 )). val ("+"); $ (sElementNode. childNodes. item (7 )). val ("-");}}

Here, we use the child node to determine whether there is only one reward and punishment entry. Because the child node includes all node types (text nodes, element nodes, and comment nodes, 3 is displayed in the Code. (comments are comments. There are spaces on both sides of the comments, which are a text node respectively)

Code for canceling the Button Function

// Cancel the button and ReLoad the page function ReLoad () {window. location. href = "CityAddInput. aspx ";}

Code for saving the Button Function

// Save the rewards and punishments project function SaveAdd () {// validate if ($ ('# cc1 '). combobox ('gettext') = "") {alert ("Please select the name of the municipal unit! "); Return;} // Number of rewards and punishments items obtained var txtNameCount = parseInt ($ (" input [name = 'txtname'] "). length); // get all rewards and punishments Project Name node var txtAllName = document. getElementsByName ("txtName"); // node var txtAllCount = document. getElementsByName ("txtCount"); // for (var I = 0; I <txtNameCount; I ++) {// The Rewards and Punishments project name cannot be blank if (txtAllName [I]. value = "" | txtAllName [I]. value = "edit") {alert ("Edit Rewards and Punishments project name"); txtAllName [I]. focus (); Return ;}// the same name for (var j = I + 1; j <txtNameCount; j ++) {if (txtAllName [I]. value = txtAllName [j]. value) {alert ("repeated Rewards and Punishments project names are not allowed"); txtAllName [j]. focus (); return ;}// the score of the rewards and punishments item cannot be blank if (txtAllCount [I]. value = "" | txtAllCount [I]. value = "edit") {alert ("Edit Rewards and Punishments score"); txtAllCount [I]. focus (); return;} // the score of the rewards and punishments item must be a number if (! (IsNum (txtAllCount [I]. value) {alert ("enter a number! "); TxtAllCount [I]. focus (); return ;}// defines the Object. The data to be transmitted in the Set var objData = new Object (); // obtains the bid objData. id = $ ('# cc1 '). combobox ('getvalue'); var array = new Array (); // obtain the appropriate rewards and punishments project name and rewards and punishments project score for (var I = 0; I <txtNameCount; I ++) {var obj = new Object (); obj. name = txtAllName [I]. value; obj. count = txtAllCount [I]. value; array. push (obj);} // sets each reward and punishment item objData. array = array; // parses the string var strData = JSON. stri Ngify (objData); // transfers data $. post ("InsertAddInput. ashx ", {type:" ", strJson: strData}, function (data) {if (data =" true ") {alert (" added successfully! "); // Reload the page window. location. reload ();} else if (data = "false") {alert ("the metric already exists. Please check the information and add it again! ");} Else {alert (" Unknown error exists, leading to failed addition! ") ;}}) ;}// Number verification, positive number, negative number, decimal number, positive number; true indicates a number, false indicates not a number function IsNum (num) {var reg =/^ \-? ([1-9] \ d * | 0) (\. [1-9] {1, 3 })? $/; Return reg. test (num );}

JSON. stringify (object) can convert an object into a json data format string.

Code for getting the focus in the text box

// When you click Edit, if the content is edited, the value is cleared. if not, the function IfFull (txtElementNode) {if (txtElementNode. value = "edit") {txtElementNode. value = "";}}

Summarize a large function, divide it into multiple small functions, and then determine an implementation process.