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

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

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

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


javascript c# asp.net user-controls page-lifecycle
person Chris Nesmith    schedule 20.10.2011    source источник
comment
Вы думали об использовании AJAX Toolkit и UpdatePanel, чтобы вам не приходилось хранить данные в Session? Только часть вашей страницы будет перезагружена, и вы можете сохранить данные в одной области, в то время как OnClick по-прежнему запускает событие в другой области.   -  person Tyler Ferraro    schedule 21.10.2011
comment
У меня есть, но я стараюсь избегать использования AJAX, чтобы сделать это, если это возможно, но это будет то, что я попробую в следующий раз, если я не смогу найти хороший способ сделать это в ближайшее время.   -  person Chris Nesmith    schedule 21.10.2011

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете реализовать свои функции с помощью 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++;
}
person tonycoupland    schedule 21.10.2011
comment
Спасибо за решение, Тони, отлично работает, должен был знать лучше, чем пытаться делать большую часть этого на стороне сервера. Единственное изменение, которое я внесу, - это цикл while в коде C #, поскольку некоторые текстовые поля могут быть удалены, цикл while может завершиться раньше. - person Chris Nesmith; 22.10.2011