如何動態更改CSS樣式

Question

我試圖將轉發器的css樣式更改為不同狀態的不同顏色。 預期輸出是打印6種不同的狀態，如：正在進行，完成，撤消等等。目前它有一種顏色，所以它只顯示一種顏色。 這里具有挑戰性的部分是根據狀態動態改變顏色。 我怎么做到這一點？ 目前，它基於下面的“狀態noAction文本中心”類來提取樣式。 我應該對后面的代碼進行任何更改，還是僅僅是前端css更改。 請有人給我一個例子。

.aspx代碼：

<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代碼相關部分

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

我想你想要做的是改變你的html中的類，只需使用嵌入的代碼就可以根據狀態動態改變橫幅顏色等。 您想要的嵌入式代碼看起來像這樣 -

<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

如果您在表中有任何列，其中轉發器正在獲取數據源，那么這樣做很容易

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