Loading user control dynamically in two directions

Question

I am developing a commenting like platform where user can post comments and other users can reply on that comments. But these comments can be replied in two directions (Reply & Expand). The idea is that user can reply and user can also expand that discussion. Please see image.

I have developed a control which will be added dynamically whenever user will Reply or Expand a comment.

If user will reply on control a new control will be added under that message (comments) and if user Expand that message (comments) then a control with expanded reply (message) will be added on right side of that messages (comments). More than one user can Expand a message and users can also reply on expanded message.

I am not sure that what should be the place holder or container in which these control should be added.

• Should I use Server Table control and create TableRows and TableCells dynamically?
• What container should I use so page don't get too heavy?
• Should I create divs and adjust its position on runtime and add control in each div?

Other question on which I am not clear are:

• More than one user can expand a message, in this case how to handle UI. Hide/Show controls or any other solution.
• Should I show horizontal scrollbar on Expansions or is there other solutions?

Any help/suggestion?

Thanks.

Answer 1

you can do this in different ways, i am not going to give you code cause i want you to try and learn. So you can do all this with JQuery, you don't need Asp.net controllers, cause sometimes they are complicated to work with.

So 1º step: You can create a simple table with 2 Columns and N rows depending on the number of messages you have (try filter some, Example: you have 100, show only 10 and have a "next page") or use some plugin table that hold bigdata for you.

2º Step: when you reply a message create an <tr> in you table to place the "reply of first message" (note: you need to create a structure to handle you navigation on the table easily with ID's)

3º Step: in your second column have like a <div> prepared to receive and show the expand message when user click "expand" and clean it always when a new message is expanded.

That should work for you, there are others ways but try to think in something simple

Other Questions:

1º - I didn't understand the question, but if your site will run on a server, user1 and user2, ... userN use the same page but render in different places, you just need to reload data to let everyone known that someone comment or reply or whatever in a message.

2º - UI its your choice, see what is best for you ;)

enjoy ;)