We Keep Coding

Blazor App Not Using Nested If Statements Properly

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;">
...
</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?!?

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>

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

Mark item when it's selected

I am starting to learn asp.net and I am a totally noob.
So, I am trying to select a town and, in the right side I should get the list of all town (like in the picture above).
So I am trying to do like, when I select a town from left side it should be mark as selected as from the right side.
My code is below
<table class="table datatable-responsive datatable-medical-map" id="medProviders" style="width:100%">
<thead>
<tr class="bg-info">
<th>Medical Provider (* Choose one)</th>
<th>Distance (miles)</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
#{ int i = 0;
foreach (var item in medProviders)
{
<tr class="sortList" style="cursor:pointer" id="increment-#i" data-id="#item.Id" data-lat="#item.Latitude" data-long="#item.Longitude">
<td>#item.Firstname</td>
<td id="distance-#i"></td>
<td id="duration-#i"></td>
</tr>
i++;
}
}
</tbody>
</table>
<p id="medicalValidation"></p>

Show Results on View

Im triyng to make some calculation on my View, but i cant show the result out of my #{} block
I have this table.
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
double sum = 0;
for (int i = 0; i < Model.Item2.Count; i++)
{
<tr>
#using (Html.BeginForm("AddProduct", "Sale", FormMethod.Post))
{
<td>
#Html.DisplayFor(modelItem => Model.Item2[i].idProduct)
</td>
<td>#Html.DisplayFor(model => Model.Item2[i].nameProduct)</td>
<td>
<p>R$#Html.DisplayFor(model => Model.Item2[i].pricesaleProduct)</p>
</td>
<td>#Html.DisplayFor(model => Model.Item2[i].quantityProduct)</td>
<td>
<input type="submit" class="btn btn-danger" value="Deletar">
</td>
sum += Model.Item2[i].pricesaleProduct * Model.Item2[i].quantityProduct;
}
</tr>
}
}
</tbody>
</table>
<!--I want display "sum" here-->
Total Value: #sum
I want to show "sum" out of my table, but trying several variations and a get error!
How can i make it?

You have declared sum inside if(){} block and hence you're not able to access it. Move it outside like this and it'll work
double sum = 0;
#if (Model != null)
{
............
............
}

Razor get value of input HTML bounded by foreach

I have one following table html, the data of rows in the table is looped by foreach.
Can I use Razor to get the value of each row into a List or an array in C#?
My C# code Razor (I tried this so far)
#{
var l = new List<string>();
l.Add(#<input id="updated_value2" data-bind="value:value,visible:isEditing()" />);
}
Here's my table
<table class="table table-hover">
<tbody data-bind="foreach: $root.mapJsons(parameters())">
<tr class="data-hover">
<td>
<strong>
<span data-bind="text:key" />
</strong>
</td>
<td>
#*display label and input for dictionary<value> false DIS true APP*#
<input id="updated_value" data-bind="value:value,visible:isEditing()" />
<label id="display_value" data-bind="text:value,visible:!isEditing()" />
</td>
</tr>
</tbody>
<thead>
<tr>
<th style="width: 30%">
Name
</th>
<th style="width: 30%">
Value
</th>
<th></th>
</tr>
</thead>
</table>

Your foreach loop is being executed client-side (looks like a KnockoutJS binding?) rather than server-side, so any Razor code you embed in the table is only going to be called once as it's rendered by the server. So the answer is no, you cannot populate a server-side list with this particular foreach loop.

optionsText is not applying in my knockout select object

I'm working with in my first knockout experience and have been learning quite a bit. What I'm attempting to do is populate a new object and push it into the viewModel for display.
The select box ( drop down box) is populating but when I click on add, the object name is blank. Then it occurred to me, I have two fields I need to collect from to assemble the object so I'm not sure I'm going about this the right way....
My data model:
function Colors(data) {
this.ID = ko.observable(data.ID);
this.ColorName = ko.observable(data.ColorName);
this.Duration = ko.observable(data.Duration);
}
View:
<table id="NewColor">
<tbody>
<tr>
<td>
<select id="SelectColor" data-bind="options: AllColors, optionsText: 'ColorName', value: AllColorss.ID, optionsCaption: 'Select Color...'"></select>
<input id="Duration" data-bind="value: Duration" />
<button data-bind='click: addColor'>Add Color</button>
</td>
</tr>
</tbody>
The input ID="duration" isn't working / populating right but I'm working on getting the model data to update.... (This is a side issue I'll look at later so of there's syntax issues there, that's why)
The script to add from the button click:
self.addColor = function() { self.AddColors.push(new Color(NewColor )) };
When that runs, the ColorName is blank in the following table but a blank entry is added.
Display / update table:
<table>
<thead>
<tr>
<th padding: 10px; >Color</th>
<th padding: 10px; >Duration</th>
</tr>
</thead>
<tbody data-bind="foreach: AddColors">
<tr>
<td data-bind="text: ColorName"></td>
<td data-bind="text: Duration"></td>
<td>
<a href='#' data-bind='click: $parent.removeLine'>Remove</a>
</td>
</tr>
</tbody>
Is what I'm doing the way to add an object into the array for the newly created object? I don't see a SelectedColor.SelectedText or anything similar. How do I access the text property of the select drop down list?

I'm not sure if what I was doing before would work but I backed off what I had and added in the select box after the line was added which was the same thing the tutorial was doing. That worked. I can't thank you enough, Robert.