We Keep Coding

Inject a textbox in WebForms and retain the value on postback

I have a WebForms page that I would like to inject some additional controls into at runtime. Currently I am achieving this in the Page_Load event using a Literal control.
For example the page looks like this (note that the TextBox1 is not an asp control just to show that it works):
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<input id="TextBox1" type="text" runat="server"/>
<asp:Literal ID="Literal1" runat="server" Visible="false"></asp:Literal>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</asp:Content>
And the code behind:
protected void Page_Load(object sender, EventArgs e)
{
Literal1.Visible = true;
if (!IsPostBack) Literal1.Text = "<input id=\"TextBox2\" type=\"text\" runat=\"server\"/>";
}
This works fine and both textboxes appear on the screen but if I type a value in to both and trigger a postback only the value of TextBox1 is retained.
I have tried moving my code to OnPreRender and OnPreLoad but still have the same issue.
I have noticed that when I view the page source TextBox1 has a UniqueId (e.g. ctl00$MainContent$TextBox1) while Textbox2 still has runat="server" as an attribute.

You can't inject server controls like this. You would need to add them as suggested in #Arvin's answer.
However, you use inject non-ASP.NET HTML controls similar to what you are doing and get their values.
From your code change the input's id to a name and drop the runat="server":
protected void Page_Load(object sender, EventArgs e)
{
Literal1.Visible = true;
if (!IsPostBack) Literal1.Text = "<input name=\"TextBox2\" type=\"text\" />";
}
Then you can get it's value on postback:
string textbox2value = Request.Form["TextBox2"];
Then, if you want to add the control on postback with it's value:
Literal1.Text = "<input name=\"TextBox2\" type=\"text\" value=\"" +
Server.HTMLEncode(textbox2value) + "\" />";

if you want to inject a textbox you should use placeholder like this :
<input id="TextBox1" type="text" runat="server"/>
<asp:PlaceHolder ID="plh" runat="server"></asp:PlaceHolder>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
protected void Page_Load(object sender, EventArgs e)
{
TextBox TextBox = new TextBox();
TextBox.ID = "TextBox2";
plh.Controls.Add(TextBox);
}
protected void Button1_Click(object sender, EventArgs e)
{
var Text1 = TextBox1.Value;
var Text2 = Request.Form["TextBox2"];
}

C# Repeater focusing the first element after DataSource is changed

