Как изменить цвет фона div на основе значения метки asp.net?

-2

У меня есть метка asp.net (lblFriday) и рядом с ним. lblFriday показывает числовые данные, полученные из таблицы базы данных. Я хочу, чтобы div рядом с lblFriday отображал красный треугольник, если текст lblFriday является отрицательным числом и зеленым треугольником, если текст lblFriday является положительным числом.Как изменить цвет фона div на основе значения метки asp.net?

В настоящее время я установил класс css div вручную с красным цветом. Вот код,

HTML/ASPX:

<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label> 
<div class="arrow-down"></div>

CSS:

.arrow-down 
{ 
    float:right; 
    width: 0; 
    margin-top:5px; 
    height: 0; 
    text-align:left; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid red; 
}

Любые идеи будут полезны.

Спасибо.

источник

2014-11-21 Arpita

Где находится метка asp.net? – ekad

Можете ли вы рассказать о том, что вы подразумеваете под отрицательным или положительным значением? Эти цифры? Есть ли кнопка отправки, чтобы показать, что это отрицательное или положительное значение? Я думаю, вам нужна дополнительная информация, чтобы помочь вам. –

У меня есть несколько номеров в базе данных. Мое требование состоит в том, чтобы показать зеленый/красный треугольник, основанный на% увеличения/уменьшения числа, как на фондовом рынке. – Arpita

Первое, что вам нужно сделать, это добавить атрибут id и runat="server" в div, чтобы он был доступен из кода позади.

<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label> 
<div id="divTriangle" runat="server"></div>

, то вам нужно исправить ваш CSS следующим образом, где arrow-down покажет красный треугольник лицевой стороной вниз и arrow-up покажет зеленый треугольник вверх

.arrow-down 
{ 
    float:right; 
    width: 0; 
    margin-top:5px; 
    height: 0; 
    text-align:left; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 10px solid red; 
} 

.arrow-up 
{ 
    float:right; 
    width: 0; 
    margin-top:5px; 
    height: 0; 
    text-align:left; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid green; 
}

затем установить класс CSS из divTriangle в ваш код позади на основе значения lblFriday.Text. Скажем, значение десятичного извлекается из базы данных, вот что ваш код позади должен выглядеть следующим образом:

decimal stockValue = ....; // get the value from database 
lblFriday.Text = stockValue.ToString(); 
if (stockValue > 0) 
{ 
    // set css class to arrow-up 
    divTriangle.Attributes["class"] = "arrow-up"; 
} 
else if (stockValue < 0) 
{ 
    // set css class to arrow-down 
    divTriangle.Attributes["class"] = "arrow-down"; 
} 
else 
{ 
    // no css class if stockValue is zero 
    divTriangle.Attributes["class"] = ""; 
}

источник

2014-11-21 17:06:29 ekad

В зависимости от того, как вы привязки данных к этикетке, вы можете сделать:

<asp:Label ID="lblFriday" runat="sever" Text='<%# Eval("DATA") %>' 
    OnPreRender="lblFriday_PreRender" CssClass="label_target" />

Затем в коде позади:

protected void lblFriday_PreRender(object sender, EventArgs e) 
{ 
    Label lblFriday = sender as Label; 
    decimal d; 
    if(Decimal.TryParse(lblFriday.Text, out d)) 
    { 
     lblFriday.CssClass += d < 0 ? " negative" : d > 0 ? " positive" : String.Empty; 
    } 
}

И закончить с некоторыми CSS:

.label_target.negative::after 
{ 
    content: '\25BC'; 
    color: Red; 
} 
.label_target.positive::after 
{ 
    content: '\25B2'; 
    color: Green; 
}

источник

2014-11-21 17:34:51 glboothby

Как изменить цвет фона div на основе значения метки asp.net?

ответ

Смежные вопросы