How to clone WebControls depending on conditions on server side in ASP.NET C#?

I have the following aspx and cs

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="cardPrintingBarcode.aspx.cs" Inherits="Reports_cardPrintingBarcode" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>
            Impresión de Tarjeta
        </title>

        <style type="text/css">
            .style2
            {
                font-size: xx-small;
            }
        </style>
    </head>

    <body>
        <form id="form1" runat="server">
            <div id="Card">
                <table>
                    <tr>
                        <td width="85px" align="center" valign="bottom">
                            <image ID="imgBarcode" Width="85px" Height="20px" />
                            <br />

                            <label ID="lblCardcode" Font-Bold="True" Font-Names="Arial" Font-Size="5pt" >
                            </label>
                        </td>

                        <td width="30px" />

                        <td width="40px" align="center" valign="bottom">
                            <label ID="lblCN" Font-Bold="True" Font-Names="Arial" Font-Size="7pt">
                            </label>

                            <br />
                            <image ID="imgQR" Width="37px" Height="37px" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
</html>



using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using ClubCard.Core;

public partial class Reports_cardPrintingBarcode : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (ViewState["CHECKED_CARDS_ITEMS"] != null)
        {
            if (((List<int>)ViewState["CHECKED_CARDS_ITEMS"]).Count > 0)
            {
                LoadCards();
            }

            else
            {
                this.Response.Redirect("~/default.aspx");
                //GET ME OUT OF HERE
            }
        }
    }

    private void LoadCards()
    {
        List<int> lstIdCards = (List<int>)ViewState["CHECKED_CARDS_ITEMS"];

        foreach (int intIdCard in lstIdCards)
        {
            //Process Where I Want To Assign Data To 2 Labels and 2 images
            ClubCard.Core.Card card = new ClubCard.Core.Card(intIdCard);
            ClubCard.Core.Client client = new ClubCard.Core.Client(card.idClient);
            Byte[] bcQR = QR.GetQRByteArray(card.cardCode);
            string strBase64 = Convert.ToBase64String(bcQR, 0, bcQR.Length);

            //lblCN.Text = client.number;
            //lblCardCode.Text = card.number;
            //imgBarcode.ImageUrl = "SOME URL";
            //imgQR.ImageUrl = "SOME URL";

            //PROBABLY HERE'S WHERE I HAVE TO CREATE ALL WEBCONTROLS...
            //THEN WHEN THE FOREACH STARTS AGAIN, CREATE ANOTHER ONE...
        }
    }
}

The point here is to create the table seen in the aspx as many times as the (List)ViewState["CHECKED_CARDS_ITEMS"]).Count.

For instance... if (List)ViewState["CHECKED_CARDS_ITEMS"]).Count = 5, then I want to see the table and all of it's content 5 times (obviously, each will be different because server side I'm assigning different data to each, thus, the use of the foreach)

How can I clone those WebControls? I've heard that I must not use runat="server" on those controls (however I'm not sure if in this example will work), some other sources claim that it should be inside a div, and clone the div.

Solution

You probably needs a ListControl e.g. <asp:DataList />, <asp:GridView etc.

Create a list of your cards

List<ClubCard.Core.Card> cards = new List<ClubCard.Core.Card>();
//cards.Add(...some cards...);
//cards.Add(...some cards...);
//cards.Add(...some cards...);

Bind your list to a ListControl

cardListControl.DataSource = cards;
cardListControl.DataBind();

Implementing this with a DataList:

<asp:DataList runat="server" ID="cardListControl">
<ItemTemplate>
    <!-- Layout to display card here -->
    <img src='<%# Eval("CardImageUrl")>' />
    <span><%# Eval("CardName") %></span>
    <!-- other card information -->
</ItemTemplate>
</asp:DataList>

DataList has a RepeatDirection property that let you display your cards Horizontally or Vertically