How To Create TextBox Control Dynamically at Runtime/ problems with .cs

Question

This page is to retrieve data and display in the page and enable user to edit the info.

at this moment i need to retrieve the data and display it in textbox.

as i also have to retrieve multiple data from data and display on each different text box.

my .cs code is as follows:

foreach (DataRow dr in ChildImageDT.Rows)
{
  myImage = new Images();
  myImage.DateTaken = DateTime.Parse(dr["image_taken_dt"].ToString());
  myImage.PlaceTaken = dr["image_taken_loc"].ToString();
  myImage.DetailedInfo = dr["image_info"].ToString();

  tableString += "<tr><td>Date Taken:</td>";
  tableString += "<td><asp:TextBox ID=\"txtDateOfBirth\">" + myImage.DateTaken + "</asp:TextBox>";
  tableString += "<asp:CalendarExtender ID=\"CalendarExtender1\" runat=\"server\" CssClass=\"AjaxCalendar\"";
  tableString += "PopupButtonID=\"imgCalendar\" PopupPosition=\"Right\" TargetControlID=\"txtDateOfBirth\" Format=\"MM/dd/yyyy\"></asp:CalendarExtender>";
  **tableString += "<asp:TextBoxWatermarkExtender ID=\"TextBoxWatermarkExtender1\" runat=\"server\" TargetControlID=\"txtDateOfBirth\" WatermarkText=\"Month/Day/Year\" WatermarkCssClass=\"watermarked\"></asp:TextBoxWatermarkExtender>";**
  tableString += "<asp:Image ID=\"imgCalendar\" runat=\"server\" ImageUrl=\"img/Button/calendar.png\" Width=\"20px\" /></td>";
  **tableString += "<td rowspan=3 ><input type=\"button\" class=\"right_content\" title=\"" + " " + "\"";
  tableString += "onClick =\"location.href='ViewProfile.aspx?cid=" + "" + "'\" ";
  tableString += "style=\"background-size:100%; background:url('/img/missing%20children%20pictures/";**
  tableString += "" + ".jpg')\"/></td></tr>";
  tableString += "<tr><td>Place Taken:</td>";
  **tableString += "<td>" + textbox1.Text = myImage.PlaceTaken;**
  tableString += "</td><td></td></tr>";
  tableString += "<tr><td rowspan=3>Detailed Info:</td>";
  tableString += "<td rowspan=3><input id=\"txtImageDetailedInfo\" type=\"text\">" + myImage.DetailedInfo + "</input></td><td></td></tr>";
  tableString += "<tr><td><input id=\"SetProfilePicture\" type=\"radio\" /></td></tr>";
  tableString += "<tr><td><input id=\"DeletePhoto\" type=\"checkbox\" /></td></tr>";
}

the page should look like this : where each photo as it own description and i need to retrieve all the images and data from Screenshot

Just a mention, using string += in this manner murders the performance. Use StringBuilder for any significant text building. — SWeko
– SWeko, Commented Jul 26, 2011 at 6:54
Also, since you are using a fixed template, and injecting values into it, take a look at string.Format, it might save you some headaches further down the way. — SWeko
– SWeko, Commented Jul 26, 2011 at 6:57
can you give me some example? it would really help me thanks — foo ming xiang
– foo ming xiang, Commented Jul 26, 2011 at 7:12
MSDN Pages for StringBuilder and String.Format should be a good starting point. — SWeko
– SWeko, Commented Jul 26, 2011 at 7:21

Sergey Shulik · Accepted Answer · 2011-07-26 07:23:25Z

1

What for you need this? I thing you have a bad design of you application and the best solution of your issue its to use another method do display your data and controls. As I understand you – you need to display many repeater blocks of data, wich include your textboxes. Try to read about Repeater Control. For example, your problem will have next solution:

    <asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <table>
            <tr>
                <td>UserName:</td>
                <td><asp:TextBox ID="txtName" runat="server" /></td>
            </tr>
            <tr>
                <td>Image:</td>
                <td><asp:TextBox ID="txtPassword" Text="<%#Eval("Password")%>" runat="server" /></td>
            </tr>
            <tr>
                <td>Image:</td>
                <td><asp:Image ID="TextBox1" ImageUrl="<%#Eval("ImgUrl")%>" runat="server" /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:Repeater>

And in code you can use your repeater like that:

