Dynamically adding controls on asp.net webform

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.
DevildibAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Karrtik IyerSoftware ArchitectCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jorge_torizResearch & Development ManagerCommented:
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

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.