Question

我有这样的要求。

我使用ASP.NET开发网页。

现在我想点击按钮，然后在页面中添加新的文本框。这是代码的一部分：

  <table with="900px">
    <tr>
        <td>
            Email :
        </td>
        <td>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Add" />
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:TextBox ID="txtEmail0" runat="server"></asp:TextBox>
             <asp:Button ID="Button2" runat="server" Text="[delete]" />
            <%--     the name should by txtEmail + <0,1,2,3,4..>--%>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:TextBox ID="txtEmail1" runat="server"></asp:TextBox>
            <asp:Button ID="Button3" runat="server" Text="[delete]" />
        </td>
    </tr>
</table>

页面如：

enter image description here

那么如何完成此功能，还包括使用jquery或javascript添加新文本框。

开始，我想拖动五个文本框，然后隐藏它，如果点击添加，则显示一个文本框，如果单击删除，然后隐藏文本框。这是一个很好的解决方案吗？

服务器端和客户端都需要验证textemail

然后需要关联动态文本框。有人可以帮我吗？

Answer 1

请查看我在我的申请中使用的以下代码

function funAddElement(){
  var newTBDiv = document.createElement('div');
  document.getElementById("HdnBillDetailsCount").value = parseInt(document.getElementById("HdnBillDetailsCount").value) + 1;
        var count = document.getElementById("HdnBillDetailsCount").value;
        if (count >= 10) {
            return false;
        }
        newTBDiv.setAttribute('id', 'divBillDetails' + count);
        var billno = 'txtBillNo' + count;
        var amount = 'txtAmount' + count;
        newTBDiv.innerHTML = "<table width='100%' border='0' cellspacing='1' cellpadding='7' bgcolor='white' class='form_cont'> <tr> <td> BillNo </td> <td> <input type='text' value='' id='" + billno + "'/> </td><td>Amount:</td><td><input type='text' value='0.0'  ondrop='return false;' onpaste='return false;' oncut='return false;' oncopy='return false;' onkeypress='return numericOnly(this);' id='" + amount + "'/></td></tr></table>"
        divBillDetails.appendChild(newTBDiv);  
    }

divBillDetails是第一个文本框中的div。在这里，当你点击我打电话的按钮

OnClientClick="funAddElement();return false;"<br/>

此函数将文本框添加到div直到10，并且添加的文本框计数存储在HdnBillDetailsCount隐藏控件中

Answer 2

您可以在asp.net中使用C＃简单地添加文本框和按钮。请尝试以下

<body>
<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>

后端代码如下......

protected void Button1_Click(object sender, EventArgs e)
    {
        TextBox aTextBox = new TextBox();
        aTextBox.ID = "helloText";
        Button aButton = new Button();
        aButton.ID = "helloButton";
        aButton.Click += aButton_Click;
        aButton.Text = "helloButton";
        form1.Controls.Add(aTextBox);
        form1.Controls.Add(aButton);
    }

    void aButton_Click(object sender, EventArgs e)
    {
        throw new NotImplementedException();
    }

Answer 3

Knockoutjs rock：

    <script src="http:////cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js" type="text/javascript"></script>
    <asp:HiddenField ID="hfClientModel" runat="server" />
    <script type="text/javascript">
        var oViewModel;
        var iCounter;
        $(document).ready(function () {
            var oModel = JSON.parse($('#<%= hfClientModel.ClientID %>').val());
            iCounter = oModel.Items.length;
            oViewModel = ko.mapping.fromJS(oModel);
            ko.applyBindings(oViewModel);
        });
        function DeleteEmail(iEmailIndex) {
            oViewModel.Items.remove(function (item) { return item.Index() == iEmailIndex; });
        }
        function AddEmail() {
            iCounter++;
            oViewModel.Items.push(ko.mapping.fromJS({ Email: '', Index: iCounter }));
        }
        function PersistClientModel() {
            $('#<%= hfClientModel.ClientID %>').val(ko.toJSON(oViewModel));
        }
    </script>
    <table width="900px">
        <tr>
            <td>
                Email :
            </td>
            <td>
                <input type="text" data-bind="{value: FirstEmail}" />
                <input type="button" value="Add" onclick="AddEmail()" />
            </td>
        </tr>
        <!-- ko foreach: Items -->
        <tr>
            <td>&#160;</td>
            <td>
                <input data-bind="{value: Email}" />
                <input type="button" value="Delete" data-bind="{click: function() { DeleteEmail($data.Index()); }}" />
            </td>
        </tr>
        <!-- /ko -->
    </table>
    <asp:Button Text="Postback!" ID="btnSave" runat="server" OnClick="btnSave_Click" OnClientClick="PersistClientModel()" />

服务器端：

[DataContract]
public class ViewModel {
  [DataMember]
  public string FirstEmail { get; set; }
  [DataMember]
  public IList<EmailModel> Items { get; set; }

  public ViewModel() {
    Items = new List<EmailModel>();
  }
}

[DataContract]
public class EmailModel {
  [DataMember]
  public string Email { get; set; }
  [DataMember]
  public int Index { get; set; }
}

public partial class Default : System.Web.UI.Page {
  protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
      var serializer = new DataContractJsonSerializer(typeof(ViewModel));
      using (var stream = new MemoryStream()) {
        serializer.WriteObject(stream, new ViewModel());
        hfClientModel.Value = Encoding.UTF8.GetString(stream.ToArray());
      }
    }
  }

  protected void btnSave_Click(object sender, EventArgs e) {
    var serializer = new DataContractJsonSerializer(typeof(ViewModel));
    ViewModel viewModel;
    using (var stream = new MemoryStream(Encoding.UTF8.GetBytes(hfClientModel.Value), false)) {
      viewModel = (ViewModel)serializer.ReadObject(stream);
    }
    // enjoy viewModel
  }
}

c＃添加动态文本框

3 个答案: