如何获取 blazor 中单选按钮的值？

Question

hello community I have a problem how can I get the value of a radio button in blazor , I have three radio buttons in the first two I want to put a value number 0 and 16 to save them in the database and in the third button a bool value to show some input if that value was selected,but the truth is I don't know how to do this since I understand that in blazor you can't even put the bidirectional values with bind-value

this is my code:

 <div class="form-group col-md-2">
    <label>Impuestos</label>
    <div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" @bind-value="@ImpuestoDetalle.Tasa">
            <label class="form-check-label" for="inlineRadio1">0%</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" @bind-value="@ImpuestoDetalle.Tasa">
            <label class="form-check-label" for="inlineRadio2">16%</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" @bind="@Perzonalizado">
            <label class="form-check-label" for="inlineRadio3">Perzonalizado</label>
        </div>
    </div>
</div>




 @if (Perzonalizado)
   {
     <div class="form-group col-md-2">
       <label>Tasa</label>
     <div>
     <input type="number" class="form-control" @bind-value="@ImpuestoDetalle.Tasa" />
     </div>
     </div>
    }


@code {
    private Impuesto Impuesto = new Impuesto();
    private ImpuestoDetalle ImpuestoDetalle = new ImpuestoDetalle();

    private Boolean Perzonalizado = false;
}

Answer 1

Tried this really quickly and achieved in a slightly different way using onchange event:

<div class="form-group col-md-2">
    <label>Impuestos</label>
    <div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" @onchange="@(() => UpdatePercentage(0))">
            <label class="form-check-label" for="inlineRadio1">0%</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" @onchange="@(() => UpdatePercentage(16))">
            <label class="form-check-label" for="inlineRadio2">16%</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" @onchange="@(() => Perzonalized())">
            <label class="form-check-label" for="inlineRadio3">Perzonalizado</label>
        </div>
    </div>
</div>


@if (Perzonalizado)
{
    <div class="form-group col-md-2">
        <label>Tasa</label>
        <div>
            <input type="number" class="form-control" @bind-value="@ImpuestoDetalleM.Tasa" />
        </div>
    </div>
}

@code {

    public ImpuestoDetalle ImpuestoDetalleM = new ImpuestoDetalle();

    private Boolean Perzonalizado = false;

    public class ImpuestoDetalle
    {
        public int Tasa { get; set; }
    }

    public void Perzonalized()
    {
        Perzonalizado = true;
    }

    public void UpdatePercentage(int percentage)
    {
        Perzonalizado = false;
        ImpuestoDetalleM.Tasa = percentage;
    }
}

So basically when the radio button is clicked, we fill the value by passing from parameter.

You can also try the snippet here: https://blazorrepl.com/repl/ckOBGDvj26S1LtXe41