add controls to innerhtml div inside table

Question

Inside a div I'm trying to add a table from codebehind. I need to add 2 controls to this table so in order to do this I put the code in the Page_Init() but it won't add the controls so what should I do to resolve this or should I go a completely different way.

my code:

if ((List<ShoppingCart>)Session["shoppin"] != null)
        {
            string cartcontent = "";
            TextBox txtbox = new TextBox();
            txtbox.TextChanged +=new EventHandler(txtbox_TextChanged);
            txtbox.CssClass = "carttextbox";
            Button btn = new Button();
            btn.Click +=new EventHandler(btn_Click);
            btn.Text = "Remove";
            btn.CssClass = "cartbtn";
            maincontent.Controls.Add(txtbox);
            maincontent.Controls.Add(btn);

            foreach (ShoppingCart r in (List<ShoppingCart>)Session["shoppin"])
            {
                cartcontent = cartcontent + "<tr class='row'>" +
                    "<td class='cart_prods'>" +
                    "<table>" +
                    "<tr>" +
                    "<td colspan='2'><b>" + r.ProductName + "</b></td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td align='center' style='width:100%'> <img src='" + r.ProductImage + "' alt='' style='max-height:150px' /></td>" +
                    "<td><div class='.cart_products_options'><i>" + r.ProductOptions + "</i></div></td>" +
                    "</tr>" +
                    "</table>" +
                    "</td>" +
                    "<td class='cart_update' style='border-width: 0px 1px 1px 0px;'>" + txtbox + btn + "</td>" + 
                    "<td class='cart_price' style='border-width: 0px 0px 1px;'><span class='ProductSpecialPrice'> $"+ r.ProductPrice + "</span></td>"
                    +"</tr>";
                double pricetotal = 0;
                pricetotal = pricetotal + r.ProductPrice;
            }

            maincontent.InnerHtml = "<table width='90%' style='margin:0 auto; margin-top:50px;' class='cart'>" +
                "<tr align='center'>" +
                    "<th class='th1'><b>Product(s)</b></th>" +
                    "<th><b>Qty</b></th>" +
                    "<th class='th3'><b>Total</b></th>" +
                "</tr>" + cartcontent +
                "<tr class='cart_total'>" +
                    "<td></td>" +
                    "<td style='border-width: 1px 1px 0px 0px; text-align:right;'>Sub-Total</td>" +
                    "<td></td>" +
                "</tr>" +
            "</table>";
        }

Answer 1

The following approach should be simpler and also avoids adding controls dynamically:

• Create a Repeater on the page.
• Set the HeaderTemplate and FooterTemplate so that it contains the opening table-tag (or closing-tag in case of the footer) and the the markup for the header and footer of your table.
• Set the ItemTemplate so that it matches the markup you build in the cartcontent string. Add the controls that contain the data of the shopping cart to the ItemTemplate and set the text by using data binding.
• Bind the Repeater to the List<ShoppingCart> if there are entries, otherwise set Visible to false.

For details on the Repeater control see this link. It also contains links to various tutorials.

UPDATE:
In order to set a value in a row dynamically without using DataBinding, e.g. for setting a total in the footer, do the following:

• Add a label to the footer, assign it an ID and set runat="server".
• Add a handler to the ItemDataBound event of the Repeater.
• In the handler, check the type of item that is bound. If it is the footer, find the Label control and assign the value to it.

---

private void Rpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Footer)
    {
        var lbl = (Label)e.Item.FindControl("LabelId");
        if (lbl != null)
            lbl.Text = "123.45";
    }
}