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

Question

你好社区我有一个问题，如何在 blazor 中获取单选按钮的值，我在前两个中有三个单选按钮，我想放一个值数字 0 和 16 将它们保存在数据库中，在第三个按钮中使用 bool 值来显示一些输入(如果选择了该值)，但事实是我不知道如何做到这一点，因为我知道在 blazor 中你甚至不能将双向值与 bind-value

这是我的代码:

 <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

非常快速地尝试了这一点，并使用 onchange 事件以稍微不同的方式实现:

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

所以基本上，当单击单选按钮时，我们通过传递参数来填充值。

您还可以尝试此处的代码片段:https://blazorrepl.com/repl/ckOBGDvj26S1LtXe41