Blazor 应用程序未正确使用嵌套的 If 语句

Question

我知道，我很糟糕，因为我使用的是table而不是div标签，但我无法正确显示div标签，而且我的截止日期是上周的某个时间......

我正在尝试布置一堆设备及其状态和其他简单选项，但我无法让ìf语句起作用。 这是我的代码：

@if (CurrentSystem == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @foreach (Device thisDevice in CurrentSystem.LocalDevices)
    {
        menuCounter++;
        divCounter++;

        if (divCounter == 1)
        {
            //Starting with the first column
            <tr><td class=cardBox>
        }
        else
        {
            //Starting with the last column
            <tr><td class=outSideColumns></td>
            <td></td>
            <td class=cardBox>
        }

        targetName = "target" + @menuCounter;
        targetNameWithDot = "." + @targetName;
        menuId = "contextMenu" + @menuCounter;
        modalID = "modalWindow" + @menuCounter;

        <table>
            <tr>
                <td></td>
                <td>
                    <div class="targetName" style="text-align:right;justify-content:right;">
                        <a href="#" class="menuButton">...</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <h3>
                        thisDevice.DeviceName
                    </h3>
                    <img src="@ReturnDeviceImage(thisDevice)" class=deviceImage />
                    @if (thisDevice.CurrentStatus == Device.DeviceStatus.Alert)
                    {
                        <h4 Class="cardAlert">Status: Alert</h4>
                    }
                    else if (thisDevice.CurrentStatus == Device.DeviceStatus.Inactive)
                    {
                        <h4 Class="cardInactive">Status: Inactive</h4>
                    }
                    else if (thisDevice.CurrentStatus == Device.DeviceStatus.Unknown)
                    {
                        <h4 Class="cardUnknown">Status: Unknown</h4>
                    }
                    else if (thisDevice.CurrentStatus == Device.DeviceStatus.Normal)
                    {
                        <h4 Class=cardNormal>Status: Normal</h4>
                    }
                    else if (thisDevice.CurrentStatus == Device.DeviceStatus.Updating)
                    {
                        <h4 Class=cardUpdating>Status: Normal</h4>
                    }
                    else
                    {
                        <h4>Status: thisDevice.CurrentStatus</h4>
                    }
                    <TelerikContextMenu IdField="@menuId" Selector="@targetNameWithDot" Data="@MenuItems" OnClick="@((ContextMenuItem item) => OnItemClick(item, @thisDevice.DeviceIDHash))">
                    </TelerikContextMenu>
                </td>
            </tr>
            <tr>
                <td class=nameDivs>
                    Device Type:
                </td>
                <td>
                    @thisDevice.DeviceType
                </td>
            </tr>
            <tr>
                <td class=nameDivs>
                    Hostname:
                </td>
                <td>
                    @thisDevice.DeviceHostname
                </td>
            </tr>
            <tr>
                <td class=nameDivs>
                    Communications:
                </td>
                    @if (thisDevice.UsingEncryption)
                    {
                        <td class=cardNormal>Are Encrypted</td>
                    }
                    else
                    {
                        <td> class=cardAlert>Are Not Encrypted</td>
                    }
            </tr>
            <tr>
                <td class=nameDivs>
                    Anomaly Response Level:
                </td>
                <td>
                    @thisDevice.AnomalyResponse
                </td>
            </tr>
        </table>

        if (divCounter == 1)
        {
            //Ending the first column
           </td>
            <td></td>
            <td class=outSideColumns></td>
            </tr>
        }
        else
        {
            //Ending the last column
            </td></tr>
            divCounter = 0;
        }
    }
    </table>
}

开始的if语句和运行CurrentStatus和UsingEncryption的if语句似乎在工作，但是最后一个if语句只是将文本写入屏幕。

• 如果我在第一个和/或最后一个if语句中添加@符号，我会收到大量关于没有结束标记、未定义对象等的错误......
• 如果我从CurrentStatus和UsingEncryption if语句中删除@符号，这些语句将停止工作。
• 如果我从foreach语句中删除@ ，则不会打印任何内容。

我究竟做错了什么？！？

Answer 1

要使用标签助手，您的 html 结构必须反映您的控制流。 你不能只在 if 测试中开始一个标签，而没有在 if 测试中关闭它。

虽然您可以使用@:转义不匹配的 html 标签（例如Razor 不理解未关闭的 html 标签），但只需稍加努力，您就可以消除不匹配的标签；

            <tr>
            @if(divCounter != 1)
            {
                //Starting with the last column
                <td class=outSideColumns></td>
                <td></td>
            }
            <td class=cardBox>

Answer 2

虽然杰里米提供了一个很好的答案。 我最终遇到了我绝对需要开放标签的问题，事实上，我不得不将所有内容重新写回 DIV 标签以使其正常工作。

那时我发现了我最好的新朋友——MarkupString——我可以用它来插入我想要的任何 HTML 代码，而不会炸毁 IDE！

这是一个解释如何使用它的链接 - https://www.meziantou.net/rendering-raw-unescaped-html-in-blazor.htm