Есть ли возможность прописать условие внутри атрибута элемента?

Question

Например, есть такой элемент:

<div class="points"></div>

Я бы хотел сделать что-то типа этого:

<div class="points" style="background-color: @{if (movie.Points < 40) return red @*И другие условия*@}"><div/>

Но я нашел лишь такой способ:

@if(movie.Points < 40)
{
    <div class="points" style="background-color: red"></div>
}
else if(movie.Points > 40 && movie.Points < 70)
{
    <div class="points" style="background-color: yellow"></div>
}

Выглядит не совсем эстетично, нужно каждый раз переписывать весь div. Есть ли какой-то способ сделать это красивее?

Answer 1

Можно так:

@{
    string color = null;
    if (movie.Points < 40)
    {
        color = "red";
    }
    else if (movie.Points > 40 && movie.Points < 70)
    {
        color = "yellow";
    }
}

<div class="points" style="background-color: @color"></div>

Не уверен, что это сильно красивее. Однако, если в блоке кода будут задаваться множество разных локальных переменных, а потом использоваться в разметке, то это уже будет смотреться лучше.

Answer 2

Попробуйте такой подход

<div style="@(true ? "display:block" : "display:none")"></div>

display:block - блочный элемент display:none - скрывает элемент

в вашем случае:

<div style="@(movie.Points < 40 ? "background-color:red" 
             : movie.Points > 40 && movie.Points < 70 ? 
             "background-color:yellow" : "")"></div>

БЛОГ НА HUSL

Есть ли возможность прописать условие внутри атрибута элемента?

Ответы (2 шт):