使用 CSS 格式化 Razor cshtml 文件：empty 伪类答案

【问题标题】：Razor cshtml file formatting with CSS :empty pseudoclass使用 CSS 格式化 Razor cshtml 文件：empty 伪类
【发布时间】：2020-03-05 03:10:52
【问题描述】：

剃刀代码：

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

它可以工作，但它不是一个选择，因为一旦我们在 VS 中执行format document 命令，它就会全部重置为第一个代码 sn-p。

我也想过将$.trim()用于容器节点，但它仍然会导致跳转页面。

【问题讨论】：

标签： html css asp.net asp.net-mvc razor

【解决方案1】：

也许您可以通过使用“空”类而不是使用: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');。

【讨论】：

【解决方案2】：

您可以使用一些 javascript 来帮助解决您的问题。这是一种方法

https://dotnetfiddle.net/yOCm2b

注意：如果 div 里面有注释，这将不起作用

【讨论】：