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

Question

我目前正在网站上动态生成 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);
}

我不确定如何从 .aspx.cs 访问我的 css 表。所以所有的元素在一个面板中一个接一个地被粉碎在一起。

问题 2： 我还根据项目的类别生成复选框，以便创建过滤器。我通过查询获取不同的类别并将它们填充到数据表中。我有所有的复选框，但我不知道如何为它们生成事件，因为它们是动态的，而且我只使用了硬编码的事件。代码类似：

foreach (DataRow tempRow in dt2.Rows)
{
  string tempCategory = tempRow[0].ToString();
  CheckBox cbCategory = new CheckBox();
  cbCategory.ID = "id_cbCategory_" + tempflag2;
  cbCategory.Text = tempCategory;
  divFilterCategory.Controls.Add(cbCategory);

  tempflag2++;
} 

问题3：有两个相邻的div，一个用于生成的过滤结果，另一个用于生成的item结果。正如我所提到的，它们目前都可以正常生成，但是由于某种原因，当项目生成时，它会在页面的中途拍摄第二个 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>

样式：

.divCenterItems
{
  border: 1px solid black;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.searchTable
{
  width: 100%;
  padding-left: 5px;
  padding-right: 5px;
}
.divSearchHeaders
{
  border: 1px solid black;
  background-image: url('../Resources/header.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 30px;
}
.headerLabels 
{
  color: white;
  font-size: 16px;
  line-height: 2em;
  padding-left: 10px;
}

我不确定这些样式中的任何一个是否会导致过滤器 div 像这样，但我一直在玩弄它们，但没有成功。对于这些类型的情况的技巧的任何提示将不胜感激，我是动态生成元素的新手。干杯！

Answer 1

问题 1：
考虑使用 Literal 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);

您还可以创建一个 ascx 用户控件，如果您想要面板内的更多功能，则动态加载该控件的实例。

问题 2 要将事件添加到动态创建的控件，请使用 += 运算符添加要在触发事件时调用的处理程序。例如，处理复选框的 CheckChanged 事件。请记住，对于动态控件，这些事件处理程序必须在每次回发时注册。

var checkbox1 = new CheckBox();
checkbox1.CheckedChanged += ClickedCheckBox;

private void ClickedCheckBox(object sender, EventArgs e)
{
    var checkbox1 = sender as CheckBox;
}

问题 3 您有 2 个 tds 彼此相邻。试试vertical-align:top 在他们两个上

<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>