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

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

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

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

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

Answer 3

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

Я сделал 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>