如何获得blazor中单选按钮的值

Question

你好社区我有一个问题，我如何在blazor中获得radio button的值，我在前两个按钮中有三个单选按钮，我想放一个值编号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;
}
}

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

您也可以在此处尝试该片段：https://blazorrepl.com/repl/ckOBGDvj26S1LtXe41