Unable to see only some of my control when programmatically add to a div

Question

So I am kinda stuck on trying to add multiple copies of my own usercontrol to the page according to DB data.

My user control can be shown if I add it directly into the aspx file, but just not when i try to add it programmatically in a loop on page load. I've also tried to add other simple control such as LiteralControl in the loop and they can be shown on the page without problem.

I have also tried to add width/height to the div, changing the div to asp:Panel and asp:PlaceHolder but none of it work. I've also double checked during the loop the controls are created and added with visible=true. Anyone spot newbie mistakes?

My very simple usercontrol:

public partial class VenueItemControl : System.Web.UI.UserControl
{
    public string Name;
    public string Desc;
    public string Address;
    public string Price;

    /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Load(object sender, EventArgs e)
    {
    }
}

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VenueItemControl.ascx.cs" Inherits="WatchBar.Controls.VenueItemControl" %>
<div class="card">
    <div class="card-block">
        <div class="thumbmails">
            <div class="current-img">

            </div>
            <div class="thumbnail-list">

            </div>
        </div>
        <div class="">
            <label class="row" style="font-size:20pt"><%=Name%></label><br />
            <label class="row" style="font-size:12pt"><%=Address%></label>
            <div class="row">
                <textarea class="col-md-3" rows="5" cols="50" style="vertical-align: top;"><%=Desc%></textarea>
                <div class="col-md-1" style="display: inline-block;">
                    <label>Mimimum charge: <%=Price%></label><br />
                    <button class="btn btn-sm btn-seconday"><i class="fa fa-plus"></i>Share</button>
                </div>
            </div> 
        </div>
    </div>
</div>

MY main page:

    protected void Page_Load(object sender, EventArgs e)
    {
        List<venue> venues = xxxxx;

            foreach (var v in venues)
            {
                VenueItemControl item = new VenueItemControl()
                {
                    Name = v.name,
                    Desc = v.desc,
                    Address = v.address,
                    Price = "999"
                };

                itemHolder.Controls.Add(item);
                itemHolder.Controls.Add(new System.Web.UI.LiteralControl("<b>test</b><br/>"));
            }
    }


<%@ Page Title="" Language="C#" MasterPageFile="~/MainSite.Master" AutoEventWireup="true" CodeBehind="Search.aspx.cs" Inherits="xxx.Search" %>
<%@ Register TagPrefix="uc" TagName="VenueItem" Src="Controls\VenueItemControl.ascx" %>
<%@ Reference Control="Controls/VenueItemControl.ascx"%>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div ID="itemHolder" runat="server" style="width:500px; height:800px"> 

    </div>
    <asp:Panel id="itemHolder2" runat="server">
        <uc:VenueItem Name="1" Desc="2" Address="sd" Price="2" runat="server"/>
    </asp:Panel>
</asp:Content>

Answer 1

I don't know where you learned to add UserControls like that. But that is not how you add them. You need to specify the path also with LoadControl.

var venueItemControl = (VenueItemControl)LoadControl("~/VenueItemControl.ascx");
venueItemControl.Name = "Name";
venueItemControl.Desc = "Description";
itemHolder.Controls.Add(venueItemControl);