Share via

Radio Button Group in Maui Blazor

Kalyan A 185 Reputation points
2024-09-20T11:06:03.8266667+00:00

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; }
}
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,575 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,472 questions
0 comments
Accepted answer
  1. AgaveJoe 28,131 Reputation points
    2024-09-20T12:52:24.63+00:00

    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;
        }        
    } 
}
    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.