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

Answer 1

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

1. 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); 

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

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

Answer 2

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

Answer 3

您应该使用Repeater控件或其他一些数据Repeater控件来构建此类布局。

Answer 4

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.

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

Answer 5

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