Blazor App Not Using Nested If Statements Properly

Question

I know, I suck because I am using a table and not div tags but I could not get the div tags to display properly and my deadline was some time last week...

I am trying to layout a bunch of devices along with their statuses and other simple options and yet I cannot get the ìf statements to work. Here is my code:

@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>
}

The beginning if statement and the if statements that run the CurrentStatus and UsingEncryption seem to be working, however the last if statement is simply writing text to the screen.

If I add @ signs to the first and/or last if statements, I get a ton of errors about not having closing tags, objects not being defined, etc...
If I remove the @ signs from the CurrentStatus and UsingEncryption if statements, those statements stop working.
If I remove the @ from the foreach statement, nothing prints out.

What am I doing wrong?!?

Firstly I see one opening `` but two closing `
`. That's not going to fly with the Razor compiler. Also all `if`s need to be declared as `@if`. If the compiler doesn't like it then you have code errors. Remove/comment out blocks until you find your problems. — MrC aka Shaun Curtis, Nov 14 '21 at 21:55
You cannot render partial tags like you are doing in the first `if`. Blazor will close these elements for you ` ` — Mister Magoo, Nov 14 '21 at 23:25

score 1 · Accepted Answer · answered Nov 15 '21 at 00:24

To use tag helpers, your html structure must mirror your control flow. You can't just start a tag inside an if test without also closing it within that if test.

While you can escape unmatched html tags with @: (eg Razor doesn't understand unclosed html tags), with a little effort, you can eliminate your unmatched tags;

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

Thank you so much - that was it! – Ken Tola Nov 15 '21 at 20:49 — Ken Tola, Nov 15 '21 at 20:49

score -1 · Answer 2 · edited Nov 16 '21 at 04:33

While Jeremy provided an excellent answer. I ended up running into issues where I absolutely needed open tags and, in fact, I had to re-write everything back into DIV tags to make things work.

That is when I discovered my new bestest friend - the MarkupString - that I can use to insert any HTML code I desire without blowing up the IDE!

Here is a link that explains how to use it - https://www.meziantou.net/rendering-raw-unescaped-html-in-blazor.htm

Blazor App Not Using Nested If Statements Properly

2 Answers2