I want to change a functionality in a project of my company, but everything I have done until now have not helped me achieve it.
I am using Blazor and in the Razor part of the code I am using MudBlazor. Before the change I was using a normal HTML radio group, with 2 options "Yes" and "No".
We thought using Checkboxes instead of Radio would benefit the project visually more, so I made changes but there was one thing I couldn’t find out. "Mutually exclusive"…
I couldn’t make the Checkbox options, so when "Yes" was clicked the other one "No" coudn’t be checked at the same time as "Yes" but instead check "No" and empty "Yes" instead. Just like a radio functionality. But I couldn’t achieve it…
Razor part of code :
<div class="form-check form-check-inline me-4 radio-print">
<MudCheckBox Label="Ja" T="bool" Checked="@_yesChecked" CheckedChanged="OnYesCheckedChanged" Disabled="@IsReadOnly" />
</div>
<div class="form-check form-check-inline radio-print">
<MudCheckBox Label="Nein" T="bool" Checked="@_noChecked" CheckedChanged="OnNoCheckedChanged" Disabled="@IsReadOnly" />
</div>
The options are binded to one SQL Databank value, in which we have it coded in Request.cs code file in our /Shared project file.
Binded to :
public bool GxpRelevant { get; set; }
…
@code part of the Blazor page :
[Parameter]
public Request? Model { get; set; }
private bool _yesChecked;
private bool _noChecked;`
protected override void OnInitialized()
{
_yesChecked = Model!.GxpRelevant;
_noChecked = !Model!.GxpRelevant;
}
private void OnYesCheckedChanged(bool value)
{
if (value)
{
_yesChecked = true;
_noChecked = false;
}
else
{
_yesChecked = false;
}
Model!.GxpRelevant = _yesChecked;
EvtChanged.InvokeAsync(Model);
}
private void OnNoCheckedChanged(bool value)
{
if (value)
{
_noChecked = true;
_yesChecked = false;
}
else
{
_noChecked = false;
}
Model!.GxpRelevant = !_noChecked;
EvtChanged.InvokeAsync(Model);
}
I also saw similar solutions in different AI generated codes, and they pretty much gave the same type of code, and I still couldn’t make the options of the checkbox mutually exclusive.
Anyone has had this type of experience before?
I am only a Junior Software Engineer, so I am not very experienced myself…
I would gladly appreciate the help.
2
Answers
Based on the code provided, your solution should work. You haven’t stated what version of MudBlazor you’re using though. If it’s v7, change
Checked
andCheckedChanged
toValue
andValueChanged
and that should fix your problem.Just remind that you only need 1 bool parameter for this mutually exclusive..