How do I create new controls inserted into newly generated HTML on runtime?

Question

I am still rather new to ASP.NET, but I find myself stuck on a problem that shouldn't be too much of a problem..

Right now I have a page that holds this div:

<div id="EditSurveySetID" class="EditSurveySet" runat="server">
        <div class="cell">
                <div class="cell_title">Survey Set(s)</div>
                <table id="surveySetTableData" runat="server" style="margin: 10px;">
                    <tbody>
                        <tr>
                            <td class="form_labelSurveySet" style="width: 330px;">
                                <input type="button" value="-"> Survey Set 1: 
                                <input id="EditSurveySetTitle" runat="server" style="width: 200px;" value="Netherlands">
                            </td>
                            <td>
                                <asp:DropDownList ID="DDLSurveySetSurveys" runat="server">
                                </asp:DropDownList>
                                <asp:Button ID="addAdditionalDDLColumns" runat="server" Text="+" />
                            </td>
                        </tr>
                   </tbody>
            </table>
        </div>
    </div>

Which looks like this:

I want a user to press the + button (addAdditionalDDLColumns). Upon pressing that button, I want a new table row to appear with the same controls in it, so that on runtime, it would look like this at that point:

<div id="EditSurveySetID" class="EditSurveySet" runat="server">
        <div class="cell">
                <div class="cell_title">Survey Set(s)</div>
                <table id="surveySetTableData" runat="server" style="margin: 10px;">
                    <tbody>
                        <tr>
                            <td class="form_labelSurveySet" style="width: 330px;">
                                <input type="button" value="-"> Survey Set 1: 
                                <input id="EditSurveySetTitle" runat="server" style="width: 200px;" value="Netherlands">
                            </td>
                            <td>
                                <asp:DropDownList ID="DDLSurveySetSurveys" runat="server">
                                </asp:DropDownList>
                                <asp:Button ID="addAdditionalDDLColumns" runat="server" Text="+" />
                            </td>
                        </tr>

                        <tr>
                            <td class="form_labelSurveySet" style="width: 330px;">
                                <input type="button" value="-"> Survey Set 2: 
                                <input id="Text1" runat="server" style="width: 200px;" value="Netherlands">
                                </td>
                            <td>
                                <asp:DropDownList ID="DropDownList1" runat="server">
                                </asp:DropDownList>
                                <asp:Button ID="Button1" runat="server" Text="+" />
                            </td>
                        </tr>
                                       </tbody>
            </table>
        </div>
    </div>

Or in image: So the way I see, some new HTML code is generated on the + button click event, along with some controls (dropdownlist, another + button with the same functionality(?), possibly a textfield instead of input field).

Questions that come to mind right now:

• How do I generate the HTML code that would create a new table row
• How do I control where this generated HTML code is added (in this case, it should be under the existing
• [Vague/Abstract question] Ultimately a user could possibly have 1 to infinite 'survey sets'. If a user were to have created 4 survey sets, he would eventually press a save button or something alike. Upon pressing this button I would save the 4 selectedvalues of the 4 dropdownlists belonging to the 4 survey sets. How would I call each individual dropdownlist in order to get the data? What I'm actually asking, I think, is whether it's possible to assign an ID programmatically upon the auto generated dropdownlist creation of my previous two questions.

How do I do this? Any advise and tips are very welcome!!

Answer 1

protected void Button1_Click(object sender, EventArgs e)

{

    HtmlTableRow tr = new HtmlTableRow();
    HtmlTableCell td = new HtmlTableCell();
    Button btn=new Button();
    btn.Text="gdfgd"; /* here u can create ur contol and add it in cell*/
    td.Controls.Add(btn); /*add controls to colum*/
    tr.Cells.Add(td); /*add column to row*/
    surveySetTableData.Rows.Add(tr); /*ad row to table*/
}

instead of using this i would also recommend u to use gridview like nunespaqscal bcz dataretrival become very easy....in gridview

Answer 2

I would suggest you use a GridView.
It provides an option to add rows. It provides a Rows collections, so you can get the data bound to each row.

Here are some examples to get you started.

Dynamically creating, adding and maintaining controls would involve some effort. You would need a PlaceHolder and have to add controls to that. You would have to assign unique ids to each one of them, and use those to retrive the values. This must be done on each PostBack.
Try this when you don't feel you are rather new to asp.net.

Answer 3

You could use and UpdatePanel and dynamically add new asp controls in the code-behind.

This could be expensive however, because it means your application would be going back to the server every time the user clicks the "Add" button, however I'm not sure how you'd achieve this strictly on the client-side. But there is nothing stopping you creating new controls on the fly on the server-side using asp.net.

If you want to surround the new controls with custom HTML, you could use a PlaceHolder component and replace it with raw text (your HTML) during the callback.