InputCheckBox - 根据条件检查框

Question

这里的目标是让复选框绑定到对象的 bool 变量。 现在，当我们选中该框时，它应该会弹出一个确认消息，如果我选择“是”，它应该继续执行该过程，但如果我选择“否”，那么它应该回到原始状态。 因此，对于演示，我实现了一个确认框，并在那里检查条件。

剃须刀文件：

<InputCheckbox @bind-Value="@product.IsAssociated" @oninput="(e)=>AssociateProducts(e,product)"/>

代码：

public async void AssociateProducts(ChangeEventArgs e,Product product)
{
   bool confirmed = await JSRuntime.InvokeAsync<bool>("confirm", "Are you sure?");
   if (confirmed)
   {
      //normal procedure
   }
   else
   {     
       //this code isn't changing the state  
       product.IsAssociated = false;
       StateHasChanged();
   }
}

因此，当我们给出“否”作为我们的答案时，此代码将执行：

   else
   {     
       //this code isn't changing the state  
       product.IsAssociated = false;
       StateHasChanged();
   }

我希望在此之后取消选中该复选框。 这不会改变我们产品的状态，只有当我打印并检查时它才是“真”。

我怎样才能做到这一点？

Answer 1

我只是添加了EditForm并且它成功运行。

@page "/"
@inject IJSRuntime JsRuntime


<PageTitle>Index</PageTitle>


<EditForm Model="@product">
    <InputCheckbox @bind-Value="@product.IsAssociated" @oninput="(e)=>AssociateProducts(e,product)"/>
</EditForm>



@code{

    public Product product { get; set; } = new Product();

    public async void AssociateProducts(ChangeEventArgs e,Product product)
    {
       bool confirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Are you sure?");
       if (confirmed)
       {
          //normal procedure
       }
       else
       {     
           //this code isn't changing the state  
           product.IsAssociated = false;
           StateHasChanged();
       }
    }
}

演示

我希望这是你所期望的。

Answer 2

这是我的第二个答案......这就是你必须如何编码和使用逻辑

使用change事件或input事件，但不能同时使用。 当你这样做时：

    `@bind-Value="@product.IsAssociated" @oninput=" 
                               (e)=>AssociateProducts(e,product)"`

您正在使用两个事件，而您可以并且应该使用一个事件： change

请使用async Task而不是async void

最重要的是，您的逻辑是错误的：当您第一次运行应用程序并且product.IsAssociated为 false 时。 用户选中复选框，然后单击 OK 作为确认。 假设他在这个动作之后决定取消他之前的选择。 为此，他应单击选中的复选框以撤消先前的操作。 您的代码没有这样做，也没有考虑到单击“取消”按钮。

@page "/"

 @inject IJSRuntime JSRuntime
 <EditForm Model="product">
    <InputCheckbox ValueExpression="@( () => product.IsAssociated )" 
                   Value="@product.IsAssociated" 
                   ValueChanged="@( (bool args) => AssociateProducts(args, product) )"/>
</EditForm>

<div>product.IsAssociated: @product.IsAssociated</div>
@code { 

    private Product product = new Product { ID = 1, Name = "Product1", IsAssociated = false };

    public async Task AssociateProducts(bool args, Product product)
    {
        bool confirmed = await JSRuntime.InvokeAsync<bool>( "confirm", new [] { "Are you sure?" });

        if (confirmed && !product.IsAssociated)
        {
             product.IsAssociated = true;
        }
        else if(confirmed && product.IsAssociated)
        {
             product.IsAssociated = false;
            
        }
    }

    public class Product
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool IsAssociated { get; set; }

    }
}