c# - セル値に基づいた色で Asp.net GridView セルをスタイルする方法

Question

があります。Gridviewという列がありますstudent_Class。グリッド ビューには約 80 のクラスがあります。GroupBy クエリを使用してこのクラスをグループ化しました。

ここで、この別のクラスを別の色でスタイルしたいと思います。それはどのように可能ですか？
すべてのクラスを書き込んでRowDataBound色を付けるのは簡単ではありません。

他に方法はありますか？

コード：

groups = (ArrayList)Session["selectedclass"];
SELECT id,name,student_Class FROM student where 
         student_Class='"+groups[0].ToString().Trim()+"'  
         group by  student_Class.

データを次のように与えます

 id   name   student_class
 1    aa      A
 2    bb      A
 3    cc      A
 4    dd      B
 5    ee      B
 6    as      B
 7    ss      B
 8    AZZ     D

値を持つ学生クラスに Aは同じ色（セル用）Bが必要で、他の色が必要など.

Answer 1

ASPX:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="id" DataSourceID="SqlDataSource1" 
    ondatabound="GridView1_DataBound" onrowdatabound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" 
            SortExpression="id" />
        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
        <asp:BoundField DataField="student_class" HeaderText="student_class" 
            SortExpression="student_class" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:SiteConnectionString %>" 
    SelectCommand="SELECT * FROM [student]">
 </asp:SqlDataSource>

コードビハインド:

static string[,] ClassNames =
{
   {"A","Red"},
   {"B","Blue"},
   {"C","Pink"},
   {"D","Green"},
   // and so on
};
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    string className = e.Row.Cells[2].Text;
    string color = "Black";
    for (int i = 0; i <= ClassNames.GetUpperBound(0); i++)
    {
        if (ClassNames[i, 0] == className)
        {
            color = ClassNames[i, 1];
            e.Row.Cells[2].ForeColor = Color.FromName(color);
            e.Row.Cells[2].BorderColor = Color.Black;
            break;
        }
    }
}

Answer 2

値に依存するだけのスタイルにしたい場合は、Jquery または javaScript を使用して、クライアント側で行うことをお勧めします。また、 RowDataBound
で行うのではなく、クライアント側で行うため、パフォーマンスに影響しません。

コード: クライアント側の使用- (これはもっとお勧めします)
ここでは、クラスの値に応じて多くの条件を設定できます。余分なサーバー側のコードを記述する必要はありません。

$(document).ready(function () {
        $(".myGvClass").find("td").each(function () {
            if ($(this).text() == "Class B") {
                $(this).css("color", "Red");
            }
            
            if ($(this).text() == "Class A") {
                $(this).css("color", "Blue");
            }
          
            if ($(this).text() == "Class C") {
                $(this).css("color", "green");
            }
          //  ..... and so on
    });



 

HTML マークアップ:

 <asp:GridView ID="GridView1" runat="server" CssClass="myGvClass">
 </asp:GridView>

分離コード:

 GridView1.DataSource = YourDataTable;
 GridView1.DataBind();

スクリーンショット:

---

---

コード: サーバー側を使用
して、イベントで Gridview 行をループしmyGridview_DataBound、条件セルの値を確認して、それぞれの色を設定します。

protected void myGridview_DataBound(object sender, EventArgs e)
{
    for (int i = 0; i <= myGridview.Rows.Count - 1; i++)
    {
        string myClassVal = myGridview.Rows[i].Cells[2].Text;
        if (myClassVal == "Class A")
        {
            myGridview.Rows[i].Cells[2].BackColor = Color.Green;
         }
        else if (myClassVal == "Class B")
        {
            myGridview.Rows[i].Cells[2].BackColor = Color.Red;
        }
        else 
        {
           myGridview.Rows[i].Cells[2].BackColor = Color.Orange;
        }
    }
}

HTML :

<asp:GridView ID="myGridview" runat="server" ondatabound="myGridview_DataBound">
</asp:GridView>

コードビハインド:

myGridview.DataSource = YourDataTable;
myGridview.DataBind(); 

スクリーンショット:

Answer 3

猫の皮を剥ぐ方法はたくさんありますが、本当に RowDataBound を使用したくない場合は、ItemTemplate にスタイル設定されたコントロールを含む TemplateColumn を使用できます。例えば

<asp:GridView ...>
  ...
  <Columns>
     ...
     <asp:TemplateField ...>
         <ItemTemplate>
            <asp:Panel ... CssClass='<%# GetStudentCssClass(Eval("student_Class")) %>'>
            ...
            </asp:Panel>
         </ItemTemplate>
         ...