I have a of Hexes, buildings/improvments and NPC Hirelings. I would like to nest via a loop the Hexes, buildings/improvments and NPC Hirelings so that I can assign a hireling to a building that belongs to a Hex via a drop down. And once the Hireling is selected populate a label with some text and also remove/disable the hireling from all other drop down.
<table class="w-50">
@foreach (var hxs in HexName)
{
<tr>
<td colspan="2"><h3> @hxs.HexName Hex</h3></td>
</tr>
@foreach (var imps in Improvment) if (@hxs.HexName == imps.ImprovementHex)
{
<tr>
<td colspan="2">@imps.ImprovementName - @imps.ImprovementMaterial</td>
</tr>
@for (int i = 0; i <= 3; i++)
{
<tr>
<td class="p-3">
<select class="form-select">
<option />
@foreach (var hire in Hirelings)
{
<option value="@hire.HirelingId">@hire.HirelingName</option>
}
</select>
</td>
<td class="p-3"> <p>some text heere</p></td>
</tr>
}
}
}
</table>
@code {
private List<Improvements> Improvment = ImprovementsRepository.GetImprovements();
private List<MapHex> HexName = MapHexRepository.GetMapHex();
private List<Hireling> Hirelings = HirelingRepository.GetHirelings();
private string? TotalValue { get; set; }
}
I have tried using ChatGPT and Gemini to help create the code but I cannot get it to work.
First, try to avoid for loop in razor code. You can find the reason well explained here : https://shauncurtis.github.io/Building-Blazor-Applications/For-ForEach-in-Blazor.html
Secondly, when you select a option in your dropdown, you need to retrive the selected value and handle it.
If you don't need async call, you easilly can add a binded property :
<select class="form-select" @bind="@SelectedHire">
@foreach (var hire in Hirelings)
{
<option value="@hire.HirelingId">@hire.HirelingName</option>
}
</select>
@code {
private Hireling selectedHire;
private Hireling SelectedHire
{
get => selectedHire;
set
{
// Do what you want to check if you can select the new value
selectedHire = value;
// Do what you want once the hire has been selected
}
}
}
If you need async calls, you can listen the @onchange event :
<select class="form-select" @onchange=HandleHireChange>
@foreach (var hire in Hirelings)
{
<option value="@hire.HirelingId">@hire.HirelingName</option>
}
</select>
@code {
private Hireling selectedHire;
private async Task HandleHireChange(ChangeEventArgs e)
{
var selectedHireId = e.Value.ToString();
selectedHire = Hirelings.SingleOrDefault(x => x.HirelingId == selectedHireId);
// Do any async call if needed
}
}