Добавление пользовательских элементов управления динамически при нажатии кнопки

Question

Моя проблема в том, что я пытаюсь динамически добавлять пользовательские элементы управления на страницу после нажатия кнопки. Звучит довольно прямо. По сути, есть текстовое поле с кнопкой «Добавить», нажмите кнопку «Добавить», чтобы установить текстовое поле только для чтения и сохранить текст, измените кнопку «Добавить» на «Удалить», добавьте новое текстовое поле и кнопку «Добавить» ниже. По сути, дают возможность добавлять несколько элементов в список.

Решение, которое я придумала, заключается в нажатии кнопки добавления, я добавляю слово в текстовом поле в список, содержащий все слова, которые пользователь уже ввел, затем добавляю список в сеанс. Когда происходит обратная передача, я просто беру список из сеанса и заполняю уже добавленные текстовые поля. Проблема заключается в том, что в жизненном цикле страницы ASP .NET событие нажатия кнопки фактически происходит ПОСЛЕ события загрузки страницы, поэтому, если я попытаюсь добавить текстовые поля, захватив Список в сеансе, он не был заполнен. И наоборот, если я пытаюсь добавить текстовые поля в событие завершения загрузки страницы, события кнопок не запускаются, когда на них нажимают (не совсем уверен, почему это так, но скорее всего, потому что события привязаны к кнопкам где-то между этими двумя событиями) .

Так что после того, как немного поковыряться, кажется, что это невозможно только с ASP.NET и C #, но может быть способ сделать это с помощью JavaScript. Кто-нибудь есть представление о том, как это сделать? Я довольно знаком с C # и хорошо с javascript, но я довольно плохо знаком с ASP .NET, поэтому любая помощь будет оценена.

Answer 1

Вы можете выполнять свои функции с JQuery, как в этом 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();
}

После того как ваша форма отправлена ​​обратно на сервер, вы можете перебирать поля, обходя элементы управления формой.

C #

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