Razor cshtml форматирование файлов с помощью CSS: пустой псевдокласс - PullRequest
Новая
       20

Razor cshtml форматирование файлов с помощью CSS: пустой псевдокласс

0 голосов
/ 08 ноября 2019

Код бритвы: 

<div class="container">
    @if (Model.firstThings.Any())
    {
        <ul class="firstThings">
            @foreach (var thing in firstThings)
            {
                <li>
                    @thing
                </li>
            }
        </ul>
    }
    @if (Model.secondThing != null)
    {
        <div class="secondThing">
            @Model.secondThing
        </div>
    }
</div>

Стиль CSS: 

div.container:empty:after {
    content: "Please fill this space with either first things or second thing";
    color: darkgrey;
}

Проблема в том, что когда нет firstThings или secondThing, это не будет работать и показыватьтекст-заполнитель.

Я пытался перейти как 

<div class="container">@if (Model.firstThings.Any())
    {
        <ul class="firstThings">
            @foreach (var thing in firstThings)
            {
                <li>
                    @thing
                </li>
            }
        </ul>
    }
    @if (Model.secondThing != null)
    {
        <div class="secondThing">
            @Model.secondThing
        </div>
    }</div>

Это работает, но это не вариант, потому что как только мы делаем команду format document в VS, все сбрасывается всамый первый фрагмент кода.

Я также подумал об использовании $.trim() для узла контейнера, но это все равно вызывает переход на страницу.

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

Вы можете использовать JavaScript, чтобы помочь с вашей проблемой. Вот один из способов

https://dotnetfiddle.net/yOCm2b

Примечание: если внутри div есть комментарий, он не будет работать

0 голосов
/ 08 ноября 2019

Возможно, вы могли бы подойти к этому немного по-другому, используя «пустой» класс вместо использования селектора :empty puesdo.

Так что в вашем файле Razor добавьте что-то вроде этого: 

@{
    var cssClass = !Model.firstThings.Any() && Model.secondThing == null ? "empty" : "";
}

<div class="container @cssClass">

Затем обновите свой стиль CSS: 

div.container.empty:after {
    content: "Please fill this space with either first things or second thing";
    color: darkgrey;
}

Если вы добавляете что-либо к .container, просто наберите $('.container.empty').removeClass('empty');, прежде чем добавлять контент.

...