Develop Reference

Dynamically created buttons getting disappeared after clicking

I am developing an asp.net application(framework 4.7). I am trying to create buttons dynamically depending upon the values from database. I am using master page. Inside content place holder I have written the following code:
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
In the code behind I am creating buttons dynamically on the click event of another button:
protected void btnGo_Click(object sender, EventArgs e)
{
List<SqlParameter> dbParameters = new List<SqlParameter>();
dbParameters.Add(new SqlParameter("#UserId", Convert.ToInt64(ddlProfile.SelectedValue)));
dbParameters.Add(new SqlParameter("#ProfileId", Convert.ToInt64(ddlProfile.SelectedValue)));
dbParameters.Add(new SqlParameter("#ClientId", "AP001C01"));
DataTable dt = DBManager.GetDataTable("espGetServiceUserWise", dbParameters, conn);
foreach (DataRow row in dt.Rows)
{
if (row["Value"].ToString() == "Accounts")
{
Button btn = new Button();
btn.ID = "btnAccounts";
btn.Text = "Accounts";
btn.Click += new EventHandler(btnAccounts_Click);
Panel1.Controls.Add(btn);
}
else if(row["Value"].ToString() == "Income Tax")
{
Button btn = new Button();
btn.ID = "btnIT";
btn.Text = "Income Tax";
btn.Click += new EventHandler(btnIT_Click);
Panel1.Controls.Add(btn);
}
}
}
This code is creating buttons dynamically. I have written following code on click event of the dynamically created buttons:
protected void btnAccounts_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "Accounts", "alert('Accounts!');", true);
}
protected void btnIT_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "IT", "alert('IT');", true);
}
But the problem is that when I am clicking on dynamically created buttons all the buttons disappear.
Perhaps it is happening for post back. How can I fix the problem? Thanks
Partha

C# - How to add and delete multiple controls dynamically on button click

I am trying to code a survey application which requires text boxes to be added and removed dynamically. I managed to create text boxes dynamically on button click but I'm trying to find out how to removed the text boxes dynamically. Currently the delete functions works well only if I remove text boxes starting from the last. When I try deleting any text boxes in the middle followed by a delete of the last text box, a blank text box is created instead. I'm new to programming and am unsure if this is the best method to use. Also, I would like to find out if it is possible to nest text boxes(allow users to add options to their multi choice questions) to created text boxes and retrieve values inside later.
Code behind:
public partial class Dynamic_Form : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < TotalNumberAdded; ++i)
{
AddQuestion(i + 1);
}
}
protected int TotalNumberAdded
{
get { return (int)(ViewState["TotalNumberAdded"] ?? 0); }
set { ViewState["TotalNumberAdded"] = value; }
}
protected void btn_add_Click(object sender, EventArgs e)
{
TotalNumberAdded++;
AddQuestion(TotalNumberAdded);
}
private void AddQuestion(int controlNumber)
{
Panel newquestion = new Panel();
newquestion.ID = "Panel_" + controlNumber;
TextBox questionbox = new TextBox();
questionbox.ID = "Question_" + controlNumber;
questionbox.Text = "Question";
Button BtnDelete = new Button();
BtnDelete.ID = "BtnDelete_" + controlNumber;
BtnDelete.Text = "Delete"+ controlNumber;
BtnDelete.Click += delete_Click;
DropDownList DDLType = new DropDownList();
DDLType.ID = "DDLType_" + controlNumber;
DDLType.Items.Insert(0, new ListItem("TextField", ""));
DDLType.Items.Insert(1, new ListItem("Multiple Choice", ""));
//add controls
questions.Controls.Add(newquestion);
newquestion.Controls.Add(questionbox);
newquestion.Controls.Add(DDLType);
newquestion.Controls.Add(BtnDelete);
}
private void delete_Click(object sender,EventArgs e)
{
Button btn = (Button)sender;
Control control = btn.Parent;
if (questions.Controls.Contains(control))
{
questions.Controls.Remove(control);
control.Dispose();
TotalNumberAdded--;
Response.Write("Number of Questions:" + TotalNumberAdded);
}
}
}
Html file:
<body>
<form id="form1" runat="server">
<div>
<h1>Test Form</h1>
<asp:Button ID="btn_add" runat="server" Text="Add" OnClick="btn_add_Click" />
</div>
<div id="questions" runat="server">
</div>
</form></body>
.

