ASP.NET C#动态元素样式和事件

我目前正在网站上动态生成ASP元素。该站点根据品牌/型号/年份显示特定摩托车的项目

问题1:我在页面上正确显示了所有项目，但我不知道如何将CSS样式应用于动态生成的项目

以下是我的情况，它首先将项目查询到数据表中：

try
{
  int tempflag = 0;
  foreach (DataRow tempRow in dt.Rows)
  {
    string tempCategory = tempRow[4].ToString();
    string tempPartUrl = tempRow[5].ToString();
    string tempImageUrl = tempRow[6].ToString();
    string tempPartBrand = tempRow[7].ToString();
    string tempPartName = tempRow[8].ToString();
    string tempPrice = tempRow[9].ToString();
    string tempStoreName = tempRow[10].ToString();

    //panel to hold an item
    Panel pnlItem = new Panel();
    pnlItem.ID = "id_pnItem_" + tempflag;
    pnlItem.CssClass = "itemDiv";
    divSearchResultsBody.Controls.Add(pnlItem);

    //image
    Image tpImg = new Image();
    tpImg.ID = "id_tpImg_" + tempflag;
    tpImg.ImageUrl = tempImageUrl;
    pnlItem.Controls.Add(tpImg);

    Label lblBR = new Label();
    lblBR.ID = "frt" + tempflag;
    lblBR.Text = "<br />";
    pnlItem.Controls.Add(lblBR);

    //brand
    Label lblBrand = new Label();
    lblBrand.ID = "id_lblBrand_" + tempflag;
    lblBrand.Text = tempPartBrand;
    pnlItem.Controls.Add(lblBrand);

    //name
    Label lblName = new Label();
    lblName.ID = "id_lblName_" + tempflag;
    lblName.Text = tempPartName;
    pnlItem.Controls.Add(lblName);

    //price
    Label lblPrice = new Label();
    lblPrice.ID = "id_lblPrice_" + tempflag;
    lblPrice.Text = tempPrice;
    pnlItem.Controls.Add(lblPrice);

    //url
    HyperLink hyp = new HyperLink();
    hyp.ID = "id_link_" + tempflag;
    hyp.NavigateUrl = tempPartUrl;
    hyp.Text = "View Part";
    pnlItem.Controls.Add(hyp);
    tempflag++;              
  }
}
catch (Exception ex)
{
  handleTheError(ex);
}

第3期：有两个相邻的div，一个用于生成的筛选结果，另一个用于生成的项目结果。正如我所提到的，它们此时都正确地生成，但由于某种原因，当项目生成时，它会将第二个div放在页面的一半位置。图片：搜索前，搜索后，过滤页面的一半

这就是最初的设计

<div runat="server" id="divSearch" class="divCenterItems">
    <table class="searchTable">
        <tr style="width: 100%">
            <td style="width: 29%">
                <div runat="server" id="divSearchFiltersHeader" class="divSearchHeaders">
                    <asp:Label runat="server" ID="lblFilterResults" Text="Filter Results" CssClass="headerLabels"></asp:Label>
                </div>
                <div runat="server" id="divSearchFiltersBody">
                    <div runat="server" id="divFilterCategory"></div>
                    <div runat="server" id="divFilterBrand"></div>
                    <div runat="server" id="divFilterPrice"></div>
                </div>
            </td>
            <td style="width: 69%">
                <div runat="server" id="divSearchResultsHeader" class="divSearchHeaders">
                    <asp:Label runat="server" ID="lblSearchTitle" Text="Search Results Title" CssClass="headerLabels"></asp:Label>
                </div>
                <div runat="server" id="divSearchResultsBody">
                    <div runat="server" id="divItemsMSS"></div>
                    <div runat="server" id="divItemsRMATVMC"></div>
                    <div runat="server" id="divItemsDK"></div>
                </div>
            </td>
        </tr>
    </table>
</div>

我不确定这些风格是否会导致filter div出现这样的行为，但我一直在使用它们，但没有成功。对于这类情况的任何技巧都将不胜感激，我对动态生成元素还不熟悉。干杯

第1期：
考虑使用Web控件，并将HTML元素放入您想要的类中的文本中。

        var ltl = new Literal();
        ltl.ID = "id_ltlName_" + tempFlag;
        ltl.Text = $"<div class='class1'>{tempRow[1]}></div><div>{tempRow[2]}";
        pnlItem.Controls.Add(ltl);

第三期 两个tds相邻。尝试垂直对齐：两个顶部对齐

<div runat="server" id="divSearch" class="divCenterItems">
    <table class="searchTable">
        <tr style="width: 100%">
            <td style="vertical-align:top;width: 29%;">
            </td>
            <td style="vertical-align:top;width: 69%">
            </td>
        </tr>
    </table>
</div>

第1期：
考虑使用Web控件，并将HTML元素放入您想要的类中的文本中。

        var ltl = new Literal();
        ltl.ID = "id_ltlName_" + tempFlag;
        ltl.Text = $"<div class='class1'>{tempRow[1]}></div><div>{tempRow[2]}";
        pnlItem.Controls.Add(ltl);

第三期 两个tds相邻。尝试垂直对齐：两个顶部对齐

<div runat="server" id="divSearch" class="divCenterItems">
    <table class="searchTable">
        <tr style="width: 100%">
            <td style="vertical-align:top;width: 29%;">
            </td>
            <td style="vertical-align:top;width: 69%">
            </td>
        </tr>
    </table>
</div>

对于第1期，我尝试使用文字，并将它们全部添加到代码中的页面中，但它们实际上没有显示在页面上，这很奇怪。我可以复制和粘贴它生成的代码，它工作得很好，但在自动生成过程中它无法工作。我尝试了Server.HtmlDecode，然后通过它添加了它们，但它对我没有任何帮助。对于问题2，我尝试了您建议的方法，但当我逐步使用它时，它似乎从未击中ClickedCheckBox（）。对于第3期，它工作得非常好！谢谢！对于问题1，我尝试使用文字，它将它们全部添加到代码中的页面中，但它们实际上没有显示在页面上，这很奇怪。我可以复制和粘贴它生成的代码，它工作得很好，但在自动生成过程中它无法工作。我尝试了Server.HtmlDecode，然后通过它添加了它们，但它对我没有任何帮助。对于问题2，我尝试了您建议的方法，但当我逐步使用它时，它似乎从未击中ClickedCheckBox（）。对于第3期，它工作得非常好！谢谢！

<div runat="server" id="divSearch" class="divCenterItems">
    <table class="searchTable">
        <tr style="width: 100%">
            <td style="vertical-align:top;width: 29%;">
            </td>
            <td style="vertical-align:top;width: 69%">
            </td>
        </tr>
    </table>
</div>