Question

why can images not be appended to a div in asp?

divHtml.append(img);

why do I have to use div.controls.add(img);?

and why cant I add a string to controls.add say like this

div.controls.add(img + String.Format("{0}", reader.GetString(0));

?
Orginally “In the beginning”

I had this code:

    cn.Open();
    using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + theUserId + " ORDER BY idWallPosting DESC", cn))

    using (OdbcDataReader reader = cmd.ExecuteReader())
    {
        var divHtml = new System.Text.StringBuilder();
        while (reader.Read())
        {
            divHtml.Append("<div id=test>");
            divHtml.Append(String.Format("{0}", reader.GetString(0)));
            divHtml.Append("</div>");
        }


        test1.InnerHtml = divHtml.ToString();

    }
}

}

Which gave me this out put (notice the css is applied and all spacing etc is nice and neat:

Then I did this code:

            while (reader.Read())
            {
                System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                //div.ID = "test";
                div.Style["float"] = "left";
                Image img = new Image();
                img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
                img.AlternateText = "Test image";
                div.Controls.Add(img);
                test1.Controls.Add(div);

                System.Web.UI.HtmlControls.HtmlGenericControl div1 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                //div1.ID = "test";
                div1.InnerText = String.Format("{0}", reader.GetString(0));

                div1.Style["float"] = "left";
                test1.Controls.Add(div1);

                System.Web.UI.HtmlControls.HtmlGenericControl div2 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                //div2.ID = "test";
                div2.Style["clear"] = "both";
                test1.Controls.Add(div2);
            }
        }
    }
}

}

And this was my result which is ok but if you notice carefully there is no css between each comment the divs are outside the realm of my css I tryed applying the commented out lines to see if it would work but its just abit funky tbh. Specialy when you look at it in firebug:

This is what happens if I try parse the control using the method mentioned below:

    cn.Open();
    using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn))
    {
        using (OdbcDataReader reader = cmd.ExecuteReader())
        {
            test1.Controls.Clear();

            while (reader.Read())
            {
                System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");

                div.ID = "test";
                div.Style["float"] = "left";
                Image img = new Image();
                img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
                img.AlternateText = "Test image";

                div.Controls.Add(img);
                div.Controls.Add(ParseControl(String.Format("{0}", reader.GetString(0))); 

                test1.Controls.Add(div);

Edit:

        using (OdbcDataReader reader = cmd.ExecuteReader())
        {
            test1.Controls.Clear();

            while (reader.Read())
            {
        System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
        div.Attributes["class"] = "test";
        div.Style["float"] = "left";

        div.ID = "test";
        //div.Style["float"] = "left";
        Image img = new Image();
        img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
        img.AlternateText = "Test image";

        div.Controls.Add(img);
        div.Controls.Add(ParseControl(String.Format("{0}", reader.GetString(0)))); 

        test1.Controls.Add(div);

Shadow managed to get this to work and I used the parse from the other comment aswell.

But problem remains now with test1 div not expanding with test divs:

        <asp:Button ID="Button1" runat="server" Text="Post Message" Width="98px" 
            onclick="Button1_Click" />
        </p>
    <p>
    </p>
        <div id="test1" runat="server" />
//could be this line
    </asp:Content>

Or it could be

test1.Controls.Add(div); 

in my code thats not being picked up or in the correct brackets maybe?
css:

div#test1 
{

}
div .test
{
  width:90%; 
  z-index:1; 
  padding:27.5px; 
  border-top: thin solid #736F6E;
  border-bottom: thin solid #736F6E;
  color:#ffffff;
  margin:0 auto;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

Answer 1

You want to add image plus literal text coming from database.

The proper way is indeed adding controls – Image control like you already have and for the text use Literal server control:

div.Controls.Add(img);
div.Controls.Add(new LiteralControl(reader.GetString(0)));

Edit: if you insist on getting the HTML string of the image control for your own reasons, it’s possible using such code:

StringBuilder html = new StringBuilder();
using (StringWriter stringWriter = new StringWriter(html))
{
    using (HtmlTextWriter textWriter = new HtmlTextWriter(stringWriter))
    {
        image.RenderControl(textWriter);
    }
}

This will render the image into html variable, then you can assign the string value to the Text of some other control like you originally did. For example:

myLabel.Text = html.ToString();

Edit II: to apply CSS to the controls you’re adding, first change the CSS itself from this: div#test to this instead: div .test

Now add this single line to your code:

System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
div.Attributes["class"] = "test";
div.Style["float"] = "left";
...

This will apply class to each top level div and this can be used to apply the proper CSS.