Add custom li to ul with C#

Question

I am trying to build unordered list from C# backend. This is the structure I am trying to achieve:

 <li><a href="url.com"><img src="../images/most/most05.jpg" alt="" /><br />LinkName</a></li>

Using this code:

foreach (Product prod in productList)
                {
                    HtmlGenericControl li = new HtmlGenericControl("li");
                    products.Controls.Add(li);
                    string productURL = SEOHelper.GetProductUrl(prod);
                    HtmlGenericControl anchor = new HtmlGenericControl("a");
                anchor.Attributes.Add("href", productURL);
                    HtmlGenericControl image = new HtmlGenericControl("img");


                    var productPicture = prod.DefaultProductPicture;
                    if (productPicture != null)
                    {

                        image.Attributes.Add("src", PictureManager.GetPictureUrl(productPicture.Picture, 110, true));
                    }
                    else
                    {

                        image.Attributes.Add("src", PictureManager.GetPictureUrl(productPicture.Picture, 110, true));
                    }

                  anchor.InnerText = prod.Name;                    
                    li.Controls.Add(image);
                    li.Controls.Add(anchor);
                }  

I am getting this structure:

 <li><img src="http://localhost:22621/images/thumbs/0000724_110.jpg"></img><a href="url.com">LinkName</a></li>

How can I tweak the code to achieve what I want exactly?

Answer 1

Instead of adding the image to the LI you'll need to add it to the anchor.

Also, the only way to get the HtmlGenericControl to emit a self closing tag is to override it's implementation and fix it.

All in all I'd say either generate the text the way you want it and emit that or look into the regular .net controls for those items.