如何修改DataList的ItemTemplate内asp:Panel的CSS类 后台无法调用ID怎么办

问题核心原因 #

ItemTemplate 内的控件是随 DataList 每一条数据项独立重复生成的，属于对应DataListItem的子控件，不属于页面根级控件，所以直接调用this.FindControl必然找不到对应实例。

实现步骤 #

1. 修改前端DataList配置 #

首先给DataList绑定ItemDataBound事件（该事件会在每一行数据绑定完成时触发，刚好可以处理当前行的样式逻辑），同时修正你原有代码里panel1的class属性缺失闭合引号的问题：

<asp:DataList ID="DataList1" runat="server" DataSourceID="approvalStatus" OnItemDataBound="DataList1_ItemDataBound">
    <ItemTemplate>
        <asp:Panel ID="panel1" runat="server" CssClass="CHANGE_ON_Page_Load">
            CCB Owners:
            <asp:Label ID="lbl1" runat="server" Text='<%# Eval("Column1") %>' /><br />
            Comment:
            <asp:Label ID="lbl2" runat="server" Text='<%# Eval("Column1") %>' />
        </asp:Panel>
        <asp:Panel ID="panel2" runat="server" CssClass="CHANGE_ON_Page_Load">
            Application Development:
            <asp:Label ID="lbl3" runat="server" Text='<%# Eval("Column2") %>' /><br />
            Comment:
            <asp:Label ID="lbl4" runat="server" Text='<%# Eval("Column2") %>' />
        </asp:Panel>
    </ItemTemplate>
</asp:DataList>

注：ASP.NET 服务端控件推荐使用CssClass属性代替原生class属性，避免渲染异常

2. 后台编写ItemDataBound事件逻辑 #

删除你原来自己写的Reader循环修改样式的代码，换成下面的事件处理逻辑：

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
    // 仅处理数据行，跳过页眉、页脚、分隔符等行
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // 1. 获取当前行绑定的数据
        DataRowView row = (DataRowView)e.Item.DataItem;
        string check1 = row["Column1"].ToString().Trim();
        string check2 = row["Column2"].ToString().Trim();

        // 2. 查找当前行内的panel1，设置样式
        Panel panel1 = e.Item.FindControl("panel1") as Panel;
        if (panel1 != null)
        {
            if (check1 == "Not Checked")
            {
                panel1.CssClass = "waitingCell";
            }
            else if (check1 == "Approved" || check1 == "Approved With Comments")
            {
                panel1.CssClass = "approvalCell";
            }
            else if (check1 == "Rejected" || check1 == "More Information/Meeting Required")
            {
                panel1.CssClass = "notapproved";
            }
        }

        // 3. 如果需要修改panel2的样式，同理处理即可
        Panel panel2 = e.Item.FindControl("panel2") as Panel;
        if (panel2 != null)
        {
            // 这里补充你对panel2的样式判断逻辑即可
        }
    }
}

原有代码的错误点说明 #

• 没有在正确的上下文查找控件：必须在对应DataListItem对象上调用FindControl才能找到当前行内的模板控件
• 样式属性使用错误：ASP.NET 服务端Panel控件设置样式的属性是CssClass不是Class
• 前端属性语法错误：原有panel1的class属性缺少闭合引号，会导致渲染异常

内容的提问来源于stack exchange，提问作者NeoAer