C#后台设置ListView单元格背景仅改文本周边，如何实现整格变色？

问题场景 #

使用C#后台代码的ListView控件，在ItemDataBound事件中判断JobsCovered值大于1000时，尝试设置单元格背景色，但实际仅改变了文本周围的小范围背景，而非整个单元格或目标区域。

现有代码 #

HTML模板代码 #

<ItemTemplate>
        <td runat="server" style="background-color:black;color: white;text-align:center;">
        <asp:Label ID="PartDescriptionLabel" runat="server" Text='<%# Eval("PartDescription") %>' />
        <br />
        <asp:Label ID="PartNumberLabel" runat="server" Text='<%# Eval("PartNumber") %>' />              
        <br />
        <div id="JobsCoveredBox" style="height:60px; line-height:60px">
        <asp:Label ID="JobsCoveredLabel" runat="server" Text='<%# Eval("JobsCovered") %>' />
        </div>
        </td>
</ItemTemplate>

后台C#代码 #

protected void RepackOSR_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    ListViewItem item = e.Item;
    Label JobsCoveredLabel;
    if (item.ItemType == ListViewItemType.DataItem)
    {
        JobsCoveredLabel = (Label)e.Item.FindControl("JobsCoveredLabel");
        System.Data.DataRowView rowView = e.Item.DataItem as System.Data.DataRowView;
        Int32 currentJobCovered = Convert.ToInt32(rowView["JobsCovered"].ToString());
        if (currentJobCovered > 1000)
        {
            JobsCoveredLabel.BackColor = Color.Green;
        }
    }
}

原因 #

当前代码修改的是JobsCoveredLabel这个Label控件的背景色，而Label仅包裹文本内容，因此只会改变文本周围的小区域背景。要实现更大范围的背景变色，需要修改对应容器控件（如td单元格或包含Label的div）的样式。

解决方案 #

方案1：修改整个td单元格的背景色 #

1. 给td控件添加ID，确保runat="server"保留：

<td ID="ItemTableCell" runat="server" style="background-color:black;color: white;text-align:center;">

2. 修改后台代码，找到该td控件并设置背景色：

protected void RepackOSR_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        System.Data.DataRowView rowView = e.Item.DataItem as System.Data.DataRowView;
        Int32 currentJobCovered = Convert.ToInt32(rowView["JobsCovered"].ToString());
        if (currentJobCovered > 1000)
        {
            HtmlTableCell cell = (HtmlTableCell)e.Item.FindControl("ItemTableCell");
            cell.BackColor = Color.Green;
            // 若需要保留文字颜色，可同步设置：cell.ForeColor = Color.White;
        }
    }
}

方案2：修改JobsCoveredBox区域的背景色 #

如果只需要修改包含JobsCoveredLabel的div区域背景：

1. 给div添加runat="server"和ID：

<div ID="JobsCoveredBox" runat="server" style="height:60px; line-height:60px">

2. 修改后台代码，找到该div控件并设置背景色：

protected void RepackOSR_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        System.Data.DataRowView rowView = e.Item.DataItem as System.Data.DataRowView;
        Int32 currentJobCovered = Convert.ToInt32(rowView["JobsCovered"].ToString());
        if (currentJobCovered > 1000)
        {
            HtmlGenericControl jobsBox = (HtmlGenericControl)e.Item.FindControl("JobsCoveredBox");
            jobsBox.Style["background-color"] = "green";
        }
    }
}

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