#Aaron Yong, You can do these scenarios from client side using jQuery or javascript too. I have given below code to achieve what you want from server side.
private void delete_Click(object sender,EventArgs e)
{
Button btn = (Button)sender;
Control control = btn.Parent;
if (questions.Controls.Contains(control))
{
TotalNumberAdded--;
questions.Controls.Clear();
for (int i = 0; i < TotalNumberAdded; ++i)
{
AddQuestion(i + 1);
}
Response.Write("Number of Questions:" + TotalNumberAdded);
}
}
You want to recreate controls again, i have added for loop and removed some code in delete click event, then you will achieve.

As i have given above answer, you can also remove below code from previous answered.
questions.Controls.Remove(control);
control.Dispose();
You will get exact answer

Generic event handler not firing from dynamic buttons

I have a bunch of buttons being dynamically created and setting its click event to an event handler...When I run it they handler in never firing, I've stepped through the code and nothing seems out of the ordinary but it just won't fire.
Here is a snippet of the code where the button is being created..
for (cellCtr = 1; cellCtr <= 9; cellCtr++)
{
Button button = new Button();
HyperLink link = new HyperLink();
TableCell tCell = new TableCell();
if (rowCtr == rN)
break;
string myStr = daccess.dsSubjects.Tables[0].Rows[rowCtr]["SubjectName"].ToString();
int myID = Convert.ToInt32(daccess.dsSubjects.Tables[0].Rows[rowCtr]["SubjectID"].ToString());
button.ID = Convert.ToString(myID);
button.Text = myStr;
button.CssClass = "btn btn-primary btn-sm";
button.Click += ButtonSubjectClick;
tCell.Controls.Add(button);
tRow.Cells.Add(tCell);
rowCtr++;
if (cellCtr == rN)
{
rowCtr = rowCtr - 1;
break;
}
}
and here is the handler that's it suppose to call...
void ButtonSubjectClick(object sender, EventArgs e)
{
Button button = (Button)sender;
daccess.DeleteSubjects(Int32.Parse(button.ID.ToString()));
button.CssClass = "btn-active";
}
When its ran, the source looks like this
<input type="submit" name="38" value="Math" id="38" class="btn btn-primary btn-sm" />

This code works for me:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// do something if needed
}
// outside of postback, you need to add it each time
Button button = new Button();
button.ID = "btn1";
button.Text = "clicky me";
button.Click += new EventHandler(ButtonSubjectClick);
pnl.Controls.Add(button);
}
void ButtonSubjectClick(object sender, EventArgs e)
{
Button button = (Button)sender;
button.Text = "clicked me";
}
I believe it's a question about how are you adding your button to the page. I'm adding my button at each postback and it is thus registered by the server.
If you are adding your buttons in another event then you could use viewstate or session variables, store some kind of a flag to create the button and then check for this flag in each postback.
Edit, for the sake of clarity, pnl is a Panel on my page:
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnl" runat="server"></asp:Panel>
</div>
</form>

EventHandler is not working for dynamic control

I have referred Error with the event handlers of dynamic linkbutton . It says to add event handlers in Page_Init or Page_Load. I tired following code. But the event handler is not fired when I click on the dynamic added link buttons. What need to be corrected here?
Note: The dynamic LinkButton controls are added in the click event of a button after some business validations (the business code is not given for brevity)
Markup
<form id="form1" runat="server">
<div>
<asp:LinkButton ID="lnkTest" runat="server" OnClick="LinkButton_Click">Static LinkButton</asp:LinkButton>
<br />
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" />
<br />
<asp:PlaceHolder ID="plhDynamicLinks" runat="server"></asp:PlaceHolder>
</div>
</form>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
foreach (Control ctrl in plhDynamicLinks.Controls)
{
LinkButton dynamicButton = (LinkButton)ctrl;
dynamicButton.Click += new EventHandler(LinkButton_Click);
}
if (Page.IsPostBack)
{
}
}
protected void Page_Init(object sender, EventArgs e)
{
int x = 0;
foreach (Control ctrl in plhDynamicLinks.Controls)
{
LinkButton dynamicButton = (LinkButton)ctrl;
dynamicButton.Click += new EventHandler(LinkButton_Click);
}
}
protected void LinkButton_Click(object sender, EventArgs e)
{
LinkButton clickedControl = (LinkButton)sender;
Response.Write(clickedControl.ID +" Link Button Clicked");
}
protected void btnAdd_Click(object sender, EventArgs e)
{
plhDynamicLinks.Controls.Clear();
LinkButton button1 = new LinkButton();
button1.ID = "D1";
button1.Text = "1";
plhDynamicLinks.Controls.Add(button1);
LinkButton button2 = new LinkButton();
button2.ID = "D2";
button2.Text = "2";
plhDynamicLinks.Controls.Add(button2);
}

