Adding ASP.NET control to page using jQuery

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

You can't add ASP.NET controls with jQuery (at least not easily). You could, however, perform a postback when you need to add the colour picker to the row.

Answer 2

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.

Answer 3

In the code in front declaratively define a template of what the new row should look like, then hide it using css.

When the user clicks the 'Add new button' select and cloen the contents of your hidden template and write that into your target div. Just make sure to remove the hiding css when you do this.

You will, of course, just be copying the rednered html of your server controls, but htis apporach may give you a quick and easy way of doing what you need

Answer 4

I'm not sure what version of ASP.NET you're using, one approach that would work is to turn your usercontrol into a custom control. You'd then need to implement ICallbackEventHandler (the first way to do Ajax on asp.net); for sure it's a bit more work but it does give you a good level of control.

Alternatively, you could try this