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

【问题标题】：Blazor App Not Using Nested If Statements ProperlyBlazor 应用程序未正确使用嵌套的 If 语句
【发布时间】：2021-11-14 21:14:10
【问题描述】：

我知道，我很糟糕，因为我使用的是 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 语句中删除 @，则不会打印任何内容。

我做错了什么？！？

【问题讨论】：

首先我看到一个打开<table>，但两个关闭</table>。这不会与 Razor 编译器一起使用。此外，所有ifs 都需要声明为@if。如果编译器不喜欢它，那么你有代码错误。删除/注释掉块，直到你发现你的问题。
@if 是唯一正确的if。修复其他错误。
您不能像在第一个 if 中那样渲染部分标签。 Blazor 将为您关闭这些元素` `

标签： c# blazor blazor-server-side

【解决方案1】：

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

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

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

【讨论】：

非常感谢 - 就是这样！

【解决方案2】：

虽然杰里米提供了一个很好的答案。我最终遇到了我绝对需要打开标签的问题，事实上，我必须将所有内容重新写入 DIV 标签才能使事情正常进行。

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

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

【讨论】：