How to remove dynamically created textboxes in asp.net?
The following code block allows the user creates textbox controls dynamically. However, on each creation I'd like to add a delete button to delete the speficied textbox. I know I can do this by adding a button control when the textbox is created and assign an event to the button in question. However, such act will result in unconvinient situations such as when you remove the textbox sometimes it will remove the last textbox and sometimes it will perform successfully. My question is how can I add a button near each textbox created to let the user remove the created control while preserving all the other dynamic controls?
Front page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicControls.aspx.cs" Inherits="MyAspnetApp.DynamicControls" EnableViewState="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"></head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAddTextBox" runat="server" Text="Add" OnClick="btnAddTextBox_Click" />
<asp:Button ID="btnWriteValues" runat="server" Text="Write" OnClick="btnWriteValues_Click" />
<asp:PlaceHolder ID="phControls" runat="server" />
</div>
</form>
</body>
</html>
Code behind:
using System;
using System.Web.UI.WebControls;
namespace MyAspnetApp
{
public partial class DynamicControls : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//Recreate textbox controls
if(Page.IsPostBack)
{
for (var i = 0; i < TextBoxCount; i++)
AddTextBox(i);
}
}
private int TextBoxCount
{
get
{
开发者_如何学运维 var count = ViewState["txtBoxCount"];
return (count == null) ? 0 : (int) count;
}
set { ViewState["txtBoxCount"] = value; }
}
private void AddTextBox(int index)
{
var txt = new TextBox {ID = string.Concat("txtDynamic", index)};
txt.Style.Add("display", "block");
phControls.Controls.Add(txt);
}
protected void btnAddTextBox_Click(object sender, EventArgs e)
{
AddTextBox(TextBoxCount);
TextBoxCount++;
}
protected void btnWriteValues_Click(object sender, EventArgs e)
{
foreach(var control in phControls.Controls)
{
var textBox = control as TextBox;
if (textBox == null) continue;
Response.Write(string.Concat(textBox.Text, "<br />"));
}
}
}
}
If you want to play with dynamically adding and removing controls in ASP.NET, you have to read Dave Reed's excellent and definitive article on it: "Truly Understanding Dynamic Controls".
If you don't understand the issues involved -- such as the mandate that the controls of the tree must be completely reconstructed upon each and every request to the page -- then you're signing up for a world of pain. Once you do understand these issues, you'll be a much better ASP.NET developer in general (at least I was). Good luck! Keith
I've solved the problem. The trick was to make it invisible rather then removing the control when the user clicks on remove button.
I would recommend you NOT to do so via Full PostBack. You better just hide it client-side with Javascript.
In case you need to save some "State" server-side, use AJAX Postbacks AKA XHR to communicate with the server. (I just hate page flicking, LOL)
BTW, this is a perfect fwk for this sort of stuff: http://examples.ext.net/#/Events/DirectMethods/Overview/
The <asp:repeater> could be what you're searching for. Then the delete button's click handler would be to just delete the parent (which would delete the entire repeated element) and the add handler would be to add another element.
加载中,请稍侯......
精彩评论