如何动态更改CSS样式

Question

I am trying to change the css style of the repeater to a different color on different status. The expected output is to print 6 different statuses like: In progress, complete, withdrawn so on.. Currently it has a single color, so it shows one color only. the challenging part here is to change the color dynamically based on the status. how do I achieve this? Currently it pulls the style based on "status noAction text-center" class below. Should I make any changes in the code behind or is it just a front end css change. Can someone provide me an example please.

.aspx code:

<div class="row">
                <asp:Repeater ID="rptStatuses" runat="server">
                    <ItemTemplate>
                        <div class="col-md-4 col-sm-4">
                            <div class="status noAction text-center">
                                <div class="banner">

                                    <asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
                                </div>
                                <div class="label"><%# Eval("Name") %></div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>

.cs code relevant part

private void GB()
        {

            var surveyId = 55;
            var stateLabels = _manageDatasets.GetStateLabels(surveyId);
            List<Status> statusesList = new List<Status>();
            foreach (var sl in stateLabels)
            {
                if (sl.Key != -1)
                    statusesList.Add(new Status { ID = sl.Key.ToString(), Name = sl.Value }
                  );
            }
            this.rptStatuses.DataSource = statusesList;
            this.rptStatuses.DataBind();
}

Answer 1

I think what you want to do is change the class in the your html and just use the embedded code to be able to dynamically change the banner color, etc. based on the status. The embedded code that you want would look something like this -

<div class="col-md-4 col-sm-4">
    <% if(status == "noAction") { %>
        <div class="status noAction text-center">
            <div class="banner">

                <asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
            </div>
            <div class="label"><%# Eval("Name") %></div>
        </div>
    <% } %>

Answer 2

If you have any column in you table from where repeater is getting datasource then that would be pretty easy to do something like that

 <asp:Repeater ID="rptStatuses" runat="server">
                <ItemTemplate>
                    <div class="col-md-4 col-sm-4">
                        <div class='<%# Convert.toInt32(eval("ActionColumnName"))==1 ? "status In progress text-center" : Convert.toInt32(eval("ActionColumnName"))==2 ? "status complete  text-center" : Convert.toInt32(eval("ActionColumnName"))==3 ? "status withdrawn text-center" : "status noAction text-center" '>
                            <div class="banner">

                                <asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
                            </div>
                            <div class="label"><%# Eval("Name") %></div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>