I have a Repeater with a certain DataSource (consisting of a list of images). The Repeater holds ImageButtons.
The aspx:
<asp:Panel ID="panSearch" runat="server" ScrollBars="Vertical" BorderColor="#333333" BorderStyle="Inset" Width="500" Height="200">
<asp:Repeater ID="Repeater" runat="server">
<ItemTemplate>
<asp:ImageButton OnClick="imgSearchResult_Click" BackColor="#333333" ID="imgSearchResult" height="32" width="32" runat="server" ImageUrl='<%# Eval("ImageUrl") %>'/>
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
Additionally, I have a TextBox, which has a TextChanged-event in code-behind. I do a few things in there and at the end, my Repeater's DataSource will be overwritten with a new List of images (those images are put into the ImageButtons).
Repeater.DataSource = ImageList;
Repeater.DataBind();
My problem: Whenever my Repeater.DataSource is changed, it "clicks" the first ImageButton inside the Repeater. How do I prevent that from happening?
Full code:
My TextBox:
<asp:TextBox ID="textSearch" runat="server" Width="80" OnTextChanged="textSearch_TextChanged" ForeColor="Black" />
My TextChanged event:
protected void textSearch_TextChanged(object sender, EventArgs e)
{
string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images/ORAS"));
List<System.Web.UI.WebControls.Image> ImageList = new List<System.Web.UI.WebControls.Image>(filesindirectory.Count());
foreach (string item in filesindirectory)
{
System.Web.UI.WebControls.Image myImage= new System.Web.UI.WebControls.Image();
myImage.ImageUrl = (String.Format("~/Images/ORAS/{0}", System.IO.Path.GetFileName(item)));
ImageList.Add(myImage);
}
Repeater.DataSource = ImageList;
Repeater.DataBind();
}
When I click on an ImageButton inside the Repeater (which is executed when the text in my TextBox is changed):
protected void imgSearchResult_Click(object sender, ImageClickEventArgs e)
{
var selectedImage = sender as ImageButton;
if (img1.ImageUrl == "~/Images/ORAS/Empty/000.png")
{
img1.ImageUrl = selectedImage.ImageUrl;
}
else if (img2.ImageUrl == "~/Images/ORAS/Empty/000.png")
{
img2.ImageUrl = selectedImage.ImageUrl;
}
else if (img3.ImageUrl == "~/Images/ORAS/Empty/000.png")
{
img3.ImageUrl = selectedImage.ImageUrl;
}
else if (img4.ImageUrl == "~/Images/ORAS/Empty/000.png")
{
img4.ImageUrl = selectedImage.ImageUrl;
}
else if (img5.ImageUrl == "~/Images/ORAS/Empty/000.png")
{
img5.ImageUrl = selectedImage.ImageUrl;
}
else if (img6.ImageUrl == "~/Images/ORAS/Empty/000.png")
{
img6.ImageUrl = selectedImage.ImageUrl;
}
else
{
ErrorMessage("Please remove one Image first!", true);
}
}
Pageload:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
img1.ImageUrl = "~/Images/ORAS/Empty/000.png";
img2.ImageUrl = "~/Images/ORAS/Empty/000.png";
img3.ImageUrl = "~/Images/ORAS/Empty/000.png";
img4.ImageUrl = "~/Images/ORAS/Empty/000.png";
img5.ImageUrl = "~/Images/ORAS/Empty/000.png";
img6.ImageUrl = "~/Images/ORAS/Empty/000.png";
LoadImages();
}
}
(LoadImages is almost 1:1 what's in my TextChanged function)

I really am not sure how (why) ASP.NET WebForms does it, but if you hit Enter and the form posts back, it will find the first control that implements IPostBackEventHandler and execute whatever event is bound to that. ImageButton implements it and so that's why it keeps firing the click event even though you didn't click on it. And, once again, only if you hit Enter.
I think that behaviour happens because the data posted back - __EVENTTARGET and __EVENTARGUMENT - are empty. Then ASP.NET goes bonkers.
You can solve it by putting a dummy button at the top of the page (or masterpage) and hide it using the style attribute. so:
<asp:Button ID="dummy" runat="server" style="display:none" />
Then in the init or load of your page (or masterpage) put
Form.DefaultButton = dummy.UniqueID;
That will force the button to capture the enter press instead of the arbitrary image button.

Timer, UpdatePanel and dynamically created buttons

I have an update panel with a div (with runat="server") so I dynamically create and add buttons to it on a timer tick event.
The problem is that when a button is click, the is a postback but the button is gone and the event is not raised.
Here's my aspx page and my c# code behind. Nothing I write in the btn1_click actually occurs.
There's a continue to my question but in order to keep it simple, I would like to understand the above first.
I really need your help and i appreciate it, ty.
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="2000" ontick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<div id="div1" runat="server"></div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="div2" runat="server">div2</div>
</form>
</body>
and this c# here.
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Timer1_Tick(object sender, EventArgs e)
{
CreateControl();
}
void CreateControl()
{
Button btn1 = new Button();
btn1.ID = "btn1";
btn1.Text = "click me";
btn1.Click += new EventHandler(btn1_Click);
div1.Controls.Add(btn1);
}
void btn1_Click(object sender, EventArgs e)
{
div1.InnerHtml += "btn1 was clicked";
}
}

