在Razor视图if/else条件下编写HTML时遇到麻烦

Question

我不太确定我在这里缺少什么，但我在局部视图中添加class='success'到<tr>时遇到麻烦，同时在我的模型中迭代列表。

我的目标是让第一行的tr具有属性class='success'

下面是我的代码:

@model List<DxRow>
<div class="row">
    <table class="table" id="diagnosis">
        <tr id="header-row">
            <th>Dx Code</th>
            <th>Dx Description</th>
            <th>Dx Date</th>
            <th>OnSet Or Ex</th>
            <th>Dx Order (Top is Primary)</th>
        </tr>
    @{ bool IsFirst = true; }
    @foreach (DxRow r in Model)
    {
           if (IsFirst)
           { 
               Html.Raw("<tr class='success'>");
               IsFirst = false;
           }
           else
           {
               Html.Raw("<tr>");
           }
       <tr>
        <td>@r.dxCode</td>
        <td>@r.dxDescription</td>
        <td>@r.dxDate</td>
        <td>@r.dxType</td>
        <td>
            <span class='up'><i class='icon-arrow-up bigger-160' style='color:green'></i></span>&nbsp;&nbsp;
            <span class='down'><i class='icon-arrow-down bigger-160' style='color:red'></i></span>&nbsp;&nbsp;
            <span class='top'><i class='icon-star bigger-160' style='color:goldenrod'></i></span>&nbsp;&nbsp;
            <span class='delete'><i class='icon-trash bigger-160' style='color:red'></i></span>
        </td>
    </tr>
    }
</table>

当我遍历代码时，它在第一次迭代中进入特殊的IsFirst部分，在所有其他迭代中进入else部分。

但是，当我使用FireBug查看源代码时，它不是在写部分:<tr class='success'>，只是<tr>。

Answer 1

我认为在你的if语句之后额外的<tr>可能会导致浏览器忽略你的html，因为html实际上会被两个<tr>标签所破坏。

我可能会将代码更新为;

@{ bool IsFirst = true; }
@foreach (DxRow r in Model)
{
   <tr class="@( IsFirst ? "success" : "")">
       <td>@r.dxCode</td>
       <td>@r.dxDescription</td>
       <td>@r.dxDate</td>
       <td>@r.dxType</td>
       <td>
           <span class='up'><i class='icon-arrow-up bigger-160' style='color:green'></i></span>&nbsp;&nbsp;
            <span class='down'><i class='icon-arrow-down bigger-160' style='color:red'></i></span>&nbsp;&nbsp;
            <span class='top'><i class='icon-star bigger-160' style='color:goldenrod'></i></span>&nbsp;&nbsp;
            <span class='delete'><i class='icon-trash bigger-160' style='color:red'></i></span>
        </td>
    </tr>
    IsFirst = false;
}

因为您在第一个循环后将IsFalse设置为false。使代码更整洁。