Repeater / GridView 資料綁定時動態決定行樣式與文字

一、Repeater / DataList：ItemDataBound 事件

1. 文字轉換（如性別 0/1 → 男/女）

方法 A：SQL 層面轉換

SELECT CASE sex WHEN 0 THEN '男' ELSE '女' END AS sex FROM StudentInfo

方法 B：ItemDataBound 事件處理

<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
    <ItemTemplate>
        <asp:Label ID="lblSex" runat="server" />
    </ItemTemplate>
</asp:Repeater>

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        DataRowView drv = (DataRowView)e.Item.DataItem;
        Label lbl = (Label)e.Item.FindControl("lblSex");
        lbl.Text = drv["sex"].ToString() == "0" ? "男" : "女";
    }
}

2. 依條件套用不同 CSS 樣式

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        DataRowView drv = (DataRowView)e.Item.DataItem;
        Label lbl = (Label)e.Item.FindControl("lblSex");
        if (drv["sex"].ToString() == "0")
        {
            lbl.CssClass = "style_male";
            lbl.ToolTip = "我是男生";
        }
        else
        {
            lbl.CssClass = "style_female";
            lbl.ToolTip = "我是女生";
        }
    }
}

DataList 直接設定整行樣式

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        DataRowView drv = (DataRowView)e.Item.DataItem;
        int styleCode = GetStyleCode(drv["ID"].ToString()); // 自訂邏輯
        string[] cssClasses = { "normal", "red", "purple", "yellow", "blue", "green" };
        if (styleCode >= 0 && styleCode < cssClasses.Length)
            e.Item.CssClass = cssClasses[styleCode];
    }
}

二、GridView：RowDataBound 事件

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DataRowView drv = (DataRowView)e.Row.DataItem;
        // 整行樣式
        e.Row.CssClass = drv["Status"].ToString() == "1" ? "highlight" : "";
        // 或針對特定控制項
        Label lbl = (Label)e.Row.FindControl("lblStatus");
        if (lbl != null) lbl.Text = drv["Status"].ToString() == "1" ? "啟用" : "停用";
    }
}

核心概念

• 事件觸發時機：每一行資料綁定到控制項後、渲染前。
• e.Item.DataItem / e.Row.DataItem 為當前行的資料來源（通常為 DataRowView）。
• 使用 FindControl 取得模板中的控制項實例進行操作。
• DataList/GridView 可直接設定 e.Item.CssClass / e.Row.CssClass 影響整行。