asp.net：更改列表框项目的颜色

Posted 2023-03-05

【中文标题】asp.net：更改列表框项目的颜色

【英文标题】：asp.net: change color of listbox items

【发布时间】：2011-11-22 08:01:34

【问题描述】：

网络表单上的列表框正在由 sql server 2008 上的数据源填充。

根据列表框中的文本，我会认为该特定项目的背景颜色是特定颜色

例如，如果这些是列表中的项目：

AA item 1
AA item 2
BB item 3
BB item 4
AA item 5

如果项目以AA开头，则将背景设为green，如果项目以BB开头，则将其设为blue

我该怎么做？

解决方案可以是客户端或服务器端，对我来说无所谓

我现在正在这样做：

function colorproblemlist() 
        ob = document.getElementById('lstProblems');
        for (var i = 0; i < ob.options.length; i++) 
            if (ob.options[i].value.indexOf('AA')!=-1) 
                ob.options[i].style.color = "red";
            
        

    

而且效果很好！！

但是我有以下并发症。

如下所示的第一列：

AA item 1
AA item 2
BB item 3
BB item 4
AA item 5

将不可见

只有第二个可见：

Item 1
Item 2
...

本专栏：

AA
AA

..

是数据库表中的一个字段，从中提取此数据，我需要基于该字段的颜色。

我该怎么做？>

【问题讨论】：

如何从AA 转到green？如果您可以在客户端代码中指定此算法，则可以使用 JQuery 将颜色设置为项目的背景。

@thekip 太棒了，你能告诉我如何用 jquery 做到这一点吗？

@thekip 我编辑了 q 请再看一遍

【参考方案1】：

服务器端方法：

<asp:ListBox ID="prevSubList" runat="server" Height="16px" DataTextField="Key" 
 DataValueField="Value" Width="263px" Rows="1"  
 OnDataBound="prevSubList_DataBound">
</asp:ListBox>

并且DataBound事件的处理方式如下：

protected void prevSubList_DataBound(object sender, EventArgs e)

     foreach (ListItem item in prevSubList.Items)
     
         if (item.Text.Contains("AA"))
            item.Attributes.Add("style","background-color:green;");
         else if(item.Text.Contains("BB"))
            item.Attributes.Add("style", "background-color:blue;");
     

【讨论】：

@I__ 你不能用 ListBox 轻松地做到这一点（我的意思是，你可以为此使用各种技巧）但如果你拥有的不仅仅是 Text，ListBox 通常不是一个好的选择和 Value，因为它在浏览器上呈现为 <select><option></option></select>

我不得不将其更改为 OnPreRender 而不是 DataBound，因为回发时颜色丢失了。

【参考方案2】：

类似：

function colorproblemlist() 
    ob = document.getElementById('lstProblems');
    for (var i = 0; i < ob.options.length; i++) 
        var option = ob.options[i];

         switch(option.value.substr(0,2))
         
            case "AA":
                option.style.color = "Red";
            break;
            case "BB":
                option.style.color = "Green";
            break;
         

         option.value = option.value.slice(3); //Assumption of 'AA '
    

基于从 html 中删除 AA、BB 标志，将不再可能在客户端修改颜色。

【参考方案3】：

由于控制颜色的数据不是列表项的一部分，因此您必须手动添加项目并在添加之前为它们着色。

ASPX 页面：

<asp:ListBox ID="testListBox" runat="server" 
    onload="TestListBoxOnLoad">
</asp:ListBox>

代码隐藏（我只是使用了一个字符串数组和它们的长度来测试它，你的逻辑会有所不同）：

private string[] testData = new string[]  "Alpha", "Beta", "Gamma", "Delta", "Eta", "Theta", "Zeta", "Iota" ;

protected void TestListBoxOnLoad(object sender, EventArgs e)

    foreach (var data in testData)
    
        ListItem item = new ListItem()
        
            Text = data
        ;

        if (data.Length < 5)
        
            item.Attributes.Add("class", "aaStyle");
        
        else
        
            item.Attributes.Add("class", "bbStyle");
        

        testListBox.Items.Add(item);
    

【参考方案4】：

我不知道这是否违反了 asp .net mvc 的规则，但我为解决类似问题所做的就是不使用 @Html.ListBoxFor。

我检查了 @Html.ListBoxFor 添加到 html 的内容并手动进行了验证。

我想如果我更改列表的名称（在模型中），我将不得不返回我的代码并手动修改它（代码的可扩展性和可维护性较差）

这是我的情况：

<label for="EventsList" style="font-size:.9em" >Evento</label>                  
<select id="EventsList" multiple="multiple" name="Eventos">
    @foreach (var evento in Model.Eventos)
    
        string style = "";
        switch (evento.Estado)
        
            case 0:
                style = "background-color:#ff6868";
                break;
            case 1:
                style = "background-color:#ff8355";
                break;
            case 2:
                style = "background-color:#fcfc6a";
                break;
            case 3:
                style = "background-color:#79d779";
                break;
        
        <option value="@evento.Id" style="@style">@evento.Descripcion</option>
    
</select>