Literal Control with an asp button

Question

I'm creating an e-commerce website with ASP .NET and I dynamically add products to the shopping page from the database using a literal control like so:

foreach (DataRow dr in dt.Rows)
{
    string productName = dr["PRO_Name"].ToString();
    string productPrice = dr["PRO_Price"].ToString();
    string myUrl = "Handler.ashx?ProdID=" + dr["PRO_ID"].ToString();

        string sProduct = @"<div class='four-shop columns isotope-item'><div class='shop-item'><figure><img src='" + myUrl + "'/><figcaption class='item-description'><h5>" + productName + "</h5><span>R" + productPrice + "</span></figcaption></figure></div></div>";
        productPanel.Controls.Add(new LiteralControl(sProduct));
}

I would like to know how I can add a button with a click event that is in my literal control. I have created this button but can't add it to the literal control as literal controls only display markup and not server side controls. How can I go about adding this button dynamically with each product added to the shopping page from the database.

Button button = new Button();
button.Text = "Add to cart";
button.Click += button_Click;

Answer 1

Try this approach.

Table tb = new Table();

for (int i = 1; i <= 10; i++)
        {
            TableRow tr = new TableRow();
            TableCell td = new TableCell();
            Button bt = new Button();
            bt.ID = i.ToString();
            bt.Text = "Button " + i.ToString();
            bt.Click += new EventHandler(btn_Click);
            td.Controls.Add(bt);
            tr.Controls.Add(td);
            tb.Controls.Add(tr);
        }

dvTest.Controls.Add(tb);

Answer 2

Instead of using literal control. You can directly add that in page control and If you still keen about using container control then use panel control.

Regards,

Answer 3

Might I suggest, building a usercontrol for your product(s). Build a control, that has for example: An Image control, a label control for your description, labels for price etc, and a button for add to cart, or the like.

This way you can dynamically create the controls for each product being displayed, have code in your add button, and set product properties like image, description etc, from code, for each product.

The usercontrols will render as normal HTML on the page, but it allows you a "control" / object to work with in code, for each product.

Answer 4

Rather than doing anything dynamic like this, why not use a Repeater. This will save you from a lot of headache:

<asp:Repeater id="repeat" runat="server">
 <ItemTemplate>
       <div class='four-shop columns isotope-item'><div class='shop-item'><figure><img src='<%#string.Format("Handler.ashx?ProdID={0}",Eval("PRO_ID")) %>'/><figcaption class='item-description'><h5><%#Eval("PRO_Name")%> </h5><span><%#Eval("PRO_Name")%> </span></figcaption></figure></div></div>      
       <asp:button id="btnAdd" runat="server" Text="Add to Cart" OnClick="btnAdd_Click" />
 </ItemTemplate>
</asp:Repeater>

And on code behind, you define the handler for the button click:

protected void btnAdd_Click(object sender, EventArgs e)
{
     //handle add for the product here
}

Answer 5

Use it like this

Button button = new Button();
button.Text = "Add to cart";
button.Click += button_Click;
productPanel.Controls.Add(button );

after adding the literal control. If you want it somewhere in between the LiteralControl (ie sProduct) you must split it into two.

Like this,

string sProduct = @"<div class='four-shop columns isotope-item'><div class='shop-item'><figure><img src='" + myUrl + "'/><figcaption class='item-description'><h5>" + productName + "</h5><span>R" + productPrice + "</span></figcaption></figure>";
        productPanel.Controls.Add(new LiteralControl(sProduct));
    Button button = new Button();
    button.Text = "Add to cart";
    button.Click += button_Click;
    productPanel.Controls.Add(button );
    productPanel.Controls.Add(new LiteralControl("</div></div>"));

However, using LiteralControl like this is not recommended. You could use HtmlGenericControl in this scenario.