Solved: Dynamically adding controls on asp.net webform

You could use this simple code as a starting point.

<script src="../js/jquery-2.2.0.min.js"></script>
<style>
    .controlGroup {
        border-width: 1px;
        border-style: solid;
        float: left;
    }
</style>
<script>
    var Groups = {};
    Groups.controlCount = 1;
    Groups.addGroup = function () {
        if (Groups.controlCount == 3)
            alert('You can\'t add more groups');
        else {
            Groups.controlCount++;
            var htmlGroup = '<div class="controlGroup"><span id="lblLabel' + String(Groups.controlCount) + '">Label ' + String(Groups.controlCount) + '</span><br /><input type="text" id="txtTextBox' + String(Groups.controlCount) + '" name="txtTextBox' + String(Groups.controlCount) + '" /><input type="button" value="Add group" onclick="Groups.addGroup()" /></div>';
            $(htmlGroup).appendTo($('#controls'));
        }
    };
</script>
<div id="controls">
    <div class="controlGroup">
        <span id="lblLabel1">Label 1</span><br />
        <input type="text" id="txtTextBox1" name="txtTextBox1" />
        <input type="button" value="Add group" onclick="Groups.addGroup()" />
    </div>
</div>
<asp:Button ID="cmdSendInfo" runat="server" OnClick="cmdSendInfo_Click" Text="Send Info" />

Open in new window

protected void cmdSendInfo_Click(object sender, EventArgs e)
{
    List<string> text = new List<string>();
    text.Add(Request.Form["txtTextBox1"]);
    if (Request.Form["txtTextBox2"] != null)
    {
        text.Add(Request.Form["txtTextBox2"]);
        if (Request.Form["txtTextBox3"] != null)
        {
            text.Add(Request.Form["txtTextBox3"]);
        }
    }

    Response.Write(String.Join(" - ", text));
}

Open in new window