How to dynamically create controls in asp.net aspx file

In WebForms, you can make use of listing controls that have a concept of a DataSource (Some listing of objects) and a template which renders how each of those objects appear. In general, you should use these whenever you have a list of items that you want to render on the site.

In this particular case, you will probably want to make use of the ListView control. This allows you to define a layout template and an item template.

Your aspx markup would look like the following:

<asp:ListView ID="lvCpus" OnItemDataBound="lvCpus_ItemDataBound" runat="server">
    <LayoutTemplate>
        <div class="row product cpu">
            <div runat="server" id="itemPlaceholder"></div>
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div runat="server" class="col-md-3">
            <img class="center-block" src="Content/images/processor.jpg" />
            <span class="price"><%# Eval("Price") %></span>
            <span class="addtocart">
                <asp:Button ID="addToCart" Text="Add To Cart" runat="server" />
            </span>
        </div>
    </ItemTemplate>
</asp:ListView>

This defines a ListView control and creates a LayoutTemplate that matches your container. Internally it has a div that must have the id itemPlaceholder which is used to populate the various items that are bound to this control.

The ItemTemplate portion defines what you expect each individual item to look like. In this case, it's a column that contains a CPU for purchase.

Notice that the button is defined as a regular ASP Web Control, but none of the dynamic data is set. That's because if you try to assign a property like CommandArgument with an evaluated item, the server tag will not be well-formed and you'll get the YSOD. To work around this, you need to specify an OnItemDataBound function for the ListView that is called when you bind data to this Web Control. In my case, it's called lvCpus_ItemDataBound.

The ItemDataBound method in this case will look like the following:

protected void lvCpus_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        var cpu = e.Item.DataItem as Cpu;

        if (cpu == null)
        {
            return;
        }

        var btn = e.Item.FindControl("addToCart") as Button;

        if (btn == null)
        {
            return;
        }

        btn.CommandArgument = cpu.Id.ToString();
        // Set other server-side properties required from code.
    }
}

When you bind a data source, it has 0 or more items in it. For every item in the data source, this method is called and will let you specify server-side appropriate values that can't be expressed directly in the template.

In our case, we specify the CommandArgument from the Cpu class, but other values could be specified as well.

Finally, we need to make sure we can fill the list view with data. So in Page_Load perhaps, we can bind data to this ListView like the following:

protected void Page_Load(object sender, EventArgs e)
{
    lvCpus.DataSource = GetCpus();
    lvCpus.DataBind();
}

private IEnumerable<Cpu> GetCpus()
{
    yield return new Cpu { Id = 1, Price = 5 };
    yield return new Cpu { Id = 2, Price = 10 };
    yield return new Cpu { Id = 3, Price = 15 };
    yield return new Cpu { Id = 4, Price = 15 };
    yield return new Cpu { Id = 5, Price = 20 };
}

We first set the List View's data source to the CPU list that you have and then call the DataBind() method on the ListView. This triggers the OnItemDataBound function to begin filling in the data, and at the end you are left with, in this case, 5 CPUs displayed on the site.