Динамически повторяющиеся элементы формы

Question

Я создаю онлайн-приложение CV, которое позволяет пользователю добавлять новые разделы обучения, которые состоят из нескольких текстовых полей и меток.

Каков наилучший способ динамического создания элементов формы и чтения их в зависимости от того, нажимает ли пользователь кнопку [Добавить еще].

Answer 1

1) серверная сторона: в вашем событии нажмите кнопку «asp.net». Создайте необходимые элементы управления (текстовое поле, выпадающее и т. Д.) Динамически и добавьте это в контейнер, подобный панели.

2) Сторона клиента: Используя элементы создания javascript и добавьте в существующий контейнер (div). В этом подходе вы сохраняете сервер в обе стороны, потому что вы делаете это на стороне клиента.

Вот пример javascript с использованием jquery, который даст вам представление.

HTML

<div id="divContainer">  
    Education 1 <input id="txt1" type="text" class="txtBox"/> 
</div> 
<input id="btn1" type="button" value="Add Another" /> 

Javascript

var counter=1; 
$("#btn1").click(function(){ 
    counter++;  
    $("#divContainer").append("<br/> Education "+counter + " <input type='text' id='txt"+counter+"' class='txtBox' />");    
}); 

Вот рабочий пример: http://jsfiddle.net/huYMT/13/

Answer 2

Я не знаю, лучший способ, к сожалению, но я могу вам сказать, что Я делал это в веб-формах, когда использовал их.

Я сделал PlaceHolder, где я мог сбросить элементы управления на лету. Я сделал UserControl, который можно было повторить снова и снова, у которого были публичные свойства. Я завернул UpdatePanel вокруг PlaceHolder и привязал событие click, связанное с UpdatePanel, чтобы пользователь имел опыт AJAX.

Ниже приведена краткая сводная версия кода. Я могу дать вам полный источник, если вы хотите. Дай мне знать.

<script runat="server"> 
    void aspx_Init(object sender, EventArgs e) 
    { 
    AddCreditCardReceiptButton.Click += new EventHandler(AddCreditCardReceiptButton_Click); 
    } 
    void AddCreditCardReceipt() 
    { 
    AddCreditCardReceipt(this.ID + "_" + Guid.NewGuid().ToString("N").Substring(0, 5)); 
    } 
    void AddCreditCardReceiptButton_Click(object sender, EventArgs e) 
    { 
    AddCreditCardReceipt(); 
    CreditCardReceipt lastAdded = (CreditCardReceipt)CreditCardReceiptPH.Controls[CreditCardReceiptPH.Controls.Count - 1]; 
    lastAdded.ContainerStyle = "display:none"; 
    ScriptManager.RegisterStartupScript(lastAdded, typeof(CreditCardReceipt), lastAdded.ClientID, 
     "$('#CreditCardReceipt_" + lastAdded.ClientID + "').toggle(500);", true); 
    } 
</script> 
<asp:UpdatePanel runat="server" id="CreditCardReceiptUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true"> 
<ContentTemplate> 
    <asp:PlaceHolder ID="CreditCardReceiptPH" runat="server" /> 
    <asp:Button runat="server" ID="AddCreditCardReceiptButton" CausesValidation="false" Text="(+) Add Credit Card Receipt" /></div> 
</ContentTemplate> 

Answer 3

Я предпочитаю, чтобы создать пользовательский элемент управления для раздела образования.

И если вы нажмете на кнопку добавить, событие щелчка кнопки может динамического добавления нового пользователя управления

в пользовательском интерфейсе.