InputCheckBox - 根据条件选中复选框

Question

此处的目标是将复选框绑定到对象的布尔变量。现在，当我们选中该框时，它应该会弹出一个确认消息，如果我 select 'yes' 它应该继续执行该过程，但是如果我 select 'no' 那么它应该回到原来的状态。因此，对于演示，我实现了一个确认框并在那里检查条件。

Razor 文件：

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

所以当我们给出 'No' 作为我们的答案时，这段代码执行：

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

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

我怎样才能做到这一点？

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 是错误的。用户选中复选框，他单击“确定”作为确认。假设他决定在这个动作之后取消他之前的选择。为此，他应该单击选中的复选框以撤消之前的操作。您的代码不会这样做，也不会考虑单击“取消”按钮。

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

    }
}

InputCheckBox - 根据条件选中复选框

InputCheckBox - check the box based on a condition

c#

asp.net

asp.net-core

blazor

blazor-webassembly