Question

根据我的记录，我想在当前迭代中更改表格行的样式。

以下示例不起作用，但我该如何正确地执行此操作？

 foreach (var item in Model)
                {
                    @{ 
                        if (item.DataState != DataState.Active)
                        {
                            <tr style="background-color: red">
                        }
                        else
                            <tr>
                    }
                    <td>@item.Name</td>
                  </tr>
                 }

如此有效，我希望根据模型的DataState动态呈现<tr>元素。

Answer 1

这是一个较短的方法：

@foreach (var item in Model)
{
    <tr @(item.DataState != DataState.Active ? "style=background-color:red" : "")>
        <td>@item.Name</td>
    </tr>
}

编辑：代码已修复

Answer 2

您可以通过多种方式撰写条件。

选项1：

@foreach (var item in Model)
{
    if (item.DataState != DataState.Active)
    {
        <tr style="background-color: red">
            <td>@item.Name</td>
        </tr>
    }
    else
    {
       <tr>
            <td>@item.Name</td>
       </tr>
    }
}

选项2：

@foreach (var item in Model)
{
    <tr style="@( item.DataState != DataState.Active ? "background-color: red;" : "" )">
        <td>@item.Name</td>
    </tr>
}

Answer 3

定义变量中的属性。如果属性值为null

，剃刀解析器将省略该属性

@foreach (var item in Model)
{
  var attributes = item.DataState == DataState.Active ? null : "background-color: red";
  <tr style=@attributes>
    <td>@item.Name</td>
  </tr>
}

Answer 4

不确定你现在面临的是什么样的错误，但我认为你的问题是Razor不了解所有棘手的HTML渲染案例。

您可以强制他使用html符号将@:呈现为单个字符串或<text>标记，如下所示：

 @foreach (var item in Model)
 {
    if (item.DataState != DataState.Active)
    {
        @: <tr style="background-color: red">
    }
    else
    { 
        <text><tr></text>
    }
    <td>@item.Name</td>
    </tr>
 }

Answer 5

如果您开始在视图中拆分<tr>标记，并且我不会复制大块代码，那么您可能会遇到编译错误。我会做以下事情：

@foreach(var item in Model) {
    string strStyle=String.Empty;
    if(item.DataState!=DataState.Active) { strStyle = "background-color:red;" }
   <text>
   <tr style="@strStyle">
       <td>@item.Name</td>
   </tr>
   </text>
}

Answer 6

 @(item.DataState != DataState.Active  ? "style=" + "background-color:red" : "")

用剃刀编写条件HTML

6 个答案: