Radio Button Group in Maui Blazor

Question

The input to this App is Area or Perimeter of a Square and output is Side.

Currently the toggle between Area and Perimeter is controlled by Checkbox,I need this in RadioButton,

please note that Area or Perimeter needs to be captured on Submit, also I don't to use Edit form as there is a Clear functionality.

@page "/SquareSide"
<h3>
    Square Area of a Square = side × side = side² square units
    Perimeter = 4 x side
    Enter Area ; Check the  Checkbox to enter Perimeter
</h3>
<input type="checkbox" id="addition" name="type" @bind="@type" disabled=@isdisabled />
   <br/>
  
   @if(type)
   {<span>Enter Perimeter</span>}
else
{
    <span>Enter Area</span>
}
<br />
    <div class="row">
     
        <div class="col-md-4">
            <input placeholder=" " @bind="@num1" disabled=@isdisabled />
        </div>
    </div>
    <br />
    
 
    <div>
    <button @onclick="Submit">Calculate</button>
    </div>
    <div>
        @errmsg
    </div>
    <div class="col-md-3">
        <p>Side</p>
    </div>
    <br />
    <div>
        @side
    </div>
     
   
      <br/>
<div>
    <button @onclick="Clear">Clear</button>
</div>
@code {
    private double num1; private double area; private double temparea; private double  perimeter; public string skip; private bool isdisabled=false ;private double side;
    public string errmsg = "";  public bool type  ;
    private ACTIVITY submitActivity { get; set; } = new();
    public class ACTIVITY
    {
        public string Dummy { get; set; }
    }
    private void Submit()
    {
        if (num1 >  0)
        {
            isdisabled = true;
        }
        errmsg = "";
        skip = "N";
        if ((num1 <= 0)  )
        { skip = "Y"; isdisabled = false; }
        if ((num1 > 2000)  )
        { skip = "Y"; isdisabled = false; }
        if (skip == "N")
        {
            if(type==false)
            { side = Math.Round(Math.Sqrt(num1),2); }
            else
            {side = Math.Round((num1/4),2); }
        }
        else
        { errmsg = "Enter a number between 1 and 2000"; }
    }
    private void Clear()
    { num1 = 0; isdisabled = false; side = 0;type = false; }
}

Answer 1

This seems like a homework assignment.

If I understand, you want to use a radio button to select between calculating an area or perimeter of a square given one side of the square. This is how I would approach the problem.

Enum to populate the radio buttons as illustrated in the official documentation.

https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/binding?view=aspnetcore-8.0#radio-buttons

namespace BlazorStandAloneApp.Models
{
    public class ComponentEnums
    {
        public enum Calulation { Perimeter, Area }
    }
}

Blazor Component

@page "/square"
@using System.ComponentModel.DataAnnotations
@using static BlazorStandAloneApp.Models.ComponentEnums

<h3>Square Area or Perimeter</h3>
<PageTitle>Square</PageTitle>

<div>
    <fieldset>
        <legend>Manufacturer</legend>
        <InputRadioGroup @bind-Value="Calulation">
            @foreach (var calculationItem in Enum.GetValues<Calulation>())
            {
                <div>
                    <label>
                        <InputRadio Value="calculationItem" />
                        @calculationItem
                    </label>
                </div>
            }
        </InputRadioGroup>
    </fieldset>
    <fieldset>
        <legend>Side of a square</legend>
        <InputNumber @bind-Value="Side" />
        <button @onclick="Calculate">
            Calculate
        </button>
    </fieldset>
    <fieldset>
        <legend>Result</legend>
        <div>@Result</div>
    </fieldset>
</div>

@code {
    [Required, EnumDataType(typeof(Calulation))]
    public Calulation? Calulation { get; set; } = null;

    [Required]
    public decimal? Side { get; set; } = null;
    public decimal? Result { get; set; } = null;


    private void Calculate()
    {
        if (Calulation == Models.ComponentEnums.Calulation.Perimeter)
        {
            Result = Side * 4;
        }
        else
        {
            Result = Side * Side;
        }        
    } 
}