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 语句只是将文本写入屏幕。

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

我做错了什么？！？

Answer 1

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

虽然您可以使用 @: 转义不匹配的 html 标签（例如 Razor doesn't understand unclosed html tags），但稍加努力，您就可以消除不匹配的标签；

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

Answer 2

虽然 Jeremy 提供了出色的答案。我最终运行遇到了我绝对需要开放标签的问题，事实上，我不得不将所有内容重新写回到 DIV 标签中才能正常工作。

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

这里有一个 link 解释了如何使用它 - https://www.meziantou.net/rendering-raw-unescaped-html-in-blazor.htm

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

Blazor App Not Using Nested If Statements Properly

c#

blazor

blazor-server-side