时间戳

首页 > 解决方案 > 如何将绑定值和 onchange 放在同一个输入复选框中？

c# - 如何将绑定值和 onchange 放在同一个输入复选框中？

问题描述

你好社区我在放置 a 时遇到问题，bind-value并且onchange显示以下错误：

The attribute 'onchange' is used two or more times for this element. Attributes must be unique (case-insensitive). The attribute 'onchange' is used by the '@bind' directive attribute.

这是我的input checkbox：

<div class="form-group col-md-2">
  <div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" @bind-value="@ProveedorEstadoCarrito.Cotizacion.Aceptada" @onchange="e => CheckChanged(e)">
<label class="custom-control-label" for="customSwitch1">Aceptada</label>
 </div>
</div>

这是事件：

private Boolean Aceptada = false;
private async Task CheckChanged(ChangeEventArgs ev)
{
    Aceptada = (Boolean)ev.Value;
    ProveedorEstadoCarrito.Cotizacion.Aceptada = Aceptada;       
    if (Aceptada == true)
    {
        var httpResponse = await repositorio.Put("api/Cotizacion", ProveedorEstadoCarrito.Cotizacion);
        if (httpResponse.Error)
        {
            await mostrarMensajes.MostrarMensajeError(await httpResponse.GetBody());
        }
        else
        {
            navigationManager.NavigateTo("/formulario-cotizacion");
        }
    }
}

我希望复选框bind被点击时激活

标签： c#asp.net-coreblazor

解决方案

首先，您通常不会绑定到 value 属性。它保持固定，当存在时，在表单元素中，它作为表单数据传递给服务器。

您想要的是选中的属性，如下面的代码片段所示：

<input type="checkbox" checked="@selected" 
       @onchange="@((args) => selected = (bool) args.Value)" /> 

@code {
    private bool selected;
}

上面的代码展示了如何绑定到一个复选框元素。如您所见，上面的代码创建了一个双向数据绑定，从变量到元素，以及从元素到变量。涉及值属性。同样的用法也适用于单选按钮元素。与其他输入元素不同，它们都使用了checked 属性，而不是value 属性。

您也可以使用此变体：

<input type="checkbox" @bind="selected" />

相当于上面的代码：一个选中的属性+ onchange事件，但是上面的版本可以让你解决你的问题。您的代码如下所示：

<input type="checkbox" class="custom-control-input" id="customSwitch1" checked="@ProveedorEstadoCarrito.Cotizacion.Aceptada" @onchange="CheckChanged">

和

private async Task CheckChanged(ChangeEventArgs ev)
{
    Aceptada = (Boolean)ev.Value;
    ProveedorEstadoCarrito.Cotizacion.Aceptada = Aceptada;       
    if (Aceptada == true)
    {

希望这可以帮助...

推荐阅读