0

i am working on a asp.net 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?

Michel
  • 23,085
  • 46
  • 152
  • 242
  • Especially the IDs, not to even mention control state... This just reminds me why I fell in love with Asp.net MVC. No problem doing this kind of thing there... – Robert Koritnik Dec 02 '10 at 09:00
  • I agree, but sometimes you have no choice for that :(. But even with MVC i would have the same design question: whoul i postback to render html server side, or would i generate the html client side. – Michel Dec 02 '10 at 09:04
  • With Asp.net MVC there would be no real question. You'd simply add them on the client side. Why even bother with server requests? – Robert Koritnik Dec 02 '10 at 09:10
  • My 'problem' with generating it clientside is that you have to type all the html in strings in javascript, and that is imho so difficult to maintain, while with usercontrol you can type just the html – Michel Dec 02 '10 at 09:22

2 Answers2

2

www.ajax.net :)

brian brinley
  • 2,364
  • 1
  • 13
  • 10
1

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.

Asp.net AJAX not really an improvement

Using Asp.net 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.

Community
  • 1
  • 1
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
  • I agree with you that this is a nice solution. But.... doesn't that make me create the html twice? Once on the client side generating html to add to the DOM, and second to generate the same html server side when i want to reconstruct the page when i want to show validation errors? – Michel Dec 02 '10 at 09:33
  • Can you btw show me a snippet how to accomplish this "save all those fields' data as JSON string in it"? – Michel Dec 02 '10 at 09:34
  • @Michel: Added some code. Regardin the HTML code generation. Well basically you can use server side Web user control as well on the client as long as you use it as a template on the client side. jQuery now support templates as well. The good thing is that when you change the control it will change on both sides. Check jQuery templating documentation: http://api.jquery.com/category/plugins/templates/ – Robert Koritnik Dec 02 '10 at 09:47