It is mandatory to register all the required dynamic controls’ event handlers in the Page_Load/ Page_Init itself. One working example can be seen at Dynamic Control’s Event Handler’s Working
MarkUp
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" />
<br />
<asp:PlaceHolder ID="plhDynamicLinks" runat="server"></asp:PlaceHolder>
</div>
</form>
CODE BEHIND
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
LinkButton lnk1 = new LinkButton();
lnk1.ID = "D1";
lnk1.Text = "A";
//Event handler must be registered in the Page_Load/Page_Init
lnk1.Click += new EventHandler(LinkButton_Click);
plhDynamicLinks.Controls.Add(lnk1);
LinkButton lnk2 = new LinkButton();
lnk2.ID = "D2";
lnk2.Text = "B";
lnk2.Click += new EventHandler(LinkButton_Click);
plhDynamicLinks.Controls.Add(lnk2);
LinkButton lnk3 = new LinkButton();
lnk3.ID = "D3";
lnk3.Text = "C";
lnk3.Click += new EventHandler(LinkButton_Click);
plhDynamicLinks.Controls.Add(lnk3);
LinkButton lnk4 = new LinkButton();
lnk4.ID = "D4";
lnk4.Text = "D";
lnk4.Click += new EventHandler(LinkButton_Click);
plhDynamicLinks.Controls.Add(lnk4);
}
}
protected void LinkButton_Click(object sender, EventArgs e)
{
PopulateLinksBasedOnCriteria();
LinkButton clickedControl = (LinkButton)sender;
Response.Write(DateTime.Now.ToString()+"___"+ clickedControl.ID + " Link Button Clicked" );
}
protected void btnAdd_Click(object sender, EventArgs e)
{
PopulateLinksBasedOnCriteria();
}
private void PopulateLinksBasedOnCriteria()
{
plhDynamicLinks.Controls.Clear();
if (DateTime.Now.Second < 30)
{
LinkButton linkButton1 = new LinkButton();
linkButton1.ID = "D1";
linkButton1.Text = "1";
plhDynamicLinks.Controls.Add(linkButton1);
LinkButton linkButton2 = new LinkButton();
linkButton2.ID = "D2";
linkButton2.Text = "2";
plhDynamicLinks.Controls.Add(linkButton2);
}
else
{
LinkButton linkButton3 = new LinkButton();
linkButton3.ID = "D3";
linkButton3.Text = "3";
plhDynamicLinks.Controls.Add(linkButton3);
LinkButton linkButton4 = new LinkButton();
linkButton4.ID = "D4";
linkButton4.Text = "4";
plhDynamicLinks.Controls.Add(linkButton4);
}
}

Dynamic controls must be re-created on every postback, this Article is a good link about how to persist dynamic controls and their state.

Add javascript onClick attribute to the dymanic control and set hidden field values which is required for the control event. Onclick of the dymanic grid, the will postback and will get the hidden field value. In page load call a method to do the job if the hidden field has value and make it null after doing the job.

How do you add a Gridview programmatically to an UpdatePanel