For dynamically added controls you must add them in every page load event. Otherwise by the time it gets to the click event the are already gone. In this case I would add the button to a session collection of buttons every time you create one, then reload that entire collection on every postback, so it doesn't lose what you've already added. Also, save an int in session that you increment so they dont all have the same ID. IDs should be unique
something like:
protected void Page_Load(object sender, EventArgs e)
{
if(Page.IsPostBack)
{
CreateControls(YourCollectionInSession)
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
CreateControl();
}
void CreateControl()
{
Button btn1 = new Button();
btn1.ID = "btn" + yourSessionID;
btn1.Text = "click me";
btn1.Click += new EventHandler(btn1_Click);
div1.Controls.Add(btn1);
yourSessionID++;
YourCollectionInSession.Add(btn1);
}
void CreateControl(List<Button> buttons)
{
foreach(Button btn in buttons)
{
div1.Controls.Add(btn);
}
}
I've had to do the same thing before and this approach worked for me. Just remember the ASPx Page Lifecycle. It will always hit the page_init and page_load before it handles any post back events, meaning your controls are long gone.

Dynamic change dropdownlist and textbox by custom control

I want to write a custom control involving a DropDownList and a TextBox.
Actually, I want to dynamically render DropDownList and TextBox.
For example: when a user clicks a Checkbox, the Textbox will change to a DropdownList. On the other hand, when a user deselects the Checkbox, the Dropdownlist will change to a Textbox.
I know this can be done using two controls, which sets the visibility for both control. But can I do it on a custom control?

If you still want to go with that approach, here is your code.
In Design File:-
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True"
oncheckedchanged="CheckBox1_CheckedChanged" />
<div id ="control" runat="server">
</div>
In Code Behind File:-
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
TextBox txt = new TextBox();
txt.ID = "txt";
control.Controls.Add(txt);
}
}
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
if (CheckBox1.Checked)
{
for (int ix = this.Controls.Count - 1; ix >= 0; ix--)
if (this.Controls[ix] is TextBox) this.Controls[ix].Dispose();
DropDownList ddl = new DropDownList();
ddl.ID = "ddl";
control.Controls.Add(ddl);
}
else
{
for (int ix = this.Controls.Count - 1; ix >= 0; ix--)
if (this.Controls[ix] is DropDownList) this.Controls[ix].Dispose();
TextBox txt = new TextBox();
txt.ID = "txt";
control.Controls.Add(txt);
}
}
Hope this is what you were looking for.

You could try this code
ASPX
<%# Control Language="C#" AutoEventWireup="true" CodeFile="dynamicControl.ascx.cs" Inherits="dynamicControl" %>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true"
oncheckedchanged="CheckBox1_CheckedChanged" />
<asp:DropDownList ID="DropDownList1" runat="server" visible="false">
</asp:DropDownList>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
CodeBehind
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
DropDownList1.Visible = CheckBox1.Checked;
TextBox1.Visible = !CheckBox1.Checked;
}
This snippet will show a dropDownList if CheckBox is checked and change to TextBox if it's not checked. Despite this is possible I don't think this is the right approach. (eg: AutoPostBack needed, set visibility...)
What do you try to achieve?

Issue with dynamically loading a user control on button click

I have a page in which I am loading a user control dynamically as follows:
Default.aspx:
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
var ctrl = LoadControl("~/UserCtrl1.ascx");
ctrl.ID = "ucUserCtrl1";
PlaceHolder1.Controls.Add(ctrl);
}
Below is the code for UserCtrl1.ascx
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
<br />
<asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
I am dynamically loading another user control when the Button1 is clicked
UserCtrl1.ascx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "UserControl - 1 button clicked!";
var ctrl = LoadControl("~/UserCtrl2.ascx");
ctrl.ID = "ucUserCtrl2";
PlaceHolder2.Controls.Add(ctrl);
}
Below is the markup for UserCtrl2.ascx
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label2" runat="server"></asp:Label>
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" />
</ContentTemplate>
</asp:UpdatePanel>
UserCtrl2.ascx.cs
protected void Button2_Click(object sender, EventArgs e)
{
Label2.Text = "UserControl - 2 button clicked!";
}
After the page loads when I click the Button1 in UserCtrl1 the click event fires and I am able to see the Label1 text. It also properly loads the UserCtrl2, but when I click the Button2 in UserCtrl2 the click event dosent fire and even worse when I click the Button2 twice the UserCtrl2 control dissappears from the page. How can I fix this?

The problem with the second control is that you are loding it only after the click of button 1. But when some other (not button 1 click) postback happens your second control is not loaded.
One of possible fixes is saving some flag (e.g. in ViewState) that will help you to determine if your second control should be loaded (and load in on page load).
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "UserControl - 1 button clicked!";
var ctrl = LoadControl("~/UserCtrl2.ascx");
ctrl.ID = "ucUserCtrl2";
PlaceHolder2.Controls.Add(ctrl);
this.SecondControlLoaded = true; // This flag saves to ViewState that your control was loaded.
}
protected void Page_Load(object sender, EventArgs e)
{
var ctrl = LoadControl("~/UserCtrl1.ascx");
ctrl.ID = "ucUserCtrl1";
PlaceHolder1.Controls.Add(ctrl);
if (this.SecondControlLoaded)
{
var ctrl = LoadControl("~/UserCtrl2.ascx");
ctrl.ID = "ucUserCtrl2";
PlaceHolder2.Controls.Add(ctrl);
}
}