使用SQL和Asp.net Gridview的漸變網格視圖

Question

我試圖在asp.net中做一個漸變顏色，下面是我的代碼。 當我在谷歌瀏覽器中調試時，得到的結果是：background：linear-gradient（red，'Color [A = 255，R = 230，G = 255，B = 0]';

我基本上是在嘗試從我的數據庫中提取用戶定義的顏色時獲得漸變樣式的網格視圖。 我該如何完成？

 SqlDataAdapter grid13 = new SqlDataAdapter("SELECT [User],Colors, [TempID] 
 FROM dbo.[Colors]", con13);
    DataTable tools13 = new DataTable();
    grid13.Fill(tools13);
    DataTable alltools13 = new DataTable();


    foreach (DataRow row in tools13.Rows)
    {
        foreach (var item in row.ItemArray)
        {
            if (e.Row.Cells[1].Text == (row["User"].ToString()))
            {
                e.Row.Cells[0].BackColor = 
 System.Drawing.ColorTranslator.FromHtml(row["Colors"].ToString());
                e.Row.Cells[1].BackColor = 
 System.Drawing.ColorTranslator.FromHtml(row["Colors"].ToString());
                e.Row.Cells[2].BackColor = 
 System.Drawing.ColorTranslator.FromHtml(row["Colors"].ToString());
                e.Row.Cells[3].BackColor = 
 System.Drawing.ColorTranslator.FromHtml(row["Colors"].ToString());
               e.Row.Cells[1].Attributes.Add("style", "background: linear-
 gradient(red, 
 '"+System.Drawing.ColorTranslator.FromHtml(row["Colors"].ToString())+"'");

Answer 1

並非所有瀏覽器都支持該漸變，因此您應注意這一點。

在我的示例中，我為每個項目編寫了一個CSS類。 您可以將其轉換為C＃類並編寫方法以標識相同的對象並避免使用相同的CSS類，但這不是本文的重點。

TableDAO（什么？）

使用List <>比使用DataTable更好。 但是您在問題中使用了DataTable，所以我在這里做了GoHorse只是為了與您的問題保持一致好嗎？

public class TableDAO
{
    public DataTable GetClients()
    {
        var clientTable = new DataTable("tblClients");
        clientTable.Columns.Add("id", typeof(int));
        clientTable.Columns.Add("name", typeof(string));
        clientTable.Columns.Add("gradientParams", typeof(string));
        clientTable.Columns.Add("gradClass", typeof(string));

        var row = clientTable.NewRow();
        row[0] = 1;
        row[1] = "Kakaroto";
        row[2] = "left,red,orange,yellow,green,blue,indigo,violet";
        row[3] = "grad1";
        clientTable.Rows.Add(row);

        row = clientTable.NewRow();
        row[0] = 2;
        row[1] = "Vegeta";
        row[2] = "right,rgba(255,0,0,0),rgba(255,0,0,1)";
        row[3] = "grad2";
        clientTable.Rows.Add(row);

        row = clientTable.NewRow();
        row[0] = 3;
        row[1] = "Broly";
        row[2] = "-90deg, red, yellow";
        row[3] = "grad3";
        clientTable.Rows.Add(row);

        return clientTable;
    }
}

Aspx.cs（隱藏代碼）

using TableDAO = MyApplication.DAO.TableDAO;
public partial class MyPage : System.Web.UI.Page
{
    protected string TableGradientCss { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        BindClients();
    }

    public void BindClients()
    {
        var dao = new TableDAO();
        var clientTable = dao.GetClients();
        gvDados.DataSource = clientTable;
        gvDados.DataBind();

        ExtractClientsGradientCss(clientTable);
    }

    protected void gvDados_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        var label = e.Row.FindControl("gradClass") as Label;
        if (label != null)
        {
            e.Row.CssClass = label.Text;
        }
    }

    private void ExtractClientsGradientCss(DataTable clients)
    {
        var sb = new StringBuilder();
        foreach(DataRow row in clients.Rows)
        {
            sb.Append(
                GetGradientCss(
                    row["gradClass"].ToString(),
                    row["gradientParams"].ToString()));
        }
        TableGradientCss = sb.ToString();
    }

    private string GetGradientCss(string className, string gradientParams)
    {
        var css = @"
        .{0} {{
            background: white;                          /* For browsers that do not support gradients */
            background: -webkit-linear-gradient({1});   /*Safari 5.1-6*/
            background: -o-linear-gradient({1});        /*Opera 11.1-12*/
            background: -moz-linear-gradient({1});      /*Fx 3.6-15*/
            background: linear-gradient({1});           /*Standard*/
        }} ";
        return string.Format(css, className, gradientParams);
    }
}

Aspx（設計器視圖）

// some code
<style>
    <%= TableGradientCss %>
</style>
// more code
<asp:GridView ID="gvDados" runat="server"
    AutoGenerateColumns="false"
    OnRowDataBound="gvDados_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Código">
            <ItemTemplate>
                <%# Eval("id") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Nome">
            <ItemTemplate>
                <%# Eval("name") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField Visible="false">
            <ItemTemplate>
                <asp:Label ID="gradClass" runat="server"
                    Text='<%# Eval("gradClass") %>'>
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>