I can't figure out how to programmatically add a GridView with buttons to an UpdatePanel.
I can do it with simple controls such as buttons and labels, but when I try to add a GridView with buttons a full Postback() occurs.
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected override void OnInit(EventArgs e)
{
UpdatePanel up1 = new UpdatePanel();
up1.ID = "UpdatePanel1";
Button button1 = new Button();
button1.ID = "Button1";
button1.Text = "Submit";
button1.Click += new EventHandler(Button_Click);
Label label1 = new Label();
label1.ID = "Label1";
label1.Text = "A full page postback occurred.";
GridView gv1 = new GridView();
//Where the xml gets bonded to the data grind
XmlDataSource xds = new XmlDataSource();
xds.Data = xml;
xds.DataBind();
xds.EnableCaching = false;
gv1.DataSource = xds;
createButton(gv1, up1);
gv1.RowCommand += new GridViewCommandEventHandler(CustomersGridView_RowCommand);
gv1.DataBind();
up1.ChildrenAsTriggers = true;
up1.ContentTemplateContainer.Controls.Add(button1);
up1.ContentTemplateContainer.Controls.Add(label1);
up1.ContentTemplateContainer.Controls.Add(gv1);
Page.Form.Controls.Add(up1);
}
protected void Page_Load(object sender, EventArgs e)
{
}
public void CustomersGridView_RowCommand(Object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "buttonClicked")
{
int index = Convert.ToInt32(e.CommandArgument);
}
}
void createButton(GridView g)
{
ButtonField tea = new ButtonField();
tea.ButtonType = ButtonType.Image;
tea.ImageUrl = "~/checkdailyinventory.bmp";
tea.CommandName = "buttonClicked";
tea.HeaderText = "space";
g.Columns.Add(tea);
}
protected void Button_Click(object sender, EventArgs e)
{
((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanel Constructor Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</div>
</form>
</body>
</html>
So how do you add a gridview with buttons programmatically to an UpdatePanel without causing a full PostBack() if the GridView is clicked?
Edit: Other things I have tried
void gv1_RowDataBound(object sender, GridViewRowEventArgs e)
{
AsyncPostBackTrigger t = new AsyncPostBackTrigger();
t.ControlID = e.Row.Cells[0].ClientID;
t.EventName = "blah";
up1.Triggers.Add(t);
}

Well according to:
And I don't mind having the update panel created at the design time. I just need to be able to add stuff (like tables that contain gridviews that contain buttons into it) programmatically and then be able to do a partial postback
Basically I used your code with small changes:
Removed the binding from the Init event and I execute it in the Load event
The UpdatePanel is created at design time with a nested panel, and you simply add your dynamic controls to that panel
This code will do it (it works on my environment):
ASPX
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="myPanel">
</asp:Panel>
<br />
<asp:Label runat="server" ID="lblMessage"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
Code behind
protected void Page_Init(object sender, EventArgs e)
{
Button button1 = new Button();
button1.ID = "Button1";
button1.Text = "Submit";
button1.Click += new EventHandler(Button_Click);
Label label1 = new Label();
label1.ID = "Label1";
label1.Text = "A full page postback occurred.";
var s1 = Builder<Product>.CreateListOfSize(15).Build();
GridView gv1 = new GridView();
gv1.DataSource = s1;
createButton(gv1);
gv1.RowCommand += new GridViewCommandEventHandler(CustomersGridView_RowCommand);
this.myPanel.Controls.Add(button1);
this.myPanel.Controls.Add(label1);
this.myPanel.Controls.Add(gv1);
}
void createButton(GridView g)
{
ButtonField tea = new ButtonField();
tea.ButtonType = ButtonType.Image;
tea.ImageUrl = "~/checkdailyinventory.bmp";
tea.CommandName = "buttonClicked";
tea.HeaderText = "space";
g.Columns.Add(tea);
}
protected void Button_Click(object sender, EventArgs e)
{
((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
DateTime.Now.ToString();
}
protected void Page_Load(object sender, EventArgs e)
{
this.DataBind();
}
public void CustomersGridView_RowCommand(Object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "buttonClicked")
{
//int index = Convert.ToInt32(e.CommandArgument);
this.lblMessage.Text = DateTime.Now.ToString();
}
}
Output

Couldn't you just put the GridView in there at design time and just hide it by setting Visible=false?
If you don't know how many gridviews you need to repeat then you could wrap the GridView in a ListView. The concept is introduced here:
http://mattberseth.com/blog/2008/01/building_a_grouping_grid_with.html
This might not be the perfect solution I just thought I would offer it seeing as there is a bounty I assume you have hit a brick wall so far.