InputCheckBox - check the box based on a condition-CodePudding

The goal here is to have a checkbox bound to a bool variable of an object. Now when we check the box it should give a confirmation pop up and if I select 'yes' it should go ahead with the procedure, but if I select 'no' then it should come back to the original state. So, for the demo I implemented a confirm box and there I am checking the condition.

Razor file:

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

Code:

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

So when we give 'No' as our answer, this code executes:

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

I want that the checkbox to be unchecked after this. This doesn't change the state of our product and it is 'TRUE' only when I printed it and checked.

How can I achieve this?

CodePudding user response：

This is my second answer... This is how you have to code and use logics

Either use the change event or the input event, but not both. When you do this:

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

You are using two events while you can and should use a single event: change

Do use async Task instead of async void

Most importantly, your logics is faulty: When you run the app for the first time and product.IsAssociated is false. The user checks the checkbox, he clicks OK as a geture of confirmation. Suppose he decided after this action to cancel his previous selection. In order to do that he should click on the checked checkbox in order to undo the previous action. Your code does not do that, and does not take into account, clicking on the "Cancel" button.

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

    }
}

CodePudding user response：

I just add EditForm and it works successfully.

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

Demo

I hope it is what you expect.

CodePudding user response：

Copy and test:

@page "/"

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

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

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

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

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

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

    }
}

Note: The call to the StateHasChangedmethod is not necessary, as it is automatically added by the framework when the state of your component is modified through UI events.