How to change CSS Class of an image in ListView depending on content in ASP.NET // C#

Question

I have a ListView filled with data from a DataSet loaded out of a MySql database. The ListView shows a list of text modules to create a word- file later. Here is the ListView definition:

<asp:ListView ID="addTextModuleList" runat="server" OnItemCommand="addTextModuleList_OnItemCommand" DataKeyNames="ID" >           
    <ItemTemplate>
        <asp:LinkButton ID="addTextModuleButton" runat="server" CssClass="insertTextModuleButtonFade" CommandName="insertTextModule"></asp:LinkButton>
        <div id="listViewId" runat="server" style="float:left; width:24px; height:16px; margin:2px 15px 5px 0px; text-align:right;"><%# Eval("ID") %></div>
        <div style="float:left; width:200px; height:25px; margin:2px 10px 5px 0px; text-align:left; font-weight:bold;"><%# Eval("shortName") %>:</div>
        <div style="float:left; width:700px; margin:5px;"><%# Eval("fullName") %></div>
        <div class="clear"></div>
    </ItemTemplate>        
</asp:ListView>

I want to add textModules to the confirmation by clicking on an icon. And that's my problem. The icon has to be shown in different colors, depending on if the text module is already added or not. The icon is loaded as an asp:Linkbutton and I have a CSS class for the icon shown in green and another CSS class for the same icon in faded grey.

I can change the CssClass of the icon by clicking it but I do not know how to change the CssClass of the icon while loading the Page or the ListView . Any ideas?

Here is my codebehind for the DataSet :

protected void executeTemplateSelection()
    {
        // connect to database
        MySqlConnection con = new MySqlConnection();
        con.ConnectionString = Helper.CONNECTION_STRING;
        MySqlCommand cmd = null;

        // load customer textModules
        con.Open();
        cmd = new MySqlCommand();
        cmd.Connection = con;
        cmd.CommandText = "SELECT * FROM textmodule WHERE ID IN " + Session["loadTextModuleTemplates"].ToString();
        MySqlDataAdapter sda = new MySqlDataAdapter(cmd);
        DataSet ds = new DataSet();        
        sda.Fill(ds);
        addTextModuleList.DataSource = ds;
        addTextModuleList.DataBind();
        con.Close();

        cmd = new MySqlCommand();
        con.Open();
        cmd.Connection = con;
        cmd.CommandText = "SELECT * FROM linktextmodule WHERE confirmationId = " + Session["currentConfirmationId"].ToString();
        MySqlDataReader mdr = cmd.ExecuteReader();
        ds.Tables[0].Columns.Add("alreadyAdded");

        while (mdr.Read())
        {            

            for (int i = 0; i <= ds.Tables[0].Rows.Count - 1; i++)
            {
                if (mdr["textModule"].Equals(ds.Tables[0].Rows[i]["ID"]))
                {
                    ds.Tables[0].Rows[i]["alreadyAdded"] = "yes";                    
                }
            }

        }

    }

Answer 1

You can implement the ListView.ItemDataBound event (see http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.itemdatabound%28v=vs.100%29.aspx ), which would allow you to change properties on the controls for each item as it's bound. I have used this approach before.

You could also try using the data binding syntax ( <%# %> ) directly in the CssClass attribute, though I'm not certain if that works inside the CssClass attribute like it does inside some other attributes. You're already doing that inside the div, but see for example http://support.microsoft.com/kb/307860 where they give an example inside an attribute.