Making a copy of markup from the DOM

Question

I am working on a ASP.NET page that has a button clicking on which adds a new section of markup for the user (A section of markup is a combination of dropdown list, textbox and textarea). A user can add any number of these sections, key in data and submit it to the server.

One way I could implement this is to hide a template of this section in the markup and make a copy of this on the client side. On submitting the form, I could iterate through the markup and POST the values entered by the user.

Is there a better way of doing this? One other way I can think of is using user controls and dynamically adding them on the server side.

PS: I am using ASP.NET 4.0 Webforms, JQuery etc

Answer 1

You don't even need to hide it in the markup, you can simply store the HTML as a JS variable.

The only snag I can see is that since the ASP.NET model binder requires the names of variables in arrays (from your description it sounds like you will be accepting an array of sections) to be explicitly qualified with an index (e.g. <input name="Section[0].DropDownValue>), you would need to replace a placeholder index (e.g. [0]) in your "master copy" with a new, dynamically generated value before adding the HTML fragment to the DOM.

Answer 2

This probably isn't the absolute best way, but off the top of my head you could assign an event handler to the click event of the submit button and use JavaScript to send any non-original data values along with the others.