Dynamically adding controls on asp.net webform

Devildib
Devildib used Ask the Experts™
on
Hi experts,

I have a webform in which i am  displaying a label and a textbox in one section along with other controls.It looks like label above and textbox just below it.This combination of label and textbox is required by default.I need to dynamically give option to user for adding two more such label and textbox combinations just on the right of the default label and textbox.May be with two plus signs and some text written beside,clicking which will add the controls.Also some removal mechanism is required to remove the other two combinations of label and textboxes.On post, the controls should not be lost.
Please help.Better to have javascript and c# combination.The horizontal orientation of the controls is a must.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Architect
Commented:
You can always have the controls (2 more combination of text box and labels) hidden and show it when "+" is clicked and when "-" is clicked you can hide it.
jorge_torizResearch & Development Manager

Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial