C＃動態添加文本框
[英]c# add Textbox dynamic
問題描述
我有這樣的要求。
我使用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>
頁面如下：
那么如何完成此功能，還包括使用jquery或javascript添加新的文本框 。
首先，我要拖動五個文本框，然后將其隱藏，如果單擊添加，則顯示一個文本框，如果單擊刪除 ，則將其隱藏 。 那是一個好的解決方案嗎？
服務器端和客戶端都需要驗證textemail
那么這需要關聯動態文本框。 有人可以幫我嗎？
3 個解決方案
解決方案1
1 2013-11-27 13:16:07
請檢查以下我在我的應用程序中使用的代碼
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隱藏控件中
解決方案2
1 2013-11-27 13:43:33
您只需在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();
}
解決方案3
1 2013-11-27 13:57:10
Knockoutjs的岩石：
<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> </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
}
}
將Ajax CalendarExtender添加到ASP.NET C＃中的動態文本框
[英]Add Ajax CalendarExtender to a dynamic textBox in ASP.NET C#
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.