Question

我正在迭代模型的注释（Comment个对象的集合），并且需要根据属性Private是true还是false来设置它们的样式。

我尝试根据这样的属性添加一个类：

<div class="contact-card comment_p_@(comment.Private)">

但生成的html一直给我

<div class="contact-card comment_p_class">

即使我直接在这个元素下面

<p>@comment.Private</p>

根据需要输出True或False。

这是完整循环：

@foreach (var comment in comments)
{
    <div class="contact-card comment_p_@comment.Private">
        <strong>@comment.UserName</strong>
        <p>@comment.Private</p>
        <strong class="pull-right">@comment.DateTime</strong>
        <p style="white-space: pre-wrap;">@comment.Content</p>
    </div>
}

输出一次迭代：

<div class="contact-card comment_p_class">
    <strong>skotze</strong>
    <p>True</p>
    <strong class="pull-right">29/11/2017 03:18:12</strong>
    <p style="white-space: pre-wrap;">asda123</p>
</div>

我也试过

<div class="contact-card comment_p_@comment.Private">
<div class="@comment.Private">
<div class="comment-@comment.Private">

但是我总是得到相同的结果...当我尝试使用属性设置类时，输出html将其更改为class，即使我能够在其刚刚打印时输出真值在。

这里发生了什么？

Answer 1

为了解释这种行为，razor-2中有两种类型的“条件属性”。

对于期望string值的属性，例如class="someValue"，那么当您使用

时

@{
    string classname = "myclass";
    string noclass = null;
}
<div class="@classname">xx</div>
<div class="@noclass">xx</div>

然后输出

<div class="myclass">xx</div>
<div>xx</div>

当属性的值为null时，它会省略该属性，否则会生成具有该属性值的属性。

另一种类型用于boolean属性，例如生成checked="checked"属性。

使用时

@{
    bool checked = true;
    bool notchecked = false;
}
<input type="checkbox" checked="@checked" />
<input type="checkbox" checked="@notchecked" />

然后输出

<input type="checkbox" checked="@checked" />
<input type="checkbox" />

当属性的值为true时，它会添加与属性名称相同的值的属性 - 即checked="checked"，当值为false时，它会省略属性。

在您的情况下，属性为bool，其值为true，因此剃刀引擎生成的值与属性的名称相同 - 即"class"并将其附加到现有值和结果是

<div class="contact-card comment_p_class">

如果属性的值为false，那么它只会生成

<div class="contact-card comment_p_">

如您的自我回答所述，有必要使用

<div class="contact-card @(comment.Private ? "comment-priv" : "comment-pub" )">

或类似的条件代码，用于生成class属性。

条件元素类输出“类”

1 个答案: