如何使用 Razor 编写 HTML 行？

Posted 2023-05-07

【中文标题】如何使用 Razor 编写 HTML 行？

【英文标题】：How to write HTML line using Razor?

【发布时间】：2019-02-04 04:24:48

【问题描述】：

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

但是，为了适应第 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 文本显示在屏幕上？

编辑： 简而言之，我的目标是我可以制作一个表格，其中一个字段有 3 个其他等效字段（可以根据需要或多或少），为此我需要上面的代码来为我创建统一的这些字段，但我无法执行这个 3td 进程与 1td 更高的对齐

【参考方案1】：

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

类似这样的：

@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 视图引擎语法特有的。）

【参考方案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);