Question

我正在根据下图的模具在桌子上工作

但是，为了适应第3行中不同数量的行，我编写了这段代码

<tbody>
        @{var foco = 3;}


        @for (int x = 0; x < foco; x++)
        {
            <tr>
                @{if (x == 0) {"<td rowspan='" + foco + "' class='col-md-3'>1</td>";}}
                <td class="col-md-2">2</td>
                <td class="col-md-5">3</td>
                <td class="col-md-2">4</td>
            </tr>
        }
    </tbody>

如何使if文本显示在屏幕上？

Answer 1

您不希望HTML在服务器端代码中成为文字字符串。相反，您希望服务器端代码仅包装常规的HTML标记。与您在for结构中已经使用的语法几乎相同，唯一的区别是您似乎还想在HTML中输出一个值。相同的@符号也用于此。

类似这样的东西：

@for (int x = 0; x < foco; x++)
{
    <tr>
        @if (x == 0)
        {
            <td rowspan="@foco" class="col-md-3">1</td>
        }
        <td class="col-md-2">2</td>
        <td class="col-md-5">3</td>
        <td class="col-md-2">4</td>
    </tr>
}

（请注意，这并不是真正的C＃东西，它特定于Razor视图引擎语法。）

Answer 2

根据我的经验，实现目标的最简单方法是使用JS DOM机制（https://www.w3schools.com/js/js_htmldom.asp）。它允许您动态地操纵HTML元素。

您不必担心剃刀特定的语法等。

在您的情况下：

1）为表创建空的占位符，只需指定一些ID：

<tbody id="my-table-body">
</tbody>

2）在脚本部分中，调用您的逻辑：

@section Scripts{

    var foco = 3;

    //get table body reference
    var myTableBody = document.getElementById("my-table-body");

    for (int x = 0; x < foco; x++) {
        if(x == 0) {

            //create td element and fill its properites
            var td = document.createElement("td");
            td.rowSpan = foco.toString();
            td.className = "col-md-3";
            td.value = 1

            //add the td element to table body
            myTableBody.appendChild(td);
        }
    }
}

如何使用Razor编写一行HTML

2 个答案: