Webforms：允許用戶添加/刪除文本框的最簡單方法？

Question

我不想使用GridView，因爲表格的其餘部分是沒有的。

我只需要能夠創建一個控件來動態地添加/刪除文本框，並將值返回爲對象列表或逗號分隔的字符串。它被證明比它應該更困難。

我試圖使用jQuery +定期asp.net文本框，但是，只有很好地工作時，他們從頭開始 - 預填充的DOM與他們的信息變成一種痛苦。

有什麼痛苦簡單的我失蹤？

Answer 1

這聽起來像你可以從創建一個CompositeControl的受益。

我最近回答了基於動態創建中，我提供了一個非常詳細的示例文本框類似的問題。

參見：Dynamically add a new text box on button click

希望這有助於。

Answer 2

您可以使用jquery添加/刪除輸入[type = text]元素，然後在後面的代碼中使用Request.Form按元素名稱獲取值。

的javascript：

var itemCount = 0; 
$("#list .add").click(function(){ 
    itemCount++; 
    $(this).append("<input type='text' name='item"+itemCount+"'/><button class='remove'>Remove</button>"); 
}); 

$("#list .remove").click(function(){ 
    $(this).prev().remove(); 
}); 

後面的代碼：

string value1 = Request.Form["item1"]; 
string value2 = Request.Form["item2"]; 

Answer 3

有兩種方法。以下是使用純WebForm功能。從不在生產中。它採用過多的視圖狀態和過多的UpdatePanel

這背後

public List<String> ValueContainer { 
     get { 
      return (List<String>)ViewState["ValueContainer"]; 
     } 
     set { 
      ViewState["ValueContainer"] = value; 
     } 
    } 
    protected void Page_Load(object sender, EventArgs e) { 
     if (!IsPostBack) { 
      ValueContainer = new List<string>(); 
     } 
    } 
    private void PopulateRepeater() { 
     rp1.DataSource = ValueContainer; 
     rp1.DataBind(); 
    } 

    protected void lbAdd_Click(object sender, EventArgs e) { 
     ValueContainer.Add(""); 
     rp1.DataSource = ValueContainer; 
     rp1.DataBind(); 
    } 
    protected void rp1_ItemCommand(Object Sender, RepeaterCommandEventArgs e) { 
     ValueContainer.RemoveAt(e.Item.ItemIndex); 
     rp1.DataSource = ValueContainer; 
     rp1.DataBind(); 
    } 

下面的代碼被標記

<asp:ScriptManager runat="server" ID="sm1" /> 
    <asp:UpdatePanel runat="server" ID="up1"> 
    <ContentTemplate> 
     <asp:Repeater runat="server" OnItemCommand="rp1_ItemCommand" ID="rp1"> 
      <ItemTemplate> 
       <asp:TextBox runat="server" ID="myTextBox" /> <asp:LinkButton Text="Remove" runat="server" ID="lbRemove" /> 
      </ItemTemplate> 
     </asp:Repeater> 
     <asp:LinkButton runat="server" ID="lbAdd" onclick="lbAdd_Click" Text="Add" /> 
    </ContentTemplate> 
    </asp:UpdatePanel> 

這是更輕量級版本

<asp:HiddenField runat="server" ID="hfMyField" ClientIDMode="Static" /> 
<script type="text/javascript"> 
    //<![CDATA[ 
    function addTextBox() { 
     $("#myTextboxesContainer").append($("<input type='text' />").keyup(function() { 
      var Data = ""; 
      $("#myTextboxesContainer input").each(function() { 
       Data += $(this).val() + ","; 
      }); 
      $("#hfMyField").val(Data); 
     })); 
    } 
    //]]> 
</script> 
<div id="myTextboxesContainer"> 

</div> 
<a href="javascript:;" onclick="addTextBox();">Add textbox</a> 

這裏的想法是做所有使用客戶端腳本的dom操作並將所有內容都存儲在隱藏字段中。當數據被調回你可以在一個標準的方式，即hfMyField.Value retrive的隱藏字段的值。在這個例子中它是CSV。