public partial class _Default : System.Web.UI.Page
{
    private class User
    {
        public string Name { get; set; }
        public string Password { get; set; }
        public string ImageUrl { get; set; }
    }

protected void Page_Load(object sender, EventArgs e)
{
    var userList = new[] {
        new User {Name = "user1", Password = "pass1", ImageUrl = "img1.jpg"},
        new User {Name = "user2", Password = "pass2", ImageUrl = "img2.jpg"},
        new User {Name = "user3", Password = "pass3", ImageUrl = "img3.jpg"},
    };

    Repeater1.DataSource = userList;
    Repeater1.DataBind();
}

}

Mor about Repeater you can read here

answered Jul 26, 2011 at 7:23

Sergey Shulik

1,0101 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

foo ming xiang Over a year ago

i have tried this but could u guide me on how to use foreach (DataRow dr in ChildImageDT.Rows) with repeater.. i cant seem to get to populate out the data

Sergey Shulik Over a year ago

I answer to your question as new comment to your post, becouse i need write some code.

Yiğit Yener · Accepted Answer · 2011-07-26 07:23:28Z

1

You should use Repeater control or some other data repeater control for building such layouts.

answered Jul 26, 2011 at 7:23

Yiğit Yener

6,0062 gold badges25 silver badges26 bronze badges

Comments

Peyman · Accepted Answer · 2011-07-26 07:24:44Z

1

I think you can author your code in better way. I suggest two ways:

You can use PlaceHolder control and add control to place holder. You can add the html via Literal Control.

LiteralControl lit = new LiteralControl("<tr><td>Date Taken:</td>");
placeHolder1.Controls.Add(lit);

[Code]

var txt = new TextBox();
txt.Text = [Data];
PlaceHolder1.Controls.Add(txt);

you can override the Render page event and write html by HTMLTextWriter.

protected override void Render(HtmlTextWriter output) {
  output.Write ("<h3> Hello </h3>");
}

edited Jul 26, 2011 at 7:24

answered Jul 26, 2011 at 7:01

Peyman

3,1361 gold badge21 silver badges32 bronze badges

1 Comment

foo ming xiang Over a year ago

sorry, i dont understand on what your trying to say, can you provide a much more closer example using my codes? thanks alot

Sergey Shulik · Accepted Answer · 2011-07-27 05:22:22Z

1

According your question:

i have tried this but could u guide me on how to use foreach (DataRow dr in ChildImageDT.Rows) with repeater.. i cant seem to get to populate out the data

Try to do next:

            var userList = new List<User>();
            foreach (DataRow row in dataTable.Rows)
            {
                var user = new User()
                               {
                                   Name = row["Name"].ToString(),
                                   Password = row["Password"].ToString(),
                                   ImageUrl = row["ImageUrl"].ToString()
                               };
                userList.Add(user);
            }

            repeater1.DataSource = userList;
            repeater1.DataBind();
        }

Of course, you need to define your class, that implement data contrcats, accordin your task.

And i strongly recommend you, spend one or two days to read chapter about Repeater. Believe me, if you do it - your progress of your create yuor program is much accelerated.

p.s.: try to ready about Linq - its very powerfull technology to replace your foreach in task, like this.

answered Jul 27, 2011 at 5:22

Sergey Shulik

1,0101 gold badge10 silver badges26 bronze badges

2 Comments

foo ming xiang Over a year ago

alright will research more on those topic . thanks for ur advice. just one more thing. using this solution , (since i have 2 set of data which will be generating 2 repeater) i got the 2 repeater showed . but the text box with the data still wouldnt appear

foo ming xiang Over a year ago

here here's what i get: seen from inspecting element. but the text box and text does not appear. <asp:textbox id="TextBox1" text="my name is rainbow, im 1 year old" visible="true" runat="server"></asp:textbox> how about the ID? for each repeater the textbox is using the same ID? any way to make it different?

jaywayco · Accepted Answer · 2011-07-26 07:04:09Z

0

You need to build up the control tree properly. For example you need to instantiate a TextBox (TextBox txt = new TextBox()) and add it to the Controls collection of another control. For this type of thing I would define an asp:Panel in markup and add my dynamic controls in the code behind

answered Jul 26, 2011 at 7:04

jaywayco

6,3666 gold badges27 silver badges40 bronze badges

1 Comment

foo ming xiang Over a year ago

yeah i have tried that but i just couldn't set the position of each text box on where i want it to be . and the number of text box depends on the number of data retrieved

Collectives™ on Stack Overflow

How To Create TextBox Control Dynamically at Runtime/ problems with .cs

5 Answers 5

2 Comments

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related