使用 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>