Question

I’m writing an ASP.NET app in which a table of objects is created by the user client-side.
I envisage them clicking “Add item” and a new ‘row’ is created in the table with textboxes for them to enter their stuff.

I can do this fine by adding HTML with jQuery. The problem is that one of the fields in the row for the user to fill in needs to be a colour picker.

I have an ASP.NET web user control for my colour picker. How do I add an instance of it to the page within my html row? Or am I barking up the wrong tree here – is there a better way of encapsulating the functionality of my colour picker so that it can be put on every row?

Answer 1

No, you can’t add a server-side asp.net control to a page that has already been rendered using client-side techniques (aka Javascript)

Two options:

1. Firstly, switch to using a client-side colour picker. You can then have the data from this included in the post-back by dynamically adding hidden fields to your form.
2. Secondly, have a single editing panel which includes your colour picker. Users then select a row to edit, which updates the edit panel with current values etc. Values are stored in hidden fields created when you dynamicaly add rows to your table, and included in the post-back

Without seeing your UI, I can’t comment as to which would be best. The asp.net control might look nicer, but it might be difficult to work into your design. A pure client-side solution might fit your designer better, but might not look so good. You also need to consider what happens if / when a users adds lots of rows (this might be 10, 50 or 100 depending on your app /code). Lots of dynamically added controls (the first solution) might cripple the performance of the page.