Add User Controls dynamically on button press

Question

My problem is I'm trying to add user controls to a page dynamically after clicking a button. Sounds pretty straight forward. Essentially there's a text field with an add button next to it, on the add button click I want to set the text box to readonly and retain the text, change the add button to a remove and add a new text field and add button below. In essence give the ability to add multiple items to a list.

The solution I came up with is on the add button click, I add the word in the text box to a List that contains all the words the user has already inputted then add the List to the Session. When the postback occurs I just grab the List from the Session and repopulate the already added textboxes. The problem is that is in the ASP .NET page life cycle the button click event actually happens AFTER the page load event so if I try to add the textboxes by grabbing the List in the Session it hasn't been populated. Conversely if I try to add the textboxes in the page load complete event the button events don't fire when they're clicked on (not exactly sure why this is, but is likely because events are bound to buttons somewhere between these two events).

So after poking around a bit it looks like this isn't possible with just ASP.NET and C# but there may be a way to do this with javascript. Anyone have some insight on how to do this? I'm pretty familiar with C# and ok with javascript but am pretty new to ASP .NET so any help would be appreciated.

Answer 1

You can accomplish your functionality with JQuery as in this jsFiddle

HTML

<div id="myDiv">
    <div id="item1">
        <input id="txt1" name="txt1" type="text"></input><input id="cmdAdd1" type="button" value="Add"></input>
    </div>
</div>

Javascript

var itemCount = 1;
$('#cmdAdd1').click(function(){addNewItem();});

function addNewItem(){
    var thisItem = itemCount;
    // Make last text box readonly
    $('#txt' + itemCount).attr('readonly', 'readonly');
    // Change button to Remove button
    $('#cmdAdd' + itemCount).attr('value', 'Remove');
    $('#cmdAdd' + itemCount).unbind();
    $('#cmdAdd' + itemCount).click(function(){removeItem(thisItem );}); 

    // Add new line with text field and button
    itemCount++;
    var newItem = '<div id="item' + itemCount + '">'
    newItem += '<input id="txt' + itemCount + '" name="txt' + itemCount + '" type="text"></input>';
    newItem += '<input id="cmdAdd' + itemCount + '" type="button" value="Add"></input>';
    newItem += "</div>";

    $('#myDiv').append(newItem);
    $('#cmdAdd' + itemCount).click(function(){addNewItem();});    
}

function removeItem(i){
    $('#item' + i).remove();
}

Once your form has posted back to the server, you can iterate through the fields by walking the Form controls.

C#

int n=1;
while (Request["txt" + n] != null)
{
    Console.WriteLine(Request["txt" + n]);
    n++;
}