best (easiest) way to add dynamic content to a webforms application

i am working on a webforms app, and i have to create 'dynamic order lines' That is: you select a product and a quantity, and the amount is calculated. To visualize: this is on one 'line', so forst product dropdown, next to it the quantity textbox and next to that the amount label.

Then you click 'add another product', and another 'line' is added with a product dropdown, quantity textbox and amount label.

So you can click add and add and add....

Now i was thinking how to implement that, and i came up with two choises:

'add html client side' and 'add user control server side'

The first looks more fancy of course, but i also have to create some server side code to generate the lines again, when the user says 'go' but after validation i have to warn the user for example the amount was over credit or the quantity was to high. Then i get the 'client side' added html, and i have to reproduce that in my code behind, am i right?

On the other hand (add user control server side), i have to create a new user control on 'and another product' postback, which might look easier in the beginning because it's all strong typed, and the client side (jquery / javascript) isn't?

I'm looking forward to your opinions.

And one more thing: there is a possibility (they are not sure yet) that this functionality is wrapped within a 'section', with an address box and call it an order. And then: the user can add that 'section' also multiple times, so he can create multiple orders in one page, so i have to create multiple sections for an order, and within that order have the possibility to add another product.

It looks like it will be hard to do this client side, especially with generating id's?


Using a hidden field with JSON

Adding additional fields feels so wrong to add on the server-side.

  1. It takes too long to add an additional one
  2. You may have scroll position issues
  3. And it's such a simple and very quick process to do on the client.

I suggest you put a hidden field on your page and save all those fields' data as JSON string in it. On the server side you can simply use JavaScriptSerializer class to deserialize JSON and get all the data that was generated on the client as a strong type object instance which is even better!

But otherwise... All input fields you add using Javascript will not have server side view state, but you can still access their values in the Request.Form["SomeName"] which means that you can give them whatever id/name you like as long as they're unique.

Some code

I'd add all input fields with a certain CSS class like dynamic to make it easier to collect all of them for JSON generation. This code will generate your JSON object that should be serielized into the hidden field:

$(".dynamic:input").live("blur", function(e))
    var jsonData = $(".dynamic:input").serializeArray();
    // use some lib or plugin to save it into hidden input field

There are many libraries as well as jQuery plugins that will stringify this jsonData object to string. This Stackoverflow question has many possibilities. Check the answers. AJAX not really an improvement

Using AJAX library as suggested by brian brinley will make things look like they're generated on the client but it will still be slow since a normal server request will meaning the whole view state will be transferred back to server and the whole page cycle will be processed there before returning. This library isn't really an option for serious complex projects and I suppose majority would agree. :)

Need Your Help

SVN? VSS? Why is one better than the other?

svn version-control visual-sourcesafe

I tend to get the feeling that most folks here think SVN is gold-plated goodness, whereas VSS is the worst program ever devised (at least as Version Control is concerned).

Aligning Social Media Buttons

html css social-networking facebook-social-plugins

I am trying to align our 3 social media buttons : Facebook/Twitter/Google +, evenly in a 393px width gap. They are aligned horizontally (facebook seems to be down about 2 px vertically on